This project implements a Model Context Protocol (MCP) integration with Figma, allowing AI assistants (like Claude, Cursor, or any MCP-compatible client) to communicate with Figma for reading designs and modifying them programmatically.

• src/talk_to_figma_mcp/ - TypeScript MCP server for Figma integration
• src/figma_mcp_plugin/ - Figma plugin for communicating with MCP clients
• src/socket.ts - WebSocket server that facilitates communication between the MCP server and Figma plugin

No installation needed! Just configure your AI assistant:

Add to ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%/Claude/claude_desktop_config.json (Windows):

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "talk-to-figma-mcp@latest"]
    }
  }
}

Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "talk-to-figma-mcp@latest"]
    }
  }
}

Option 1: Figma Community (Easiest) Install from Figma Community

Option 2: From npm package The Figma plugin files are included in the npm package. After installing:

npm install -g talk-to-figma-mcp

Find the plugin at:

• macOS/Linux: ~/.nvm/versions/node/vX.X.X/lib/node_modules/talk-to-figma-mcp/src/figma_mcp_plugin/
• Windows: %APPDATA%\npm\node_modules\talk-to-figma-mcp\src\figma_mcp_plugin\

Then in Figma: Plugins → Development → Import plugin from manifest → Select manifest.json

Option 3: Local development - See Local Development

Start the server to enable communication:

npx talk-to-figma-socket

Or install globally:

npm install -g talk-to-figma-mcp
talk-to-figma-socket

That's it! Now open the Figma plugin, connect to localhost:3055, and start using AI with Figma.

For production use or web-based Figma, you can deploy the WebSocket server remotely:

1. Build the Docker image:

docker build -t talk-to-figma-mcp .

2. Run with custom port (optional):

docker run -p 3055:3055 -e FIGMA_PORT=3055 talk-to-figma-mcp

1. Deploy to your server (VPS, cloud instance, etc.)
2. Set environment variable:

export FIGMA_PORT=3055  # or your preferred port

3. Start the WebSocket server:

bun socket

4. Configure SSL/TLS with a reverse proxy (nginx, Caddy, etc.) for wss:// support

1. Open the Figma plugin
2. Enter your server URL: wss://your-domain.com (or ws://localhost for local)
3. Enter your port: 3055 (or your custom port)
4. Click Connect

Note: For web-based Figma, you must use wss:// (secure WebSocket) with a valid SSL certificate.

Video Link

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.

For contributors or if you want to modify the source code:

1. Clone the repository:

git clone https://github.com/grab/cursor-talk-to-figma-mcp.git
cd cursor-talk-to-figma-mcp

2. Install dependencies:

bun install  # or npm install

3. Build the project:

bun run build

4. Start the WebSocket server:

bun socket

5. Link the Figma plugin locally:

   • In Figma: Plugins → Development → Import plugin from manifest
   • Select src/figma_mcp_plugin/manifest.json

6. Configure your MCP client to use local version:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/cursor-talk-to-figma-mcp/dist/server.js"]
    }
  }
}

This server works with any MCP-compatible client. Here are examples for popular clients:

Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["talk-to-figma-mcp@latest"]
    }
  }
}

Add to your Cursor MCP configuration (~/.cursor/mcp.json):

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["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 the src/figma_mcp_plugin/manifest.json file
4. The plugin should now be available in your Figma development plugins

• FIGMA_PORT or WS_PORT - WebSocket server port (default: 3055)
• --server - Server URL for MCP client (e.g., --server=your-domain.com)
• --port - Override port from command line

1. Start the WebSocket server (bun socket)
2. Configure the MCP server in your AI assistant client
3. Open Figma and run the MCP plugin
4. In the plugin, enter your server URL and port, then click Connect
5. The plugin automatically joins a channel - share the channel name with your AI assistant
6. Use your AI assistant 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
• set_focus - Set focus on a specific node by selecting it and scrolling viewport to it
• set_selections - Set selection to multiple nodes and scroll viewport to show them

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

• get_reactions - Get all prototype reactions from nodes with visual highlight animation
• set_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 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_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 frames
• set_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 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
• get_instance_overrides - Extract override properties from a selected component instance
• set_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 designs
• read_design_strategy - Best practices for reading Figma designs
• text_replacement_strategy - Systematic approach for replacing text in Figma designs
• annotation_conversion_strategy - Strategy for converting manual annotations to Figma's native annotations
• swap_overrides_instances - Strategy for transferring overrides between component instances in Figma
• 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

1. Navigate to the Figma plugin directory:

   cd src/figma_mcp_plugin
   

2. Edit code.js and ui.html as needed

When working with the Figma MCP:

1. Always join a channel before sending commands
2. Get document overview using get_document_info first
3. Check current selection with get_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 using get_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 in scan_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
    • 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
11. 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