{"id":"708cda5d-bac3-4029-959b-40ffcae404f9","slug":"claude-talk-to-figma-mcp","kind":"mcp","name":"claude-talk-to-figma-mcp","summary":"A Model Context Protocol (MCP) that allows Claude Desktop and other AI tools (Claude Code, Cursor, Antigravity, etc.) to read, analyze, and modify Figma designs","owner":"arinspunk","repoUrl":"https://github.com/arinspunk/claude-talk-to-figma-mcp","license":"MIT","licenseTier":"permissive","trust":"community","stars":671,"match":null,"fewStars":false,"format":"mcp","createdAt":"2025-04-04T21:38:32.000Z","addedAt":"2026-10-14T03:42:09.542Z","logoUrl":"https://avatars.githubusercontent.com/u/8027962?u=7aa66e83cee1d678ba7571052d3af245c2315a6c&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media","developer-tools","cloud-infra"],"tags":["claude","claude-ai","figma","cursor","githubcopilot","antigravity","claude-code","windsurf-ai"],"runtime":"node","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-15T02:42:25.055Z","sample":false,"url":"https://conduits.dev/tools/claude-talk-to-figma-mcp","language":"TypeScript","transports":["stdio"],"install":{"npm":"claude-talk-to-figma-mcp"},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"![Claude Talk to Figma collage](images/claude-talk-to-figma.png)\n\n# <del>Claude</del> <ins>AI Agents</ins> Talk to Figma MCP\n\nEnable your AI agents to read, analyze, and modify Figma designs.\n\nWorks with your favorite agentic tools:\n\n- [Claude Desktop](https://claude.ai/)\n- [Claude Code](https://docs.anthropic.com/en/docs/claude-code)\n- [Cursor](https://cursor.com/)\n- [Antigravity](https://antigravity.google/)\n- [Windsurf](https://windsurf.com/)\n- [VS Code](https://code.visualstudio.com/) + [GitHub Copilot](https://github.com/features/copilot)\n- [Cline](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev)\n- [Roo Code](https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline)\n\n## 👩🏽‍💻 Who it's for\n\n### UX/UI Teams\n\nAutomate repetitive design tasks and maintain brand consistency without manual effort:\n\n- **Automated accessibility audits** - Detect and fix contrast issues in seconds\n- **Bulk style updates** - Change colors, typography, or spacing across the entire document with a single command\n- **Visual hierarchy analysis** - Get instant feedback on your design structure\n\n### Developers\n\nGenerate production-ready code directly from designs:\n\n- **React/Vue/SwiftUI components** - From design to code in one step\n- **Code with design tokens** - Keep design and development in sync\n- **Reduce handoff friction** - Fewer back-and-forth iterations with the design team\n\n> **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).\n\n## 💡 Real-world use cases\n\n**Accessibility:**\n> \"Find all text with contrast ratio <4.5:1 and suggest colors that meet WCAG AA\"\n\n**Rebranding:**\n> \"Change #FF6B6B to #E63946 in all primary buttons throughout the document\"\n\n**Design analysis:**\n> \"Analyze the visual hierarchy of this screen and suggest improvements based on design principles\"\n\n**Developer handoff:**\n> \"Generate the React component for 'CardProduct' including PropTypes and styles in CSS modules\"\n\n## ⚡️ Quick installation\n\n**Setup:** 5 minutes | **First automation:** 2 minutes\n\n### Requirements\n\n- [Node.js](https://nodejs.org/en/download) installed\n- [Figma Desktop](https://www.figma.com/downloads/)\n- AI client:\n  - [Claude Desktop](https://claude.ai/download)\n  - [Claude Code](https://docs.anthropic.com/en/docs/claude-code)\n  - [Cursor](https://cursor.com/downloads)\n  - [Antigravity](https://antigravity.google/download)\n  - [Windsurf](https://windsurf.com/download)\n  - [VS Code](https://code.visualstudio.com/) + [GitHub Copilot](https://github.com/features/copilot)\n  - [Cline](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev)\n  - [Roo Code](https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline)\n\n### Step 1: Install and start the websocket\n\n*Enables the Agent to send commands to Figma.*\n\nOpen your terminal, navigate to the folder where you want to install the tool, and run:\n\n```bash\nnpx claude-talk-to-figma-mcp\n```\n\n> **💡 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`.\n\n### Step 2: Install the plugin in Figma\n\n*Enables Figma to receive commands from the agent and return responses.*\n\nIn 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`\n\n### Step 3: Configure your Agentic Tool\n\n*Enables the agent to use the MCP's read and modify tools.*\n\n#### Claude Desktop\n\nDownload [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.\n\n#### Cursor\n\n1. Open **Cursor Settings → Tools & Integrations**\n2. Click **\"New MCP Server\"** to open the `mcp.json` file\n3. Add this configuration:\n  ```json\n  {\n    \"mcpServers\": {\n      \"ClaudeTalkToFigma\": {\n        \"command\": \"npx\",\n        \"args\": [\"-p\", \"claude-talk-to-figma-mcp@latest\", \"claude-talk-to-figma-mcp-server\"]\n      }\n    }\n  }\n  ```\n4. Save the file and restart Cursor\n\n#### Other Agentic Tools\n\nFor 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).\n\n### Step 4: Start working\n\n1. Open the plugin in Figma\n2. Copy the channel ID (bold code inside the green box)\n3. Type in the chat: `Connect to Figma, channel {your-ID}`\n\n✅ Ready to design with AI!\n\n## Subsequent work sessions\n\nTo use the MCP again in day-to-day work, you don't need to repeat the entire process:\n\n1. **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`).\n2. **Open the plugin in Figma**: You'll find it in your recent plugins list.\n3. **Connect the AI**: Copy the channel ID and tell your agent: `Connect to Figma, channel {your-ID}`.\n\n## 🤖 Multi-Agent & Parallel execution\n\nThis 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.\n\n> **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`).\n\n*(Special thanks to [@mmabas77](https://github.com/mmabas77) for architecting and contributing this feature!)*\n\n## 🐳 Alternative: Using Docker\n\nIf 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.\n\n## 🛠️ Capabilities\n\n**Design analysis**\n- Get document information, current selection, styles\n- Scan text, audit components, export assets\n\n**Element creation**\n- Shapes, text, frames with full style control\n- Clone, group, organize elements\n\n**Modification**\n- Colors, borders, corners, shadows\n- Auto-layout, advanced typography\n- Local components and team library components\n\nSee [complete command list](COMMANDS.md).\n\n## 📚 Documentation\n\n- [Detailed installation](INSTALLATION.md) — Manual setup, Cursor, Windsurf and other IDEs\n- [Available commands](COMMANDS.md) — Complete tool reference\n- [Troubleshooting](TROUBLESHOOTING.md) — Common errors and how to fix them\n- [Contributing](CONTRIBUTING.md) — Architecture, testing, contribution guide\n- [Changelog](CHANGELOG.md) — Version history\n\n## 🙏 Credits\n\nBased 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).\n\nIf you want to know about all project contributions, you can visit the [\"Contributors\" chapter of the contribution guide](CONTRIBUTING.md#contributors).\n\n[MIT License](LICENSE)\n\n---\n\n## 📊 Project status\n\n✅ **Stable production** - Tool ready for daily use in design and development teams\n\n🚀 **Under active development:**\n- Complete support for Figma Variables\n- Enhanced export to Tailwind CSS/SwiftUI\n\n### Need something specific?\n\n**[Propose new ones on GitHub Issues](https://github.com/arinspunk/claude-talk-to-figma-mcp/issues)**\n\nYour feedback and contributions keep the project alive. ❤️\n"}