Agent to 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.