{"id":"7b3c4303-9e0e-4ef6-94b8-6044f273a7a8","slug":"cursor-talktofigma","kind":"mcp","name":"Cursor-TalkToFigma","summary":"","owner":"toptalentcoder","repoUrl":"https://github.com/toptalentcoder/Cursor-TalkToFigma","license":"MIT","licenseTier":"permissive","trust":"community","stars":8,"match":null,"fewStars":false,"format":"mcp","createdAt":"2025-05-26T00:04:07.000Z","addedAt":"2026-10-21T15:15:56.092Z","logoUrl":"https://avatars.githubusercontent.com/u/51119902?u=682552b9234e2f9c2ca4375768acb52aee440ef8&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["utilities"],"tags":[],"runtime":"node","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-28T00:45:18.098Z","sample":false,"url":"https://conduits.dev/tools/cursor-talktofigma","language":"JavaScript","transports":["stdio"],"install":{"npm":"cursor-talk-to-figma-mcp"},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# Cursor Talk to Figma MCP\n\nThis project implements a Model Context Protocol (MCP) integration between Cursor AI and Figma, allowing Cursor 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## Get Started\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. MCP server\n\n```bash\nbunx cursor-talk-to-figma-mcp\n```\n\n5. **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## 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\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/update 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/cursor_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"}