Cursor Talk to Figma MCP
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.
https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c
Project Structure
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
Get Started
- 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
Quick Video Tutorial
Design Automation Example
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.
Manual Setup and Installation
MCP Server: Integration with Cursor
Add the server to your Cursor MCP configuration in ~/.cursor/mcp.json:
{
"mcpServers": {
"TalkToFigma": {
"command": "bunx",
"args": ["cursor-talk-to-figma-mcp@latest"]
}
}
}
WebSocket Server
Start the WebSocket server:
bun socket
Figma Plugin
- In Figma, go to Plugins > Development > New Plugin
- Choose "Link existing plugin"
- Select the
src/cursor_mcp_plugin/manifest.jsonfile - The plugin should now be available in your Figma development plugins
Windows + WSL Guide
- Install bun via powershell
powershell -c "irm bun.sh/install.ps1|iex"
- Uncomment the hostname
0.0.0.0insrc/socket.ts
// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",
- Start the websocket
bun socket
Usage
- 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
MCP Tools
The MCP server provides the following tools for interacting with Figma:
Document & Selection
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
Annotations
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)
Prototyping & Connections
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
Creating Elements
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
Modifying text content
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
Auto Layout & Spacing
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
Styling
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
Layout & Organization
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
Components & Styles
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 & Advanced
export_node_as_image- Export a node as an image (PNG, JPG, SVG, or PDF) - limited support on image currently returning base64 as text
Connection Management
join_channel- Join a specific channel to communicate with Figma
MCP Prompts
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
Development
Building the Figma Plugin
-
Navigate to the Figma plugin directory:
cd src/cursor_mcp_plugin -
Edit code.js and ui.html
Best Practices
When working with the Figma MCP:
- Always join a channel before sending commands
- Get document overview using
get_document_infofirst - Check current selection with
get_selectionbefore modifications - Use appropriate creation tools based on needs:
create_framefor containerscreate_rectanglefor basic shapescreate_textfor 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_typesto 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_annotationsin 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_reactionsto extract prototype flows, - set a default connector with
set_default_connector, - and generate connector lines with
create_connectionsfor clear visual flow mapping.
License
MIT