Cursor Talk to Figma MCP
npm install cursor-talk-to-figma-mcpThis 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.
https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c
- src/talk_to_figma_mcp/ - TypeScript MCP server for Figma integration
- src/cursor_mcp_plugin/ - Figma plugin for communicating with Cursor
- src/socket.ts - WebSocket server that facilitates communication between the MCP server and Figma plugin
1. Install Bun if you haven't already:
``bash`
curl -fsSL https://bun.sh/install | bash
2. Run setup, this will also install MCP in your Cursor's active project
`bash`
bun setup
3. Start the Websocket server
`bash`
bun socket
4. NEW Install Figma plugin from Figma community page or install locally
Bulk text content replacement
Thanks to @dusskapark for contributing the bulk text replacement feature. Here is the demo video.
Instance Override Propagation
Another contribution from @dusskapark
Propagate 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.
To develop, update your mcp config to direct to your local directory.
`json`
{
"mcpServers": {
"TalkToFigma": {
"command": "bun",
"args": ["/path-to-repo/src/talk_to_figma_mcp/server.ts"]
}
}
}
Add the server to your Cursor MCP configuration in ~/.cursor/mcp.json:
`json`
{
"mcpServers": {
"TalkToFigma": {
"command": "bunx",
"args": ["cursor-talk-to-figma-mcp@latest"]
}
}
}
Start the WebSocket server:
`bash`
bun socket
1. In Figma, go to Plugins > Development > New Plugin
2. Choose "Link existing plugin"
3. Select the src/cursor_mcp_plugin/manifest.json file
4. The plugin should now be available in your Figma development plugins
1. Install bun via powershell
`bash`
powershell -c "irm bun.sh/install.ps1|iex"
2. Uncomment the hostname 0.0.0.0 in src/socket.ts
`typescript`
// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",
3. Start the websocket
`bash`
bun socket
1. Start the WebSocket server
2. Install the MCP server in Cursor
3. Open Figma and run the Cursor MCP Plugin
4. Connect the plugin to the WebSocket server by joining a channel using join_channel
5. Use Cursor to communicate with Figma using the MCP tools
The MCP server provides the following tools for interacting with Figma:
- get_document_info - Get information about the current Figma documentget_selection
- - Get information about the current selectionread_my_design
- - Get detailed node information about the current selection without parametersget_node_info
- - Get detailed information about a specific nodeget_nodes_info
- - Get detailed information about multiple nodes by providing an array of node IDsset_focus
- - Set focus on a specific node by selecting it and scrolling viewport to itset_selections
- - Set selection to multiple nodes and scroll viewport to show them
- get_annotations - Get all annotations in the current document or specific nodeset_annotation
- - Create or update an annotation with markdown supportset_multiple_annotations
- - Batch create/update multiple annotations efficientlyscan_nodes_by_types
- - Scan for nodes with specific types (useful for finding annotation targets)
- get_reactions - Get all prototype reactions from nodes with visual highlight animationset_default_connector
- - Set a copied FigJam connector as the default connector style for creating connections (must be set before creating connections)create_connections
- - Create FigJam connector lines between nodes, based on prototype flows or custom mapping
- create_rectangle - Create a new rectangle with position, size, and optional namecreate_frame
- - Create a new frame with position, size, and optional namecreate_text
- - Create a new text node with customizable font properties
- scan_text_nodes - Scan text nodes with intelligent chunking for large designsset_text_content
- - Set the text content of a single text nodeset_multiple_text_contents
- - Batch update multiple text nodes efficiently
- set_layout_mode - Set the layout mode and wrap behavior of a frame (NONE, HORIZONTAL, VERTICAL)set_padding
- - Set padding values for an auto-layout frame (top, right, bottom, left)set_axis_align
- - Set primary and counter axis alignment for auto-layout framesset_layout_sizing
- - Set horizontal and vertical sizing modes for auto-layout frames (FIXED, HUG, FILL)set_item_spacing
- - Set distance between children in an auto-layout frame
- set_fill_color - Set the fill color of a node (RGBA)set_stroke_color
- - Set the stroke color and weight of a nodeset_corner_radius
- - Set the corner radius of a node with optional per-corner control
- move_node - Move a node to a new positionresize_node
- - Resize a node with new dimensionsdelete_node
- - Delete a nodedelete_multiple_nodes
- - Delete multiple nodes at once efficientlyclone_node
- - Create a copy of an existing node with optional position offset
- get_styles - Get information about local stylesget_local_components
- - Get information about local componentscreate_component_instance
- - Create an instance of a componentget_instance_overrides
- - Extract override properties from a selected component instanceset_instance_overrides
- - Apply extracted overrides to target instances
- export_node_as_image - Export a node as an image (PNG, JPG, SVG, or PDF) - limited support on image currently returning base64 as text
- join_channel - Join a specific channel to communicate with Figma
The MCP server includes several helper prompts to guide you through complex design tasks:
- design_strategy - Best practices for working with Figma designsread_design_strategy
- - Best practices for reading Figma designstext_replacement_strategy
- - Systematic approach for replacing text in Figma designsannotation_conversion_strategy
- - Strategy for converting manual annotations to Figma's native annotationsswap_overrides_instances
- - Strategy for transferring overrides between component instances in Figmareaction_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
1. Navigate to the Figma plugin directory:
``
cd src/cursor_mcp_plugin
2. Edit code.js and ui.html
When working with the Figma MCP:
1. Always join a channel before sending commands
2. Get document overview using get_document_info firstget_selection
3. Check current selection with before modificationscreate_frame
4. Use appropriate creation tools based on needs:
- for containerscreate_rectangle
- for basic shapescreate_text
- for text elementsget_node_info
5. Verify changes using scan_text_nodes
6. Use component instances when possible for consistency
7. Handle errors appropriately as all commands can throw exceptions
8. For large designs:
- Use chunking parameters in scan_nodes_by_types
- Monitor progress through WebSocket updates
- Implement appropriate error handling
9. For text operations:
- Use batch operations when possible
- Consider structural relationships
- Verify changes with targeted exports
10. For converting legacy annotations:
- Scan text nodes to identify numbered markers and descriptions
- Use to find UI elements that annotations refer toget_annotations
- Match markers with their target elements using path, name, or proximity
- Categorize annotations appropriately with set_multiple_annotations
- Create native annotations with in batches
- Verify all annotations are properly linked to their targets
- Delete legacy annotation nodes after successful conversion
11. Visualize prototype noodles as FigJam connectors:
- Use get_reactions to extract prototype flows,set_default_connector
- set a default connector with ,create_connections` for clear visual flow mapping.
- and generate connector lines with
MIT