Repository files navigation

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.

• 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:

curl -fsSL https://bun.sh/install| bash

2. Clone this repository and run the setup command to install MCP into your project.

# assuming you've already cloned the repositorycd cursor-talk-to-figma-mcpbun setup

3. Start the Websocket server

bun socket

4. MCP server

bunx cursor-talk-to-figma-mcp

5. InstallFigma Plugin

Video Link

Bulk text content replacement

Thanks to@dusskapark for contributing the bulk text replacement feature. Here is thedemo video.

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

1. In Figma, go to Plugins > Development > New Plugin
2. Choose "Link existing plugin"
3. Select thesrc/cursor_mcp_plugin/manifest.json file
4. The plugin should now be available in your Figma development plugins

1. Install bun via powershell

powershell -c"irm bun.sh/install.ps1|iex"

2. Uncomment the hostname0.0.0.0 insrc/socket.ts

// uncomment this to allow connections in windows wslhostname:"0.0.0.0",

3. Start the websocket

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 usingjoin_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 document
• get_selection - Get information about the current selection
• read_my_design - Get detailed node information about the current selection without parameters
• get_node_info - Get detailed information about a specific node
• get_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 node
• set_annotation - Create or update an annotation with markdown support
• set_multiple_annotations - Batch create/update multiple annotations efficiently
• scan_nodes_by_types - Scan for nodes with specific types (useful for finding annotation targets)

• create_rectangle - Create a new rectangle with position, size, and optional name
• create_frame - Create a new frame with position, size, and optional name
• create_text - Create a new text node with customizable font properties

• scan_text_nodes - Scan text nodes with intelligent chunking for large designs
• set_text_content - Set the text content of a single text node
• set_multiple_text_contents - Batch update multiple text nodes efficiently

• set_fill_color - Set the fill color of a node (RGBA)
• set_stroke_color - Set the stroke color and weight of a node
• set_corner_radius - Set the corner radius of a node with optional per-corner control

• move_node - Move a node to a new position
• resize_node - Resize a node with new dimensions
• delete_node - Delete a node
• delete_multiple_nodes - Delete multiple nodes at once efficiently
• clone_node - Create a copy of an existing node with optional position offset

• get_styles - Get information about local styles
• get_local_components - Get information about local components
• create_component_instance - Create an instance of a component

• 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

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 usingget_document_info first
3. Check current selection withget_selection before modifications
4. Use appropriate creation tools based on needs:
   • create_frame for containers
   • create_rectangle for basic shapes
   • create_text for text elements
5. Verify changes usingget_node_info
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 inscan_text_nodes
   • 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
    • Usescan_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 withget_annotations
    • Create native annotations withset_multiple_annotations in batches
    • Verify all annotations are properly linked to their targets
    • Delete legacy annotation nodes after successful conversion

MIT