Claude Talk To Figma Mcp

Claude AI Agents Talk to Figma MCP

Enable your AI agents to read, analyze, and modify Figma designs.

Works with your favorite agentic tools:

• Claude Desktop
• Claude Code
• Cursor
• Antigravity
• Windsurf
• VS Code + GitHub Copilot
• Cline
• Roo Code

👩🏽‍💻 Who it's for

UX/UI Teams

Automate repetitive design tasks and maintain brand consistency without manual effort:

• Automated accessibility audits - Detect and fix contrast issues in seconds
• Bulk style updates - Change colors, typography, or spacing across the entire document with a single command
• Visual hierarchy analysis - Get instant feedback on your design structure

Developers

Generate production-ready code directly from designs:

• React/Vue/SwiftUI components - From design to code in one step
• Code with design tokens - Keep design and development in sync
• Reduce handoff friction - Fewer back-and-forth iterations with the design team

> Key advantage: Unlike Figma's official MCP which requires a Dev Mode license, this MCP works with any Figma account (even free ones).

💡 Real-world use cases

Accessibility: > "Find all text with contrast ratio "Change #FF6B6B to #E63946 in all primary buttons throughout the document"

Design analysis: > "Analyze the visual hierarchy of this screen and suggest improvements based on design principles"

Developer handoff: > "Generate the React component for 'CardProduct' including PropTypes and styles in CSS modules"

⚡️ Quick installation

Setup: 5 minutes | First automation: 2 minutes

Requirements

• Node.js installed
• Figma Desktop
• AI client:
• Claude Desktop
• Claude Code
• Cursor
• Antigravity
• Windsurf
• VS Code + GitHub Copilot
• Cline
• Roo Code

Step 1: Install and start the websocket

Enables the Agent to send commands to Figma.

Open your terminal, navigate to the folder where you want to install the tool, and run:

npx claude-talk-to-figma-mcp

> 💡 Tip: This command is an "all-in-one" (clones, installs, and starts). In subsequent sessions, if you're already inside the project folder your-project/claude-talk-to-figma-mcp, you can simply run bun run socket.

Step 2: Install the plugin in Figma

Enables Figma to receive commands from the agent and return responses.

In Figma Desktop go to Menu → Plugins → Development → Import plugin from manifest → inside the folder where you installed the MCP, select src/claude_mcp_plugin/manifest.json

Step 3: Configure your Agentic Tool

Enables the agent to use the MCP's read and modify tools.

Claude Desktop

Download claude-talk-to-figma-mcp.dxt (from Assets section of the latest release) and double-click. Claude configures itself automatically.

Cursor

1. Open Cursor Settings → Tools & Integrations
2. Click "New MCP Server" to open the mcp.json file
3. Add this configuration:

``json { "mcpServers": { "ClaudeTalkToFigma": { "command": "npx", "args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"] } } } ``

1. Save the file and restart Cursor

Other Agentic Tools

For other tools (Claude Code, Windsurf, VS Code + GitHub Copilot, Cline, Roo Code), you can follow the instructions in the ["Configure your Agentic Tool" chapter of the detailed installation guide](INSTALLATION.md#3-configure-your-agentic-tool).

Step 4: Start working

1. Open the plugin in Figma
2. Copy the channel ID (bold code inside the green box)
3. Type in the chat: Connect to Figma, channel {your-ID}

✅ Ready to design with AI!

Subsequent work sessions

To use the MCP again in day-to-day work, you don't need to repeat the entire process:

1. Start the socket: In the terminal, enter the project folder your-project/claude-talk-to-figma-mcp and run bun run socket (or npm run socket).
2. Open the plugin in Figma: You'll find it in your recent plugins list.
3. Connect the AI: Copy the channel ID and tell your agent: Connect to Figma, channel {your-ID}.

🤖 Multi-Agent & Parallel execution

This MCP server supports safe parallel execution out of the box, allowing multiple AI agents (e.g. Claude Code's sub-agents or team swarms) to work simultaneously on your Figma file without locking up the plugin. A built-in command queue processes requests sequentially on the server side, preventing the Figma API from timing out.

> Note: Because multiple agents can modify the document simultaneously, relying on implicit page context is unsafe. As a result, stateful commands like set_current_page are blocked. All agents must explicitly provide the intended parentId parameter when executing any creation or structural modification command (e.g., create_frame, create_text).

(Special thanks to @mmabas77 for architecting and contributing this feature!)

🐳 Alternative: Using Docker

If you prefer Docker or need to run the WebSocket server in a team environment, see the [Docker installation guide](INSTALLATION.md#alternative-using-docker) in the detailed installation documentation.

🛠️ Capabilities

Design analysis

• Get document information, current selection, styles
• Scan text, audit components, export assets

Element creation

• Shapes, text, frames with full style control
• Clone, group, organize elements

Modification

• Colors, borders, corners, shadows
• Auto-layout, advanced typography
• Local components and team library components

See [complete command list](COMMANDS.md).

📚 Documentation

• [Detailed installation](INSTALLATION.md) — Manual setup, Cursor, Windsurf and other IDEs
• [Available commands](COMMANDS.md) — Complete tool reference
• [Troubleshooting](TROUBLESHOOTING.md) — Common errors and how to fix them
• [Contributing](CONTRIBUTING.md) — Architecture, testing, contribution guide
• [Changelog](CHANGELOG.md) — Version history

🙏 Credits

Based on cursor-talk-to-figma-mcp by Sonny Lazuardi. Adapted for Claude Desktop and extended with new tools by Xúlio Zé.

If you want to know about all project contributions, you can visit the ["Contributors" chapter of the contribution guide](CONTRIBUTING.md#contributors).

[MIT License](LICENSE)

---

📊 Project status

✅ Stable production - Tool ready for daily use in design and development teams

🚀 Under active development:

• Complete support for Figma Variables
• Enhanced export to Tailwind CSS/SwiftUI

Need something specific?

Propose new ones on GitHub Issues

Your feedback and contributions keep the project alive. ❤️

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: arinspunk
• Source: arinspunk/claude-talk-to-figma-mcp
• License: MIT

Install and usage instructions live in the source repository linked above.