claude-talk-to-figma-mcp
installs/mo · npmstarsforks
How to install claude-talk-to-figma-mcp?
arinspunk/claude-talk-to-figma-mcp
$git clone https://github.com/arinspunk/claude-talk-to-figma-mcpEnable your AI agents to read, analyze, and modify Figma designs.
README.md
| 1 |  |
| 2 | |
| 3 | # <del>Claude</del> <ins>AI Agents</ins> Talk to Figma MCP |
| 4 | |
| 5 | Enable your AI agents to read, analyze, and modify Figma designs. |
| 6 | |
| 7 | Works with your favorite agentic tools: |
| 8 | |
| 9 | - [Claude Desktop](https://claude.ai/) |
| 10 | - [Claude Code](https://docs.anthropic.com/en/docs/claude-code) |
| 11 | - [Cursor](https://cursor.com/) |
| 12 | - [Antigravity](https://antigravity.google/) |
| 13 | - [Windsurf](https://windsurf.com/) |
| 14 | - [VS Code](https://code.visualstudio.com/) + [GitHub Copilot](https://github.com/features/copilot) |
| 15 | - [Cline](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev) |
| 16 | - [Roo Code](https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline) |
| 17 | |
| 18 | ## 👩🏽💻 Who it's for |
| 19 | |
| 20 | ### UX/UI Teams |
| 21 | |
| 22 | Automate repetitive design tasks and maintain brand consistency without manual effort: |
| 23 | |
| 24 | - **Automated accessibility audits** - Detect and fix contrast issues in seconds |
| 25 | - **Bulk style updates** - Change colors, typography, or spacing across the entire document with a single command |
| 26 | - **Visual hierarchy analysis** - Get instant feedback on your design structure |
| 27 | |
| 28 | ### Developers |
| 29 | |
| 30 | Generate production-ready code directly from designs: |
| 31 | |
| 32 | - **React/Vue/SwiftUI components** - From design to code in one step |
| 33 | - **Code with design tokens** - Keep design and development in sync |
| 34 | - **Reduce handoff friction** - Fewer back-and-forth iterations with the design team |
| 35 | |
| 36 | > **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). |
| 37 | |
| 38 | ## 💡 Real-world use cases |
| 39 | |
| 40 | **Accessibility:** |
| 41 | > "Find all text with contrast ratio <4.5:1 and suggest colors that meet WCAG AA" |
| 42 | |
| 43 | **Rebranding:** |
| 44 | > "Change #FF6B6B to #E63946 in all primary buttons throughout the document" |
| 45 | |
| 46 | **Design analysis:** |
| 47 | > "Analyze the visual hierarchy of this screen and suggest improvements based on design principles" |
| 48 | |
| 49 | **Developer handoff:** |
| 50 | > "Generate the React component for 'CardProduct' including PropTypes and styles in CSS modules" |
| 51 | |
| 52 | ## ⚡️ Quick installation |
| 53 | |
| 54 | **Setup:** 5 minutes | **First automation:** 2 minutes |
| 55 | |
| 56 | ### Requirements |
| 57 | |
| 58 | - [Node.js](https://nodejs.org/en/download) installed |
| 59 | - [Figma Desktop](https://www.figma.com/downloads/) |
| 60 | - AI client: |
| 61 | - [Claude Desktop](https://claude.ai/download) |
| 62 | - [Claude Code](https://docs.anthropic.com/en/docs/claude-code) |
| 63 | - [Cursor](https://cursor.com/downloads) |
| 64 | - [Antigravity](https://antigravity.google/download) |
| 65 | - [Windsurf](https://windsurf.com/download) |
| 66 | - [VS Code](https://code.visualstudio.com/) + [GitHub Copilot](https://github.com/features/copilot) |
| 67 | - [Cline](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev) |
| 68 | - [Roo Code](https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline) |
| 69 | |
| 70 | ### Step 1: Install and start the websocket |
| 71 | |
| 72 | *Enables the Agent to send commands to Figma.* |
| 73 | |
| 74 | Open your terminal, navigate to the folder where you want to install the tool, and run: |
| 75 | |
| 76 | ```bash |
| 77 | npx claude-talk-to-figma-mcp |
| 78 | ``` |
| 79 | |
| 80 | > **💡 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`. |
| 81 | |
| 82 | ### Step 2: Install the plugin in Figma |
| 83 | |
| 84 | *Enables Figma to receive commands from the agent and return responses.* |
| 85 | |
| 86 | 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` |
| 87 | |
| 88 | ### Step 3: Configure your Agentic Tool |
| 89 | |
| 90 | *Enables the agent to use the MCP's read and modify tools.* |
| 91 | |
| 92 | #### Claude Desktop |
| 93 | |
| 94 | 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. |
| 95 | |
| 96 | #### Cursor |
| 97 | |
| 98 | 1. Open **Cursor Settings → Tools & Integrations** |
| 99 | 2. Click **"New MCP S |
People who liked this also viewed
6 picksType
- Figma-Context-MCPMCP server to provide Figma layout information to AI coding agents like CursorMCP ServersJul 2026
- sunnysideFigma-Context-MCPA comprehensive Model Context Protocol (MCP) server that bridges Figma designs with AI development workflows. It provides 30 specialized tools for extracting pixel-perfect code, assets, and component structures directly from Figma designs.MCP ServersApr 2026
- figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.MCP ServersJul 2026
- dcc-mcp-coreCore runtime and shared tooling for DCC-MCP: safe, skill-first MCP integration across Maya, Blender, Houdini, Photoshop, and custom DCC hosts.MCP ServersJul 2026
- godot-aiProduction-grade MCP server and AI tools for the Godot engine. A Snap to install. Totally free and fun.MCP ServersJul 2026
- freecad-mcpFreeCAD MCP(Model Context Protocol) serverMCP ServersJul 2026
