Home / MCP / Cursor Talk to Figma MCP Server

Cursor Talk to Figma MCP Server

Provides read/write access to Figma documents via Cursor MCP tools for reading, creating, updating, and annotating designs.

typescript
Installation
Add the following to your MCP client configuration file.

Configuration

View docs
{
    "mcpServers": {
        "talk_to_figma": {
            "command": "bun",
            "args": [
                "/path-to-repo/src/talk_to_figma_mcp/server.ts"
            ]
        }
    }
}

You enable Cursor to talk to Figma through a dedicated MCP server. This integration lets you read designs, inspect and modify nodes, and automate workflows inside Figma using Cursor’s commands and MCP tools.

How to use

Join a channel from your Figma MCP Plugin, then send commands from Cursor to perform design tasks. Use the MCP tools to read document details, query selections, create and move elements, adjust styles, manage annotations, and build prototyped connections. Start by opening a Figma project, running the Cursor MCP Plugin, and connecting to the WebSocket server. After you are connected, you can: read document info, inspect the current selection, create shapes and text, update text content, apply layout and spacing changes, style nodes, manage components and overrides, export images, and visualize prototype flows as FigJam connectors.

Best practices include joining a channel before sending commands, getting an overview with get_document_info, verifying your current selection with get_selection, and using batch operations for large changes. Always verify outcomes with get_node_info or export previews to ensure your changes reflect your intent.

How to install

Prerequisites: You need a runtime that can execute MCP server code (Bun is shown here). Ensure Bun is installed on your system.

# Install Bun if you haven't already
curl -fsSL https://bun.sh/install | bash

# Run setup to install MCP in your(Cursor/your active) project
bun setup

# Start the WebSocket server to enable communication with Figma plugin
bun socket

Development and local testing require you to run the TalkToFigma MCP server directly from your local directory. Use the following configuration to point Cursor to your local server implementation.

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

If you prefer to run the MCP server via the Cursor package cache, you can install and run the published package that exposes the MCP server entry point.

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

WebSocket server is started with the following command if you are running locally on Windows Subsystem for Linux or a similar environment.

bun socket

Additional setup and plugins

Install the Figma plugin to enable communication with Cursor. In Figma, go to Plugins → Development → New Plugin, choose "Link existing plugin", and select the manifest located at src/cursor_mcp_plugin/manifest.json. This makes the Cursor MCP plugin available within your Figma development environment.

Notes for Windows + WSL

Install Bun via PowerShell, then uncomment the hostname in the WebSocket server file if you need to allow connections from Windows with WSL.

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

Start the websocket server with:

bun socket

Usage flow

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. 5) Use Cursor to issue MCP tool commands to read, modify, and extend your Figma designs.

MCP Tools

The MCP server provides a comprehensive set of tools to interact with Figma. They cover reading document and node information, creating and editing elements, annotations, prototyping connections, layout and styling, component management, export, and channel communication.

Available tools

get_document_info

Retrieve information about the current Figma document, including metadata, pages, and structure.

get_selection

Obtain details about the current selection in the active document.

read_my_design

Fetch detailed information for the current selection without extra parameters.

get_node_info

Get in-depth information about a specific node by ID.

get_nodes_info

Retrieve detailed information for multiple nodes by supplying an array of node IDs.

set_focus

Focus and scroll to a specific node in the viewport.

set_selections

Select multiple nodes and adjust the viewport to show them.

get_annotations

Read all annotations in the document or on a specific node.

set_annotation

Create or update a single annotation with support for markdown.

set_multiple_annotations

Batch create or update several annotations efficiently.

scan_nodes_by_types

Scan the document for nodes of specific types to locate targets for actions.

get_reactions

Extract prototype reactions from nodes and visualize them.

set_default_connector

Set the default FigJam connector style for creating visual connections.

create_connections

Create FigJam connector lines between nodes based on prototype flows or custom mappings.

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 configurable 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 (NONE, HORIZONTAL, VERTICAL) for a frame.

set_padding

Set padding for an auto-layout frame.

set_axis_align

Configure alignment for primary and counter axes in auto-layout.

set_layout_sizing

Define horizontal and vertical sizing modes for auto-layout frames.

set_item_spacing

Set the spacing between children inside an auto-layout frame.

set_fill_color

Apply fill color to a node with RGBA values.

set_stroke_color

Apply stroke color and weight to a node.

set_corner_radius

Set corner radius for 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 single node.

delete_multiple_nodes

Delete multiple nodes at once.

clone_node

Create a copy of an existing node with optional position offset.

get_styles

Retrieve 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 overrides 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/PDF); returns base64 as text in some cases.

join_channel

Join a specific channel to communicate with Figma.