Talk to Figma MCP server for AI agents

This MCP server creates a bridge between Cursor AI and Figma, allowing you to read and modify Figma designs programmatically. It uses the Model Context Protocol (MCP) to establish communication between Cursor and Figma's plugin system.

Installation

Prerequisites

You'll need to install Bun before setting up the MCP server:

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

Automated Setup

The quickest way to get started is using the automated setup:

bun setup

This will install the MCP in your Cursor's active project.

Manual Setup

1. Configure Cursor MCP

Add the server to your Cursor MCP configuration in ~/.cursor/mcp.json:

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

2. Install Figma Plugin

Install the plugin from the Figma community page or manually:

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

Windows + WSL Setup

If you're using Windows with WSL:

Install Bun via PowerShell:

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

Uncomment the hostname 0.0.0.0 in src/socket.ts:

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

Usage

Starting the Services

Start the WebSocket server:
```
bun socket
```
Start the MCP server:
```
bunx cursor-talk-to-figma-mcp
```
Open Figma and run the Cursor MCP Plugin
Connect the plugin to the WebSocket server by joining a channel:
```
join_channel
```

Available MCP Tools

Document & Selection

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
get_node_info - Get detailed information about a specific node
get_nodes_info - Get detailed information about multiple nodes by ID

Annotations

get_annotations - Get all annotations in the document or node
set_annotation - Create or update an annotation with markdown
set_multiple_annotations - Batch create/update annotations
scan_nodes_by_types - Find nodes of specific types

Prototyping & Connections

get_reactions - Get prototype reactions with visual highlights
set_default_connector - Set default connector style
create_connections - Create FigJam connector lines between nodes

Creating Elements

create_rectangle - Create a new rectangle
create_frame - Create a new frame
create_text - Create a new text node

Modifying Text Content

scan_text_nodes - Scan text nodes with chunking for large designs
set_text_content - Update a single text node
set_multiple_text_contents - Batch update multiple text nodes

Auto Layout & Spacing

set_layout_mode - Set layout mode (NONE, HORIZONTAL, VERTICAL)
set_padding - Set padding for auto-layout frames
set_axis_align - Set primary and counter axis alignment
set_layout_sizing - Set sizing modes (FIXED, HUG, FILL)
set_item_spacing - Set spacing between children in auto-layout

Styling

set_fill_color - Set fill color (RGBA)
set_stroke_color - Set stroke color and weight
set_corner_radius - Set corner radius with per-corner control

Layout & Organization

move_node - Move a node to a new position
resize_node - Resize a node
delete_node - Delete a node
delete_multiple_nodes - Delete multiple nodes efficiently
clone_node - Create a copy of an existing node

Components & Styles

get_styles - Get information about local styles
get_local_components - Get information about local components
create_component_instance - Create a component instance
get_instance_overrides - Extract component instance overrides
set_instance_overrides - Apply extracted overrides to instances

Export & Advanced

export_node_as_image - Export a node as an image (PNG, JPG, SVG, PDF)

Special Features

Bulk Text Replacement

You can replace text content across multiple nodes at once using the set_multiple_text_contents command. This is useful for updating content throughout a design.

Instance Override Propagation

The MCP server allows you to propagate component instance overrides from a source instance to multiple target instances with a single command. This significantly reduces repetitive work when customizing multiple component instances.

MCP Prompts

The server includes helpful prompts for common 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
annotation_conversion_strategy - Strategy for converting annotations
swap_overrides_instances - Strategy for transferring component overrides
reaction_to_connector_strategy - Strategy for converting prototype reactions to connectors

Best Practices

When working with the Figma MCP:

Always join a channel before sending commands
Get a document overview using get_document_info first
Check current selection with get_selection before making modifications
Use appropriate creation tools based on needs
Verify changes using get_node_info
Use component instances when possible for consistency
For large designs, use chunking parameters in scan_text_nodes
Use batch operations when possible for text and annotation updates
For converting prototype flows to visual connectors, use get_reactions followed by create_connections

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.