{"data":{"slug":"grab-cursor-talk-to-figma-mcp","name":"cursor-talk-to-figma-mcp","tagline":"Integration of AI agents with Figma for programmable design interaction","github_url":"https://github.com/grab/cursor-talk-to-figma-mcp","owner":"grab","repo":"cursor-talk-to-figma-mcp","owner_avatar_url":"https://avatars.githubusercontent.com/u/17284363?v=4","primary_language":"JavaScript","stars":7029,"forks":775,"topics":["agent","agentic","agentic-ai","ai","ai-agents","automation","claude-code","codex","cursor","design","figma","generative-ai","llm","llms","mcp","model-context-protocol"],"archived":false,"github_pushed_at":"2026-07-26T07:14:26+00:00","maintenance_label":"Steady","stars_delta_30d":96,"url":"https://www.graphcanon.com/tools/grab-cursor-talk-to-figma-mcp","markdown_url":"https://www.graphcanon.com/tools/grab-cursor-talk-to-figma-mcp.md","api_url":"https://www.graphcanon.com/api/graphcanon/tools/grab-cursor-talk-to-figma-mcp","graph_url":"https://www.graphcanon.com/api/graphcanon/graph?tool=grab-cursor-talk-to-figma-mcp","description":"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.","homepage_url":"https://www.figma.com/community/plugin/1485687494525374295/cursor-talk-to-figma-mcp-plugin","license":"MIT","open_issues":90,"watchers":43,"ai_summary":"Provides integration services enabling AI-generated interactions with design files in Figma by leveraging the Model Context Protocol (MCP). Supports Cursor, Claude Code, and Codex as AI agents.","readme_excerpt":"# Talk to Figma MCP\n\nThis project implements a Model Context Protocol (MCP) integration between AI agent (Cursor, Claude Code) and Figma, allowing AI agent to communicate with Figma for reading designs and modifying them programmatically.\n\nhttps://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c\n\n## Project Structure\n\n- `src/talk_to_figma_mcp/` - TypeScript MCP server for Figma integration\n- `src/cursor_mcp_plugin/` - Figma plugin for communicating with Cursor\n- `src/socket.ts` - WebSocket server that facilitates communication between the MCP server and Figma plugin\n\n## How to use\n\n1. Install Bun if you haven't already:\n\n```bash\ncurl -fsSL https://bun.sh/install | bash\n```\n\n2. Run setup, this will also install MCP in your Cursor's active project\n\n```bash\nbun setup\n```\n\n3. Start the Websocket server\n\n```bash\nbun socket\n```\n\n4. **NEW** Install Figma plugin from [Figma community page](https://www.figma.com/community/plugin/1485687494525374295/cursor-talk-to-figma-mcp-plugin) or [install locally](#figma-plugin)\n\n## Quick Video Tutorial\n\n[Video Link](https://www.linkedin.com/posts/sonnylazuardi_just-wanted-to-share-my-latest-experiment-activity-7307821553654657024-yrh8)\n\n## Design Automation Example\n\n**Bulk text content replacement**\n\nThanks to [@dusskapark](https://github.com/dusskapark) for contributing the bulk text replacement feature. Here is the [demo video](https://www.youtube.com/watch?v=j05gGT3xfCs).\n\n**Instance Override Propagation**\nAnother contribution from [@dusskapark](https://github.com/dusskapark)\nPropagate component instance overrides from a source instance to multiple target instances with a single command. This feature dramatically reduces repetitive design work when working with component instances that need similar customizations. Check out our [demo video](https://youtu.be/uvuT8LByroI).\n\n## Manual Setup and Installation\n\n### MCP Server: Integration with Cursor\n\nAdd the server to your Cursor MCP configuration in `~/.cursor/mcp.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"TalkToFigma\": {\n      \"command\": \"bunx\",\n      \"args\": [\"cursor-talk-to-figma-mcp@latest\"]\n    }\n  }\n}\n```\n\n### WebSocket Server\n\nStart the WebSocket server:\n\n```bash\nbun socket\n```\n\n### Figma Plugin\n\n1. In Figma, go to Plugins > Development > New Plugin\n2. Choose \"Link existing plugin\"\n3. Select the `src/cursor_mcp_plugin/manifest.json` file\n4. The plugin should now be available in your Figma development plugins\n\n## Windows + WSL Guide\n\n1. Install bun via powershell\n\n```bash\npowershell -c \"irm bun.sh/install.ps1|iex\"\n```\n\n2. Uncomment the hostname `0.0.0.0` in `src/socket.ts`\n\n```typescript\n// uncomment this to allow connections in windows wsl\nhostname: \"0.0.0.0\",\n```\n\n3. Start the websocket\n\n```bash\nbun socket\n```\n\n## Usage\n\n1. Start the WebSocket server\n2. Install the MCP server in Cursor\n3. Open Figma and run the Cursor MCP Plugin\n4. Connect the plugin to the WebSocket server by joining a channel using `join_channel`\n5. Use Cursor to communicate with Figma using the MCP tools\n\n## Local Development Setup\n\nTo develop, update your mcp config to direct to your local directory.\n\n```json\n{\n  \"mcpServers\": {\n    \"TalkToFigma\": {\n      \"command\": \"bun\",\n      \"args\": [\"/path-to-repo/src/talk_to_figma_mcp/server.ts\"]\n    }\n  }\n}\n```\n\n## MCP Tools\n\nThe MCP server provides the following tools for interacting with Figma:\n\n### Document & Selection\n\n- `get_document_info` - Get information about the current Figma document\n- `get_selection` - Get information about the current selection\n- `read_my_design` - Get detailed node information about the current selection without parameters\n- `get_node_info` - Get detailed information about a specific node\n- `get_nodes_info` - Get detailed information about multiple nodes by providing an array of node IDs\n- `set_focus` - Set focus on a specific node by selecting it and scrolling viewport to it\n- `set_selections` - Set selection to multiple nodes and scroll viewport to show them\n\n### Annotations","github_created_at":"2025-03-16T16:45:37+00:00","created_at":"2026-07-11T11:49:58.193478+00:00","updated_at":"2026-09-20T06:39:45.494918+00:00","categories":[{"slug":"ai-agents","name":"AI Agents","url":"https://www.graphcanon.com/categories/ai-agents","markdown_url":"https://www.graphcanon.com/categories/ai-agents.md","api_url":"https://www.graphcanon.com/api/graphcanon/categories/ai-agents"},{"slug":"developer-tools","name":"Developer Tools","url":"https://www.graphcanon.com/categories/developer-tools","markdown_url":"https://www.graphcanon.com/categories/developer-tools.md","api_url":"https://www.graphcanon.com/api/graphcanon/categories/developer-tools"}],"tags":[{"slug":"agentic-ai","name":"agentic-ai"},{"slug":"ai-agents","name":"ai-agents"},{"slug":"automation","name":"automation"},{"slug":"claude-code","name":"claude-code"},{"slug":"codex","name":"codex"},{"slug":"cursor","name":"cursor"},{"slug":"figma","name":"figma"},{"slug":"model-context-protocol","name":"model-context-protocol"}],"trust":{"provenance":{"is_fork":false,"github_id":949523404,"owner_type":"Organization","methodology":"github_public_v1","parent_repo":null,"near_duplicate_slugs":[]},"computed_at":"2026-09-20T03:51:16.138Z","maintenance":{"label":"Steady","score":60,"methodology":"github_public_v1","releases_90d":0,"days_since_push":55,"last_release_at":null,"stars_delta_30d":96,"open_issues_delta_30d":4},"security_summary":{"status":"no_manifest","scanner":null,"low_count":0,"high_count":0,"last_scan_at":"2026-07-11T11:49:59.312Z","medium_count":0,"scan_profile":"mcp_manifest","critical_count":0}},"capability_facts":{"mcp":{"source":"package.json:@modelcontextprotocol/*","observed_at":"2026-09-20T03:51:17.187Z","server_manifest":true},"scan":{"source":"repo_scan","observed_at":"2026-09-20T03:51:17.187Z"},"deploy":{"source":"dockerfile:Dockerfile","self_host":true,"observed_at":"2026-09-20T03:51:17.187Z","managed_saas":false},"has_cli":{"value":true,"source":"package.json:bin|scripts","observed_at":"2026-09-20T03:51:17.187Z"},"languages":{"value":["javascript","typescript"],"source":"github.language+package.json","observed_at":"2026-09-20T03:51:17.187Z"},"has_docker":{"value":true,"source":"dockerfile:Dockerfile","observed_at":"2026-09-20T03:51:17.187Z"},"license_spdx":{"value":"MIT","source":"github.license","observed_at":"2026-09-20T03:51:17.187Z"}},"decision_facts":{"hosting":null,"pricing":null,"requirements":null,"constraints":null,"when_to_use":["- You require deep integration between Cursor, Claude Code, and Codex for modifying Figma designs programmatically","- Prefer working within an agentic AI framework that communicates directly with your design tools"],"when_not_to_use":["- Seeking a non-JavaScript solution, as this tool is specifically built in JavaScript","- In need of integration beyond Cursor, Claude Code, or Codex, since the tool supports interaction only with these specific AI agents"],"source":"enrich:decision_facts","observed_at":"2026-07-16T21:25:00.839Z"},"constraint_facets":null,"decision_summary":[{"label":"Adopt for","value":"cursor-talk-to-figma-mcp integrates AI agents with Figma through MCP for programmable design interaction in JavaScript under the MIT license."}]}}