Talk to Figma MCP server

This MCP server implements integration between Cursor AI and Figma, allowing you to read designs and modify them programmatically through the Model Context Protocol. It creates a communication channel between Cursor and Figma for automating design tasks.

Installation

Prerequisites

You need to have Bun installed. If you don't have it yet:

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

For Windows users with WSL:

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

Quick Setup

Run the setup script to install the MCP in your Cursor's active project:

bun setup

Manual Setup

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"]
    }
  }
}

Figma Plugin Installation

1. In Figma, navigate to Plugins > Development > New Plugin
2. Choose "Link existing plugin"
3. Select the src/cursor_mcp_plugin/manifest.json file
4. The plugin will appear in your Figma development plugins list

Setting Up the Connection

Start the WebSocket Server

bun socket

For Windows WSL users, uncomment the hostname in src/socket.ts first:

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

Start the MCP Server

bunx cursor-talk-to-figma-mcp

Using the MCP Tools

After setting up the connection, you can use the following tools to interact with Figma through Cursor:

Connection Management

First, establish a connection using:

join_channel

Document & Selection Tools

Read your current design:

get_document_info
get_selection
read_my_design

Get detailed node information:

get_node_info
get_nodes_info

Creating Elements

Create design elements programmatically:

create_rectangle
create_frame
create_text

Text Modification

Scan and update text content:

scan_text_nodes
set_text_content
set_multiple_text_contents

Annotation Tools

Work with Figma annotations:

get_annotations
set_annotation
set_multiple_annotations
scan_nodes_by_types

Styling Tools

Apply styling to elements:

set_fill_color
set_stroke_color
set_corner_radius

Layout & Organization

Manipulate elements:

move_node
resize_node
delete_node
delete_multiple_nodes
clone_node

Components & Styles

Work with components and styles:

get_styles
get_local_components
create_component_instance

Export Functionality

Export nodes as images:

export_node_as_image

Best Practices

When working with this MCP server:

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 the appropriate creation tools based on your needs
5. Verify changes using get_node_info
6. Use component instances when possible for consistency
7. For large designs:
   • Use chunking parameters in scan_text_nodes
   • Monitor progress through WebSocket updates
8. For text operations:
   • Use batch operations when possible
   • Consider structural relationships

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.