Cursor Talk To Figma

You set up a Model Context Protocol (MCP) integration between Cursor AI and Figma to read designs and modify them programmatically. This enables Cursor to query a Figma document, inspect nodes, create new elements, adjust styling, and export assets through a defined set of MCP tools, all coordinated via a WebSocket bridge and a local MCP server.

How to use

To use this MCP server, you install the MCP server in Cursor, start the WebSocket bridge, and run the Figma plugin that talks to Cursor. You then connect the plugin to the WebSocket server by joining a channel and begin sending commands to control Figma assets and documents.

How to install

Prerequisites: you need Bun installed to run the MCP server and its tooling.

Install Bun if you haven’t already.

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

Set up the project and install MCP into your Cursor active project.

bun setup

Start the WebSocket server that coordinates between the MCP server and the Figma plugin.

bun start

Install the Figma Plugin for Cursor MCP integration. The setup includes wiring the Figma plugin to connect to the WebSocket server.

Configuration and runtime details

MCP server configuration for Cursor is provided as a local stdio server that runs the TypeScript file responsible for talking to Figma.

The following example shows how to configure the MCP server in Cursor’s MCP settings.

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

WebSocket server setup

Run the WebSocket server to enable real-time communication with the Figma plugin.

bun run src/socket.ts

Figma plugin setup

In Figma, install the Cursor MCP plugin for development and connect it to the WebSocket server via a channel.

Steps include creating a new plugin, linking to the plugin manifest, and ensuring the plugin is available in Figma under Development plugins.

Additional notes

The MCP integration enables you to inspect the current document, query node information, and perform a variety of create, modify, and export actions through a stable tool set.

Available tools

get_document_info

Retrieve information about the currently open Figma document, including its metadata and structure.

get_selection

Obtain details about the current selection within the document to inform edits.

get_node_info

Fetch detailed information about a specific node by its ID.

create_rectangle

Create a new rectangle with specified position, size, and optional name.

create_frame

Create a new frame container with position, size, and optional name.

create_text

Create a new text node with customizable font properties.

set_fill_color

Apply fill color to a node using RGBA values.

set_stroke_color

Apply stroke color and stroke weight to 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 in the canvas.

resize_node

Resize a node to new width and height.

delete_node

Remove a node from the document.

get_styles

Retrieve information about local styles defined in the document.

get_local_components

Fetch information about locally defined components.

get_team_components

Fetch information about team-wide components.

create_component_instance

Create an instance of a component at a specified position.

export_node_as_image

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

execute_figma_code

Execute arbitrary JavaScript code inside Figma with caution.

join_channel

Join a specific channel to enable communication with Figma through the MCP plugin.