Talk to Figma MCP server

The Cursor Talk to Figma MCP server provides integration between Cursor AI and Figma, enabling you to read and programmatically modify Figma designs directly from Cursor. This powerful connection makes it possible to interact with Figma designs through structured commands.

Installation

Prerequisites

First, install Bun if you haven't already:

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

Quick Setup

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

bun setup

Start the WebSocket server:

bun start

Manual Installation

If you prefer manual installation, follow these steps:

MCP Server Integration with Cursor

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

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bun",
      "args": [
        "/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"
      ]
    }
  }
}

WebSocket Server

Start the WebSocket server manually:

bun run src/socket.ts

Figma Plugin Setup

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 now appear in your Figma development plugins

Using the MCP

Basic Workflow

1. Start the WebSocket server
2. Ensure the MCP server is installed in Cursor
3. Open Figma and run the Cursor MCP Plugin
4. Connect the plugin to the WebSocket server by joining a channel using join_channel
5. Begin sending commands from Cursor to Figma

Available Tools

Connection Management

Before using any other tools, establish a connection:

join_channel - Connect to a specific channel to communicate with Figma

Document & Selection

Get information about the Figma document:

get_document_info - Retrieve information about the current document
get_selection - Get details about currently selected elements
get_node_info - Get detailed information about a specific node

Creating Elements

Create new design elements:

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

Styling

Apply styles to elements:

set_fill_color - Apply a fill color to a node (RGBA)
set_stroke_color - Set stroke color and weight
set_corner_radius - Adjust corner radius (supports per-corner settings)

Layout & Organization

Modify existing elements:

move_node - Reposition a node
resize_node - Change a node's dimensions
delete_node - Remove a node

Components & Styles

Work with Figma components:

get_styles - Retrieve information about local styles
get_local_components - List available local components
get_team_components - List team library components
create_component_instance - Create an instance of a component

Export & Advanced

Advanced operations:

export_node_as_image - Export a node as PNG, JPG, SVG, or PDF
execute_figma_code - Run arbitrary JavaScript code in Figma (use with caution)

Best Practices

For optimal results when working with the Figma MCP:

• Always join a channel before sending any commands
• Start by getting document information via get_document_info
• Check the current selection with get_selection before making modifications
• Choose appropriate creation tools based on your needs:
  • Use create_frame for containers
  • Use create_rectangle for basic shapes
  • Use create_text for text elements
• Verify changes using get_node_info after modifications
• Leverage component instances when possible for design consistency
• Handle errors appropriately as commands may throw exceptions

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.