[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-72636":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":41,"readmeContent":42,"aiSummary":43,"trendingCount":16,"starSnapshotCount":16,"syncStatus":44,"lastSyncTime":45,"discoverSource":46},72636,"cursor-talk-to-figma-mcp","grab\u002Fcursor-talk-to-figma-mcp","grab","TalkToFigma: MCP integration between AI Agent (Cursor, Claude Code) and Figma, allowing Agentic AI to communicate with Figma for reading designs and modifying them programmatically.","https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Fplugin\u002F1485687494525374295\u002Fcursor-talk-to-figma-mcp-plugin",null,"JavaScript",6826,743,42,70,0,9,24,81,27,102.71,"MIT License",false,"main",true,[27,28,29,30,31,32,33,34,35,36,37,38,39,40],"agent","agentic","agentic-ai","ai","ai-agents","automation","cursor","design","figma","generative-ai","llm","llms","mcp","model-context-protocol","2026-06-12 04:01:06","# 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:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F129a14d2-ed73-470f-9a4c-2240b2a4885c\n\n## Project Structure\n\n- `src\u002Ftalk_to_figma_mcp\u002F` - TypeScript MCP server for Figma integration\n- `src\u002Fcursor_mcp_plugin\u002F` - Figma plugin for communicating with Cursor\n- `src\u002Fsocket.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:\u002F\u002Fbun.sh\u002Finstall | 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:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Fplugin\u002F1485687494525374295\u002Fcursor-talk-to-figma-mcp-plugin) or [install locally](#figma-plugin)\n\n## Quick Video Tutorial\n\n[Video Link](https:\u002F\u002Fwww.linkedin.com\u002Fposts\u002Fsonnylazuardi_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:\u002F\u002Fgithub.com\u002Fdusskapark) for contributing the bulk text replacement feature. Here is the [demo video](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=j05gGT3xfCs).\n\n**Instance Override Propagation**\nAnother contribution from [@dusskapark](https:\u002F\u002Fgithub.com\u002Fdusskapark)\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:\u002F\u002Fyoutu.be\u002FuvuT8LByroI).\n\n## Manual Setup and Installation\n\n### MCP Server: Integration with Cursor\n\nAdd the server to your Cursor MCP configuration in `~\u002F.cursor\u002Fmcp.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\u002Fcursor_mcp_plugin\u002Fmanifest.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\u002Finstall.ps1|iex\"\n```\n\n2. Uncomment the hostname `0.0.0.0` in `src\u002Fsocket.ts`\n\n```typescript\n\u002F\u002F 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\": [\"\u002Fpath-to-repo\u002Fsrc\u002Ftalk_to_figma_mcp\u002Fserver.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\n\n- `get_annotations` - Get all annotations in the current document or specific node\n- `set_annotation` - Create or update an annotation with markdown support\n- `set_multiple_annotations` - Batch create\u002Fupdate multiple annotations efficiently\n- `scan_nodes_by_types` - Scan for nodes with specific types (useful for finding annotation targets)\n\n### Prototyping & Connections\n\n- `get_reactions` - Get all prototype reactions from nodes with visual highlight animation\n- `set_default_connector` - Set a copied FigJam connector as the default connector style for creating connections (must be set before creating connections)\n- `create_connections` - Create FigJam connector lines between nodes, based on prototype flows or custom mapping\n\n### Creating Elements\n\n- `create_rectangle` - Create a new rectangle with position, size, and optional name\n- `create_frame` - Create a new frame with position, size, and optional name\n- `create_text` - Create a new text node with customizable font properties\n\n### Modifying text content\n\n- `scan_text_nodes` - Scan text nodes with intelligent chunking for large designs\n- `set_text_content` - Set the text content of a single text node\n- `set_multiple_text_contents` - Batch update multiple text nodes efficiently\n\n### Auto Layout & Spacing\n\n- `set_layout_mode` - Set the layout mode and wrap behavior of a frame (NONE, HORIZONTAL, VERTICAL)\n- `set_padding` - Set padding values for an auto-layout frame (top, right, bottom, left)\n- `set_axis_align` - Set primary and counter axis alignment for auto-layout frames\n- `set_layout_sizing` - Set horizontal and vertical sizing modes for auto-layout frames (FIXED, HUG, FILL)\n- `set_item_spacing` - Set distance between children in an auto-layout frame\n\n### Styling\n\n- `set_fill_color` - Set the fill color of a node (RGBA)\n- `set_stroke_color` - Set the stroke color and weight of a node\n- `set_corner_radius` - Set the corner radius of a node with optional per-corner control\n\n### Layout & Organization\n\n- `move_node` - Move a node to a new position\n- `resize_node` - Resize a node with new dimensions\n- `delete_node` - Delete a node\n- `delete_multiple_nodes` - Delete multiple nodes at once efficiently\n- `clone_node` - Create a copy of an existing node with optional position offset\n\n### Components & Styles\n\n- `get_styles` - Get information about local styles\n- `get_local_components` - Get information about local components\n- `create_component_instance` - Create an instance of a component\n- `get_instance_overrides` - Extract override properties from a selected component instance\n- `set_instance_overrides` - Apply extracted overrides to target instances\n\n### Export & Advanced\n\n- `export_node_as_image` - Export a node as an image (PNG, JPG, SVG, or PDF) - limited support on image currently returning base64 as text\n\n### Connection Management\n\n- `join_channel` - Join a specific channel to communicate with Figma\n\n### MCP Prompts\n\nThe MCP server includes several helper prompts to guide you through complex design tasks:\n\n- `design_strategy` - Best practices for working with Figma designs\n- `read_design_strategy` - Best practices for reading Figma designs\n- `text_replacement_strategy` - Systematic approach for replacing text in Figma designs\n- `annotation_conversion_strategy` - Strategy for converting manual annotations to Figma's native annotations\n- `swap_overrides_instances` - Strategy for transferring overrides between component instances in Figma\n- `reaction_to_connector_strategy` - Strategy for converting Figma prototype reactions to connector lines using the output of 'get_reactions', and guiding the use 'create_connections' in sequence\n\n## Development\n\n### Building the Figma Plugin\n\n1. Navigate to the Figma plugin directory:\n\n   ```\n   cd src\u002Fcursor_mcp_plugin\n   ```\n\n2. Edit code.js and ui.html\n\n## Best Practices\n\nWhen working with the Figma MCP:\n\n1. Always join a channel before sending commands\n2. Get document overview using `get_document_info` first\n3. Check current selection with `get_selection` before modifications\n4. Use appropriate creation tools based on needs:\n   - `create_frame` for containers\n   - `create_rectangle` for basic shapes\n   - `create_text` for text elements\n5. Verify changes using `get_node_info`\n6. Use component instances when possible for consistency\n7. Handle errors appropriately as all commands can throw exceptions\n8. For large designs:\n   - Use chunking parameters in `scan_text_nodes`\n   - Monitor progress through WebSocket updates\n   - Implement appropriate error handling\n9. For text operations:\n   - Use batch operations when possible\n   - Consider structural relationships\n   - Verify changes with targeted exports\n10. For converting legacy annotations:\n    - Scan text nodes to identify numbered markers and descriptions\n    - Use `scan_nodes_by_types` to find UI elements that annotations refer to\n    - Match markers with their target elements using path, name, or proximity\n    - Categorize annotations appropriately with `get_annotations`\n    - Create native annotations with `set_multiple_annotations` in batches\n    - Verify all annotations are properly linked to their targets\n    - Delete legacy annotation nodes after successful conversion\n11. Visualize prototype noodles as FigJam connectors:\n\n- Use `get_reactions` to extract prototype flows,\n- set a default connector with `set_default_connector`,\n- and generate connector lines with `create_connections` for clear visual flow mapping.\n\n## License\n\nMIT\n","TalkToFigma 项目通过Model Context Protocol (MCP)实现了AI代理（如Cursor、Claude Code）与Figma之间的集成，使得AI能够读取设计文件并对它们进行程序化修改。该项目的核心功能包括使用TypeScript构建的MCP服务器来处理Figma集成，以及一个促进MCP服务器和Figma插件之间通信的WebSocket服务器。它特别适用于需要自动化设计流程的场景，例如批量文本替换或组件实例属性传播，极大地提高了设计师的工作效率。此外，此工具非常适合于希望通过AI辅助技术增强其工作流的UI\u002FUX设计师和开发团队。",2,"2026-06-11 03:42:54","high_star"]