Claude Talk to Figma collage

Claude AI Agents Talk to Figma MCP

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

Works with your favorite agentic tools:

👩🏽‍💻 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

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:

bash

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"]
      }
    }
  }

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 "Configure your Agentic Tool" chapter of the detailed installation guide.

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 Docker installation guide 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.

📚 Documentation

Detailed installation — Manual setup, Cursor, Windsurf and other IDEs
Available commands — Complete tool reference
Troubleshooting — Common errors and how to fix them
Contributing — Architecture, testing, contribution guide
Changelog — 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.

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

Claude Talk To Figma Mcp

Documentation