arinspunk/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 <4.5:1 and suggest colors that meet WCAG AA"

Rebranding:

"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:

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

4. 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 .

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}.

🐳 Alternative: Using Docker

If you prefer Docker or need to run the WebSocket server in a team environment, see the 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 .

📚 Documentation

• — Manual setup, Cursor, Windsurf and other IDEs
• — Complete tool reference
• — Common errors and how to fix them
• — Architecture, testing, contribution guide
• — 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 .

📊 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. ❤️