Cursor Talk to Figma

You can connect Cursor to Figma through a dedicated MCP (Model Context Protocol) server that lets Cursor read designs, inspect and modify Figma nodes, and apply automated design tasks. This MCP server streamlines cross‑app workflows by exposing a rich set of commands that you can trigger from Cursor to control Figma programmatically.

How to use

Start the WebSocket server to enable real‑time communication between Cursor and the Figma MCP server. Then install the MCP server in Cursor and run the Figma MCP Plugin from within Figma. Open Figma, join the channel you created, and begin issuing commands to read, inspect, or modify your design. You can perform tasks like reading document info, updating text, creating shapes, adjusting layout, and applying prototype connections, all through Cursor.

How to install

Prerequisites: ensure you have Bun installed on your system. Bun runs the MCP server, the WebSocket server, and related tooling.

Install Bun if you haven’t already.

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

Run the setup to install the MCP client into your Cursor workspace.

bun setup

Start the WebSocket server to enable channel communication with the Figma plugin.

bun socket

Start the MCP server that exposes the Cursor–Figma integration.

bunx cursor-talk-to-figma-mcp

Install the Figma plugin and connect it to the WebSocket channel you opened earlier. You can install the plugin from the Figma development workflow or set it up locally using the plugin manifest.

Windows + WSL users: you can enable Windows Subsystem for Linux networking by exposing the host to 0.0.0.0 and then starting the WebSocket server with Bun.

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

Then uncomment the hostname in src/socket.ts when using WSL, and start the websocket with:

bun socket

Configuration and setup notes

The MCP server for Cursor and Figma is designed to be added to Cursor’s MCP configuration and run alongside a local WebSocket server. Use the following configuration entry to register the TalkToFigma MCP server in Cursor.

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

MCP Tools

The MCP server exposes a broad set of tools to interact with Figma documents, selections, annotations, prototypes, elements, styles, and exports. You can read information, create or update elements, adjust layout and styling, manage overrides, and export assets.

Usage tips

Always join the correct channel before sending commands. Start with a document overview using get_document_info, then check the current selection with get_selection before making changes. Use the create_* tools to add elements, and verify changes with get_node_info. Prefer batch operations when updating multiple items. For large designs, use scan_text_nodes with chunking, monitor progress, and handle errors gracefully.

Development

If you are developing or extending the Figma MCP plugin, navigate to the plugin directory and adjust the code and UI as needed to support new MCP commands.

Best practices

1. Always join a channel before sending commands. 2) Get a document overview first. 3) Verify the current selection before making edits. 4) Use appropriate creation tools for your elements. 5) Confirm changes with targeted exports. 6) Leverage component instances for consistency. 7) Implement robust error handling. 8) For large designs, chunk text reads and track progress via WebSocket updates. 9) Use batch updates for text changes. 10) When converting legacy annotations, map markers to targets and recreate native annotations in batches.

Prototyping & connections

To visualize prototype flows, extract reactions with get_reactions, set a default connector with set_default_connector, and create connections with create_connections to map flows to connectors in FigJam.

Export & assets

You can export a node as an image using export_node_as_image, with support for PNG, JPG, SVG, or PDF. Current support may return base64 encoded images as text.

Available tools

get_document_info

Retrieve high‑level information about the active Figma document, including its name, ID, and version.

get_selection

Return details about the currently selected nodes in the active document.

read_my_design

Fetch detailed node information about the current selection without additional parameters.

get_node_info

Get comprehensive details about a single node by its ID.

get_nodes_info

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

get_annotations

Obtain annotations present in the document or for a specific node.

set_annotation

Create or update a single annotation with markdown support.

set_multiple_annotations

Batch create or update multiple annotations efficiently.

scan_nodes_by_types

Search the document for nodes of specific types (useful for locating annotation targets).

get_reactions

Extract prototype reactions and their visual indicators from nodes.

set_default_connector

Define the default connector style for creating FigJam connections.

create_connections

Generate FigJam connector lines between nodes based on prototype flows or 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 customizable font properties.

scan_text_nodes

Analyze 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

Define layout mode and wrap behavior for an auto-layout frame.

set_padding

Set padding values for an auto-layout frame.

set_axis_align

Configure primary and counter axis alignment for auto-layout frames.

set_layout_sizing

Define horizontal and vertical sizing for auto-layout frames.

set_item_spacing

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

set_fill_color

Change the fill color of a node (RGBA).

set_stroke_color

Change the stroke color and weight of a node.

set_corner_radius

Set 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 with new dimensions.

delete_node

Remove a node from the document.

delete_multiple_nodes

Delete several nodes in a single operation.

clone_node

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

get_styles

Query local styles used in the document.

get_local_components

Retrieve information about local components.

create_component_instance

Create an instance from a local component.

get_instance_overrides

Extract overrides from a selected component instance.

set_instance_overrides

Apply extracted overrides to target component instances.

export_node_as_image

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