Cursor Talk to Figma MCP Server

How to use

Start by setting up the MCP server in your Cursor environment, then run a local WebSocket channel to communicate with the Figma plugin. Once connected, you can issue commands to read document and node information, create and modify elements, manage text and annotations, apply styles, and export assets. Always join a channel before sending commands, and verify results with targeted node inquiries.

How to install

# Prerequisites: ensure Bun is installed
curl -fsSL https://bun.sh/install | bash

# Install the MCP server as part of the setup process
bun setup

# Start the WebSocket server for MCP-Figma communication
bun socket

# Run the MCP server for Cursor to talk to Figma
bunx cursor-talk-to-figma-mcp

# Install the Figma Plugin (manual steps follow in the Figma section)

Additional sections

Configuration and startup flow: you will configure the MCP server entry in Cursor to point to the local MCP process, then run both the WebSocket service and the MCP server. The typical flow is to start the WebSocket, then launch the MCP server, and finally enable the Figma plugin to join the channel and begin issuing commands.

Configuration details

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

```json
{
  "name": "talk_to_figma",
  "type": "stdio",
  "command": "bunx",
  "args": ["cursor-talk-to-figma-mcp@latest"]
}

Figma plugin setup

In Figma, go to Plugins > Development > New Plugin. Choose "Link existing plugin" and select the src/cursor_mcp_plugin/manifest.json file. The plugin will appear in your development plugins and can connect to the local WebSocket server to communicate with Cursor via MCP.

Security and best practices

- Always join a channel before sending commands to ensure your messages are scoped to the correct session. - Use get_document_info to establish a view of the current document before making changes. - Check the current selection with get_selection prior to modifications. - Prefer batch operations when updating multiple nodes to reduce round-trips. - Handle errors gracefully; all MCP commands can throw exceptions and should be wrapped in robust error handling.

Troubleshooting and notes

If you cannot connect from Figma, verify the WebSocket server is running (bun socket) and that you have joined the appropriate channel with join_channel from the plugin. For Windows Subsystem for Linux (WSL) users, uncomment the hostname in src/socket.ts to allow connections from Windows, then restart the WebSocket server.

Commands you can run with the MCP server

Use the MCP toolset to read, create, modify, and export Figma elements. Commands include reading document info, inspecting and modifying nodes, creating shapes and text, adjusting styles, and exporting assets. Connect your Cursor MCP client to the channel and issue commands to control Figma programmatically.

get_document_info

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

get_selection

Return details about the current user selection in the active document.

read_my_design

Fetch detailed information about the currently selected design elements.

get_node_info

Obtain comprehensive information about a specific node by ID.

get_nodes_info

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

get_annotations

Retrieve annotations for the current document or a specific node.

set_annotation

Create or update a markdown-supported annotation on a target node or document.

set_multiple_annotations

Batch create or update multiple annotations efficiently.

scan_nodes_by_types

Scan the document to find nodes of specified types (useful for finding annotation targets).

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 to handle 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_fill_color

Change the fill color of a node with RGBA values.

set_stroke_color

Modify the stroke color and width of a node.

set_corner_radius

Adjust 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 to new dimensions.

delete_node

Delete a node from the design.

delete_multiple_nodes

Delete multiple nodes efficiently in a single operation.

clone_node

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

get_styles

Fetch information about local styles.

get_local_components

Retrieve information about locally defined components.

get_team_components

Fetch information about components shared within the team.

create_component_instance

Create an instance of a component in the design.

export_node_as_image

Export a node as an image in PNG, JPG, SVG, or PDF formats.

execute_figma_code

Execute arbitrary JavaScript code within the Figma environment (use with caution).

join_channel

Join a specific channel to communicate with Figma.