Talk to Figma

You can connect an AI agent to Figma through the Talk to Figma MCP server, enabling reading designs and programmatic modifications via a consistent MCP interface. This server acts as a bridge between your MCP-enabled agent and the Figma plugin, letting you issue design commands, query document information, and apply changes across frames, components, and text elements with structured requests.

How to use

To use the Talk to Figma MCP server, install the MCP client in your Cursor environment, start the WebSocket bridge, and connect the Figma plugin to the running server channel. You will then be able to read document data, inspect selections, modify text and shapes, control layout, and propagate changes across multiple elements using the MCP tools.

How to install

Prerequisites: You need Bun installed on your system. You also need a Cursor MCP setup to consume the server.

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

# Run setup to install MCP in your Cursor project
bun setup

# Start the WebSocket server
bun socket

Windows + WSL guide

If you are using Windows with WSL, follow these steps to enable network access from the WSL environment and start the socket server.

# Install bun via PowerShell
powershell -c "irm bun.sh/install.ps1|iex" 

# In the code, listen on all interfaces by uncommenting the hostname
# In src/socket.ts, set hostname to 0.0.0.0

Usage notes

1. Start the WebSocket server with the command above. 2. Install the MCP server in Cursor using the provided configuration. 3. Open Figma and run the Cursor MCP Plugin. 4. In Figma, join the channel you created to communicate with the MCP server. 5. Use Cursor to send MCP commands and receive results from Figma.

Manual setup and installation details

Add the MCP server to your Cursor configuration to enable communication with Figma.

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

Local development setup

You can point your local development setup to this MCP server by adjusting your client configuration to use the local path of the server script.

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

Development and plugin setup

To work with the Figma plugin during development, navigate to the plugin directory, edit the code, and connect the plugin to the WebSocket server.

cd src/cursor_mcp_plugin
# Edit code.js and ui.html as needed

Notes on security and best practices

Always join the designated channel before sending commands. Validate the document state with read operations before applying changes. Use batch operations where possible to minimize roundtrips, and monitor progress via WebSocket updates for long-running tasks.

MCP Prompts and prompts usage

The MCP server includes helper prompts to guide you through complex design tasks, such as design strategy, read strategies, text replacement strategies, annotation conversion strategies, and override propagation strategies. Use these prompts to structure your tasks and improve reproducibility.

Design automation examples

Examples include bulk text content replacement and propagating component instance overrides from a source instance to multiple targets, dramatically reducing repetitive design work.

Available tools

get_document_info

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

get_selection

Retrieve details about the current selection in the document.

read_my_design

Read detailed information about the current selection with no parameters.

get_node_info

Get detailed information about a specific node by ID.

get_nodes_info

Fetch detailed information for multiple nodes by providing an array of IDs.

set_focus

Set focus to a specific node by selecting it and scrolling the viewport to bring it into view.

set_selections

Select multiple nodes and scroll the viewport to show them.

get_annotations

Retrieve annotations in the document or on a specific node.

set_annotation

Create or update an annotation with markdown support.

set_multiple_annotations

Batch create or update multiple annotations efficiently.

scan_nodes_by_types

Scan nodes by types to locate targets for annotations or operations.

get_reactions

Get prototype reactions and visuals for flow mapping.

set_default_connector

Set the default FigJam connector style for future connections.

create_connections

Create 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.

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 layout mode and wrap behavior for an auto-layout frame.

set_padding

Set padding values for an auto-layout frame.

set_axis_align

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

set_layout_sizing

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

set_item_spacing

Set distance between children in an auto-layout frame.

set_fill_color

Set the fill color of a node.

set_stroke_color

Set 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

Delete a node.

delete_multiple_nodes

Delete multiple nodes at once.

clone_node

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

get_styles

Retrieve information about local styles.

get_local_components

Retrieve information about local components.

create_component_instance

Create an instance of a component.

get_instance_overrides

Extract override properties from a selected component instance.

set_instance_overrides

Apply extracted overrides to target instances.

export_node_as_image

Export a node as an image in PNG, JPG, SVG, or PDF; returns base64 when image export is limited.

join_channel

Join a specific channel to communicate with Figma.