Enables AI agents to interact with Figma designs through 50+ tools for manipulating documents, creating and styling shapes, managing components and variables, setting up auto-layout, creating prototype connections, and exporting designs as images.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Agent to Figma MCPcreate a blue rectangle with rounded corners in the center of the canvas"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Agent to Figma MCP
A TypeScript monorepo that enables AI agents (like Claude) to interact with Figma designs through the Model Context Protocol (MCP).
Architecture
┌─────────────────┐ stdio ┌─────────────────┐ WebSocket ┌─────────────────┐
│ Claude Code │◄────────────────►│ MCP Server │◄──────────────────►│ Relay Server │
│ (MCP Client) │ │ (port: stdio) │ │ (port: 3055) │
└─────────────────┘ └─────────────────┘ └────────┬────────┘
│
│ WebSocket
▼
┌─────────────────┐
│ Figma Plugin │
│ (in Figma) │
└─────────────────┘Packages
Package | Description |
| MCP server with 50+ tools for Figma manipulation |
| WebSocket relay for Figma plugin communication |
| Figma plugin that executes commands |
| Shared TypeScript types |
Quick Start
Prerequisites
Bun v1.0+
Installation
# 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 buildRunning
1. Start the Relay Server
bun run --filter=@caelinsutch/relay-server startThe relay server runs on ws://localhost:3055.
2. Install the Figma Plugin
Open Figma Desktop
Go to Plugins → Development → Import plugin from manifest...
Select
apps/figma-plugin/manifest.jsonRun the plugin from Plugins → Development → Figma MCP Plugin
3. Configure Claude Desktop
Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):
{
"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"
}
}
}
}4. Connect
In the Figma plugin UI, enter the channel name (default:
figma)Click Connect
Start chatting with Claude about your Figma designs!
Available Tools
Document & Selection
get_document_info- Get current document informationget_selection- Get currently selected nodesget_node_info- Get detailed info about a noderead_my_design- Read selected design nodes
Shape Creation
create_rectangle- Create a rectanglecreate_frame- Create a frame with auto-layout supportcreate_text- Create text nodes
Styling
set_fill_color- Set fill colorset_stroke_color- Set stroke colorset_corner_radius- Set corner radius
Transform
move_node- Move a noderesize_node- Resize a nodedelete_node- Delete a nodeclone_node- Clone a node
Layout
set_layout_mode- Set auto-layout modeset_padding- Set paddingset_axis_align- Set axis alignmentset_item_spacing- Set item spacing
Components
get_local_components- List local componentscreate_component_instance- Create component instanceget_instance_overrides- Get instance overridesset_instance_overrides- Apply overrides to instances
Variables (NEW)
get_local_variable_collections- List variable collectionscreate_variable_collection- Create a collectioncreate_variable- Create a variableset_variable_value_for_mode- Set variable valuebind_variable_to_node- Bind variable to node propertyunbind_variable_from_node- Remove variable bindingAnd more...
Export & Prototyping
export_node_as_image- Export node as PNG/JPG/SVG/PDFget_reactions- Get prototype reactionscreate_connections- Create prototype connections
Development
Build
# Build all packages
bun run build
# Build specific package
bun run build --filter=@caelinsutch/mcp-serverType Check
# Type check all packages
bun run type:check
# Type check specific package
bun run type:check --filter=@caelinsutch/mcp-serverDevelopment Mode
# Run relay server in dev mode
bun run --filter=@caelinsutch/relay-server dev
# Run Figma plugin in dev mode
bun run --filter=@caelinsutch/figma-plugin devProject Structure
agent-to-figma-mcp/
├── apps/
│ ├── mcp-server/ # MCP server (stdio transport)
│ │ ├── src/
│ │ │ ├── tools/ # Feature-based tool modules
│ │ │ │ ├── document.ts
│ │ │ │ ├── nodes.ts
│ │ │ │ ├── shapes.ts
│ │ │ │ ├── text.ts
│ │ │ │ ├── styling.ts
│ │ │ │ ├── transform.ts
│ │ │ │ ├── layout.ts
│ │ │ │ ├── components.ts
│ │ │ │ ├── variables.ts
│ │ │ │ └── ...
│ │ │ ├── prompts/ # MCP prompts
│ │ │ ├── communication/ # WebSocket client
│ │ │ └── index.ts
│ │ └── package.json
│ │
│ ├── relay-server/ # WebSocket relay
│ │ ├── src/
│ │ │ ├── server.ts # Bun WebSocket server
│ │ │ ├── channels.ts # Channel management
│ │ │ └── index.ts
│ │ └── package.json
│ │
│ └── figma-plugin/ # Figma plugin
│ ├── src/
│ │ ├── plugin/
│ │ │ ├── handlers/ # Command handlers
│ │ │ ├── utils/ # Utilities
│ │ │ └── code.ts # Main entry
│ │ └── ui/ # Plugin UI
│ └── manifest.json
│
├── packages/
│ └── types/ # Shared TypeScript types
│ └── src/
│ ├── commands.ts
│ ├── figma/
│ │ ├── nodes.ts
│ │ ├── variables.ts
│ │ └── ...
│ └── communication/
│
└── turbo.jsonEnvironment Variables
MCP Server
Variable | Default | Description |
|
| WebSocket relay URL |
|
| Channel to join |
Relay Server
Variable | Default | Description |
|
| Server port |
Troubleshooting
Plugin not connecting
Ensure the relay server is running
Check that the channel name matches in both plugin and MCP server
Verify Figma has network access permissions
Commands timing out
Check Figma plugin is connected (green indicator)
Ensure the node IDs are valid
Try reconnecting the plugin
Type errors during build
# Clean and rebuild
bun run clean
bun install
bun run buildLicense
MIT