![Claude Talk to Figma collage](images/claude-talk-to-figma.png) # 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](https://claude.ai/) - [Claude Code](https://docs.anthropic.com/en/docs/claude-code) - [Cursor](https://cursor.com/) - [Antigravity](https://antigravity.google/) - [Windsurf](https://windsurf.com/) - [VS Code](https://code.visualstudio.com/) + [GitHub Copilot](https://github.com/features/copilot) - [Cline](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev) - [Roo Code](https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline) ## πŸ‘©πŸ½β€πŸ’» 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](https://www.figma.com/mcp-catalog/) 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](https://nodejs.org/en/download) installed - [Figma Desktop](https://www.figma.com/downloads/) - AI client: - [Claude Desktop](https://claude.ai/download) - [Claude Code](https://docs.anthropic.com/en/docs/claude-code) - [Cursor](https://cursor.com/downloads) - [Antigravity](https://antigravity.google/download) - [Windsurf](https://windsurf.com/download) - [VS Code](https://code.visualstudio.com/) + [GitHub Copilot](https://github.com/features/copilot) - [Cline](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev) - [Roo Code](https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline) ### 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](https://github.com/arinspunk/claude-talk-to-figma-mcp/releases) (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](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](https://github.com/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](https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp) by Sonny Lazuardi. Adapted for Claude Desktop and extended with new tools by [XΓΊlio ZΓ©](https://github.com/arinspunk). 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](https://github.com/arinspunk/claude-talk-to-figma-mcp/issues)** Your feedback and contributions keep the project alive. ❀️