home / mcp / agent to figma mcp server

Agent to Figma MCP Server

Provides an MCP server that enables AI agents to interact with Figma designs via a WebSocket relay and Figma plugin.

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "caelinsutch-agent-to-figma-mcp": {
      "command": "node",
      "args": [
        "/path/to/agent-to-figma-mcp/apps/mcp-server/dist/index.js"
      ],
      "env": {
        "RELAY_URL": "ws://localhost:3055",
        "CHANNEL_NAME": "figma"
      }
    }
  }
}

You run an MCP server that lets AI agents talk to and manipulate Figma designs through a dedicated WebSocket relay and a Figma plugin. This setup enables interactive design workflows where an agent can inspect, create, modify, and prototype design elements inside Figma via a stable MCP channel.

How to use

Install and run the MCP server components, then connect your MCP client (for example, Claude) to the relay channel. Use the Figma plugin to send commands for reading document information, creating and editing shapes, managing layouts, and working with components and variables. The server exposes a broad set of tools that you can invoke from your agent to drive design changes inside Figma.

How to install

Prerequisites: you need Bun v1.0+ installed and the Figma Desktop App available on your machine.

# Clone the repository
git clone https://github.com/anthropics/agent-to-figma-mcp.git
cd agent-to-figma-mcp

# Install dependencies
bun install

# Build all packages
bun run build

Run and configure components

Start the WebSocket relay that connects to the Figma plugin.

bun run --filter=@caelinsutch/relay-server start
```

The relay server listens on ws://localhost:3055.

Install and configure the Figma plugin in your Figma Desktop app.

1. Open Figma Desktop
2. Plugins → Development → Import plugin from manifest...
3. Select apps/figma-plugin/manifest.json
4. Run the plugin from Plugins → Development → Figma MCP Plugin

Configure Claude Desktop

Add the MCP server configuration to your Claude Desktop setup. This enables Claude to connect to the local MCP server via the relay.

{
  "mcpServers": {
    "agent-to-figma": {
      "command": "node",
      "args": ["/path/to/agent-to-figma-mcp/apps/mcp-server/dist/index.js"],
      "env": {
        "RELAY_URL": "ws://localhost:3055",
        "CHANNEL_NAME": "figma"
      }
    }
  }
}

Connect

In the Figma plugin UI, enter the channel name (default: figma) and click Connect. Then start chatting with Claude about your Figma designs and start issuing commands through the MCP channel.

Project-wide MCP server configuration

The MCP server is implemented as a stdio transport server. It runs a Node.js process that communicates with the Claude desktop client via a WebSocket relay. The plugin and the relay work together to execute commands that read, create, modify, and arrange Figma design elements.

Troubleshooting

Plugin not connecting: ensure the relay server is running, the channel name matches between the plugin and the MCP server, and that Figma has network access permissions.

Commands timing out: verify the plugin shows a connected indicator, confirm node IDs are valid, and try reconnecting the plugin.

Build or type errors: clean and rebuild, then re-run the build and start steps.

Available tools

get_document_info

Get current document information from Figma to understand context.

get_selection

Retrieve currently selected nodes in the document.

get_node_info

Fetch detailed information about a specific node.

read_my_design

Read and return data for the selected design nodes.

create_rectangle

Create a new rectangle shape with specified properties.

create_frame

Create a new frame with optional auto-layout support.

create_text

Create a new text node with content and styling.

set_fill_color

Apply a fill color to a node.

set_stroke_color

Apply a stroke color to a node.

set_corner_radius

Set the corner radius for a shape.

move_node

Move a node to a new position.

resize_node

Resize a node along width and/or height.

delete_node

Remove a node from the canvas.

clone_node

Create a clone of an existing node.

set_layout_mode

Switch a frame or group to an auto-layout mode.

set_padding

Adjust padding for auto-layout frames.

set_axis_align

Set axis alignment for auto-layout content.

set_item_spacing

Configure spacing between items in auto-layout.

get_local_components

List local components available in the document.

create_component_instance

Instantiate a component at a specified location.

get_instance_overrides

Retrieve overrides for a component instance.

set_instance_overrides

Apply overrides to a component instance.

get_local_variable_collections

List variable collections defined locally.

create_variable_collection

Create a new variable collection.

create_variable

Create a new variable within a collection.

set_variable_value_for_mode

Set a variable value for a given mode or state.

bind_variable_to_node

Bind a variable to a node property.

unbind_variable_from_node

Remove a variable binding from a node.

export_node_as_image

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

get_reactions

Query prototype reactions for a flow.

create_connections

Create prototype connections between frames or nodes.