This 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.
cursorfigmavideo.mp4
src/talk_to_figma_mcp/
- TypeScript MCP server for Figma integrationsrc/cursor_mcp_plugin/
- Figma plugin for communicating with Cursorsrc/socket.ts
- WebSocket server that facilitates communication between the MCP server and Figma plugin
- Install Bun if you haven't already:
curl -fsSL https://bun.sh/install | bash
- Run setup, this will also install MCP in your Cursor's active project
bun setup
- Start the Websocket server
bun socket
- MCP server
bunx cursor-talk-to-figma-mcp
- 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
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
Add the server to your Cursor MCP configuration in ~/.cursor/mcp.json
:
{
"mcpServers": {
"TalkToFigma": {
"command": "bunx",
"args": ["cursor-talk-to-figma-mcp@latest"]
}
}
}
Start the WebSocket server:
bun socket
- In Figma, go to Plugins > Development > New Plugin
- Choose "Link existing plugin"
- Select the
src/cursor_mcp_plugin/manifest.json
file - The plugin should now be available in your Figma development plugins
- Install bun via powershell
powershell -c "irm bun.sh/install.ps1|iex"
- Uncomment the hostname
0.0.0.0
insrc/socket.ts
// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",
- Start the websocket
bun socket
- Start the WebSocket server
- Install the MCP server in Cursor
- Open Figma and run the Cursor MCP Plugin
- Connect the plugin to the WebSocket server by joining a channel using
join_channel
- 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 IDs
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
-
Navigate to the Figma plugin directory:
cd src/cursor_mcp_plugin
-
Edit code.js and ui.html
When working with the Figma MCP:
- Always join a channel before sending commands
- Get document overview using
get_document_info
first - Check current selection with
get_selection
before modifications - Use appropriate creation tools based on needs:
create_frame
for containerscreate_rectangle
for basic shapescreate_text
for text elements
- Verify changes using
get_node_info
- Use component instances when possible for consistency
- Handle errors appropriately as all commands can throw exceptions
- For large designs:
- Use chunking parameters in
scan_text_nodes
- Monitor progress through WebSocket updates
- Implement appropriate error handling
- Use chunking parameters in
- For text operations:
- Use batch operations when possible
- Consider structural relationships
- Verify changes with targeted exports
- For converting legacy annotations:
- Scan text nodes to identify numbered markers and descriptions
- Use
scan_nodes_by_types
to find UI elements that annotations refer to - Match markers with their target elements using path, name, or proximity
- Categorize annotations appropriately with
get_annotations
- Create native annotations with
set_multiple_annotations
in batches - Verify all annotations are properly linked to their targets
- Delete legacy annotation nodes after successful conversion
- Visualize prototype noodles as FigJam connectors:
- Use
get_reactions
to extract prototype flows, - set a default connector with
set_default_connector
, - and generate connector lines with
create_connections
for clear visual flow mapping.
MIT