grab/cursor-talk-to-figma-mcp
TalkToFigma: MCP integration between AI Agent (Cursor, Claude Code, Codex) and Figma, allowing Agentic AI to communicate with Figma for reading designs and modifying them programmatically.
6,953 ★757 forksJavaScriptUpdated 12d ago
What you need to know
Grab's MCP integration between AI agents (Cursor, Claude Code) and Figma, letting agents read designs and modify them programmatically through a TypeScript MCP server, a WebSocket server, and a Figma plugin. Enables design automation like bulk text replacement and instance override propagation.
Install
Install Bun: curl -fsSL https://bun.sh/install | bash Run `bun setup` (installs MCP in your Cursor active project) Start the WebSocket server: `bun socket` Install the Figma plugin from the Figma community page or link src/cursor_mcp_plugin/manifest.json locally
Usage
- •Alternative MCP config: {"mcpServers": {"TalkToFigma": {"command": "bunx", "args": ["cursor-talk-to-figma-mcp@latest"]}}} in ~/.cursor/mcp.json
- •Start the WebSocket server, install the MCP server in Cursor, open the Figma plugin, join a channel with join_channel, then use Cursor to communicate with Figma
- •Windows + WSL: install bun via PowerShell, uncomment hostname "0.0.0.0" in src/socket.ts, then start the websocket
- •Best practice: join a channel before sending commands, get document overview with get_document_info first, verify changes with get_node_info
Key features
- ✓~50 MCP tools covering document/selection reads (get_document_info, get_selection, read_my_design, get_node_info), creating elements (create_rectangle, create_frame, create_text), text replacement (scan_text_nodes, set_text_content, batch updates), auto-layout/styling, and node layout operations
- ✓Annotations: get/set annotations with markdown support and batch creation; converting legacy annotations to native Figma annotations
- ✓Prototyping: get_reactions, create_connections (FigJam connectors), set_default_connector
- ✓Components: get_styles, get_local_components, create_component_instance, get/set_instance_overrides (override propagation across instances)
- ✓Export node as image (PNG/JPG/SVG/PDF) and 6 helper MCP prompts (design_strategy, text_replacement_strategy, swap_overrides_instances, etc.)
Best for
Automating Figma design edits (bulk text replacement, instance override propagation, annotation conversion, prototype→connector mapping) from Cursor or Claude Code.
Caveats
- ⚠Requires Bun runtime, a running WebSocket server, and the Figma plugin installed/started in Figma
- ⚠export_node_as_image has limited support (image currently returned as base64 text)
- ⚠All commands can throw exceptions; set_default_connector must be set before creating connections
Platforms: macOS · Linux · Windows (via WSL)Clients: Cursor · Claude Code
Reviewed 2026-08-07
Topics
agentagenticagentic-aiaiai-agentsautomationclaude-codecodexcursordesignfigmagenerative-aillmllmsmcpmodel-context-protocol
- Stars
- 6,953★
- Forks
- 757
- Language
- JavaScript
- License
- MIT
- Created
- 2025-03-16
- Last push
- 2026-07-26