A local MCP integration that connects AI agents directly to Figma Desktop for seamless design generation and code export without OAuth.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install figma-desktop
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install figma-desktop using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Figma Desktop MCP Skill?
The Figma Desktop MCP Skill leverages the built-in local Model Context Protocol server provided by the Figma desktop application. By integrating this skill through Openclaw Skills, developers can bypass complex OAuth setups and interact directly with their design files in real-time. This skill provides a bridge for AI agents to access high-level Figma features such as Figma Make for generative design, Code Connect for component mapping, and advanced code generation capabilities.
Running locally at http://127.0.0.1:3845/mcp, this tool ensures low-latency communication and high data privacy. It allows your AI assistant to 'see' what you have selected in Figma, understand your design system variables, and even generate complete UI components in frameworks like React, Vue, or React Native based on the active design context.
Figma Desktop MCP Skill Use Cases
- Generating production-ready React, Vue, or Tailwind CSS code from selected design layers.
- Utilizing Figma Make to generate design layouts and UI components from natural language descriptions.
- Synchronizing design system styles and variables directly into developer environments.
- Automated auditing of design accessibility and contrast ratios via AI-driven optimization commands.
How Figma Desktop MCP Skill Works
- The user opens a design or FigJam file in the Figma Desktop application.
- The user switches to Dev Mode and enables the built-in MCP server in the right-hand panel.
- Openclaw Skills utilizes the mcporter utility to establish a connection to the local server endpoint.
- The AI agent sends structured tool calls to the local server to query design data or trigger generation features.
- Figma executes the requested design or code operation and returns the results directly to the agent's context.
Figma Desktop MCP Skill Setup
First, ensure you have mcporter installed globally:
npm install -g mcporter
Next, install Figma Desktop and enable the MCP server:
- Open any Figma file and toggle into Dev Mode.
- Locate the MCP server option in the right panel and click Enable.
- Copy the server URL (usually
http://127.0.0.1:3845/mcp).
Finally, configure the skill via mcporter:
mcporter config add figma-desktop --url http://127.0.0.1:3845/mcp --transport http
Figma Desktop MCP Skill Data Schema & Taxonomy
The skill interacts with Figma's internal data model and exposes tools categorized by functionality:
| Tool Category | Data Handled | Primary Parameters |
|---|---|---|
| Design Generation | Layouts, Components | description, width, goal |
| Code Export | React, Vue, CSS, Tailwind | framework, typescript, includeStyles |
| Context Retrieval | Nodes, Styles, Variables | nodeId, componentKey |
| File Management | Pages, File Structure | fileKey (inferred from active tab) |
All interactions are stateful based on the currently active tab in the Figma Desktop app.
Figma Desktop MCP Skill Advanced Features
- Full Figma Make integration for generative AI design suggestions.
- Code Connect support for linking design components to existing production codebases.
- Real-time synchronization with the user's current selection in the Figma workspace.
- Support for advanced design system variables and style definitions.
- Multi-framework code generation including React Native and specialized CSS-in-JS patterns.
SKILL.md
Loading
Related Openclaw Skills
ocli-api
A streamlined tool that converts OpenAPI/Swagger specifications into functional CLI commands without needing an MCP server.
Turkish Locale Skill Pack
A comprehensive localization ecosystem providing Turkish personality templates, real-time news, BIST100 financial tracking, and automated daily briefs.
Skill Experience Layer
A layered experience mechanism that provides AI agents with per-skill memory to prevent mistakes before they happen and evolve through error-driven learning.
XLSX: Advanced Spreadsheet Engine
A professional-grade skill for programmatically managing Excel spreadsheets with a focus on dynamic formulas, financial modeling standards, and automated recalculation.
Nansen Smart Alerts
A command-line management tool for Nansen smart alerts to track real-time token flows, smart money movements, and contract calls.
Image Compression Skill
An automated image optimization skill for macOS that ensures your media meets platform size limits before sending.
Featured*
