Figma MCP Bridge

A Model Context Protocol (MCP) server that enables Claude to read and manipulate Figma documents in real-time through a WebSocket bridge to a Figma plugin.

Features

62 Figma operations - Create shapes, modify styles, manage components, export assets
Real-time bidirectional communication - Changes appear instantly in Figma
Token-optimized queries - Efficient variable search and node traversal for AI interactions
Full Figma API access - Styles, variables, auto-layout, boolean operations, and more

Architecture

Claude Code ←──stdio──→ MCP Server ←──WebSocket──→ Figma Plugin ←──→ Figma API (Node.js) localhost:3055 (runs in Figma)

Quick Start

Prerequisites

Node.js 18+
Figma desktop app
Claude Code CLI or Claude Desktop

Installation

Option A: Install from npm (recommended)

For Claude Code CLI:

claude mcp add figma-mcp-bridge -- npx @magic-spells/figma-mcp-bridge

For Claude Desktop:

Edit your config file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

{ "mcpServers": { "figma-mcp-bridge": { "command": "npx", "args": ["-y", "@magic-spells/figma-mcp-bridge"] } } }

Then restart Claude Desktop.

Install the Figma plugin:

Download the plugin folder from this repo
In Figma: Plugins → Development → Import plugin from manifest
Select plugin/manifest.json

Connect:

Open a Figma file
Run the plugin: Plugins → Development → Claude Figma Bridge
The status should show "Connected"

Option B: Install from source

Clone the repository
git clone https://github.com/magic-spells/figma-mcp-bridge.git cd figma-mcp-bridge npm install
Add to Claude Code
claude mcp add figma-mcp-bridge node /path/to/figma-mcp-bridge/src/index.js
Install the Figma plugin
- In Figma: Plugins → Development → Import plugin from manifest
- Select plugin/manifest.json from the cloned repo
Connect
- Open a Figma file
- Run the plugin: Plugins → Development → Claude Figma Bridge
- The status should show "Connected"

Configuration

Environment Variables

Variable	Default	Description
`FIGMA_BRIDGE_PORT`	`3055`	WebSocket server port (auto-increments if busy)

Auto-approve Figma Tools

Add to .claude/settings.local.json:

{ "permissions": { "allow": ["mcp__figma-mcp-bridge__*"] } }

Commands Reference

Query Commands

`figma_get_context`

Get the current Figma document context including file info, current page, and selection.

Parameter	Type	Description
(none)

`figma_list_pages`

List all pages in the current Figma document.

Parameter	Type	Description
(none)

`figma_get_nodes`

Get detailed information about specific nodes by their IDs.

Parameter

Type

Required

Description

nodeIds

string[]

Yes

Array of node IDs (e.g.,

["1:23", "4:56"]

)

depth

string

Detail level:

minimal

compact

, or

full

(default)

`figma_get_local_styles`

List all local styles defined in the document.

Parameter

Type

Required

Description

type

string

Filter:

PAINT

TEXT

EFFECT

GRID

, or

ALL

(default)

`figma_get_local_variables`

Get all local variables and variable collections.

Parameter

Type

Required

Description

type

string

Filter:

COLOR

FLOAT

STRING

BOOLEAN

, or

ALL

(default)

Note: Can return 25k+ tokens. Prefer figma_search_variables for efficiency.

`figma_get_children`

Get immediate children of a node. Efficient for browsing hierarchy one level at a time.

Parameter	Type	Required	Default	Description
`parentId`	string	Yes		Node ID to get children of
`compact`	boolean	No	`true`	Return minimal data

`figma_search_nodes`

Search for nodes by name within a scope. Preferred for finding specific frames, sections, or elements.

Parameter	Type	Required	Default	Description
`parentId`	string	Yes		Scope to search (page/frame/section ID)
`nameContains`	string	No		Case-insensitive substring match
`namePattern`	string	No		Glob pattern with wildcards (e.g., `button` )
`types`	string[]	No		Filter by node types: `FRAME` , `TEXT` , `SECTION` , `COMPONENT` , `INSTANCE` , `GROUP` , etc.
`maxDepth`	number	No	`-1`	Search depth (-1 = unlimited, 1 = immediate children)
`compact`	boolean	No	`true`	Return minimal data
`limit`	number	No	`50`	Maximum results

Returns ~50 tokens/node vs ~500 for full node data.

`figma_search_components`

Search local components by name. Use when looking for specific components like "Button", "Header", etc.

Parameter	Type	Required	Default	Description
`nameContains`	string	No		Case-insensitive substring match
`namePattern`	string	No		Glob pattern with wildcards
`includeVariants`	boolean	No	`false`	Include individual variants from component sets
`compact`	boolean	No	`true`	Return minimal data
`limit`	number	No	`50`	Maximum results

`figma_search_styles`

Search local styles by name. More efficient than figma_get_local_styles when looking for specific styles.

Parameter	Type	Required	Default	Description
`nameContains`	string	No		Case-insensitive substring match
`type`	string	No	`"ALL"`	Filter: `PAINT` , `TEXT` , `EFFECT` , `GRID` , `ALL`
`compact`	boolean	No	`true`	Return minimal data
`limit`	number	No	`50`	Maximum results

Creation Commands

`figma_create_rectangle`

Create a new rectangle.

Parameter	Type	Required	Default	Description
`x`	number	No	`0`	X position
`y`	number	No	`0`	Y position
`width`	number	No	`100`	Width in pixels
`height`	number	No	`100`	Height in pixels
`name`	string	No	`"Rectangle"`	Node name
`fills`	color	No		Fill color
`parentId`	string	No		Parent node ID

`figma_create_ellipse`

Create an ellipse, circle, arc, or ring.

Parameter	Type	Required	Default	Description
`x`	number	No	`0`	X position
`y`	number	No	`0`	Y position
`width`	number	No	`100`	Width (diameter for circle)
`height`	number	No	`100`	Height
`name`	string	No	`"Ellipse"`	Node name
`fills`	color	No		Fill color
`parentId`	string	No		Parent node ID
`arcData.startingAngle`	number	No		Starting angle in radians
`arcData.endingAngle`	number	No		Ending angle in radians
`arcData.innerRadius`	number	No		Inner radius ratio (0-1) for rings

`figma_create_line`

Create a line.

Parameter	Type	Required	Default	Description
`x`	number	No	`0`	X position
`y`	number	No	`0`	Y position
`length`	number	No	`100`	Line length
`rotation`	number	No	`0`	Rotation in degrees
`strokeWeight`	number	No	`1`	Stroke weight
`strokes`	color	No		Stroke color
`strokeCap`	string	No	`"NONE"`	Cap: `NONE` , `ROUND` , `SQUARE` , `ARROW_LINES` , `ARROW_EQUILATERAL`
`name`	string	No	`"Line"`	Node name
`parentId`	string	No		Parent node ID

`figma_create_frame`

Create a frame container (supports auto-layout).

Parameter	Type	Required	Default	Description
`x`	number	No	`0`	X position
`y`	number	No	`0`	Y position
`width`	number	No	`100`	Width
`height`	number	No	`100`	Height
`name`	string	No	`"Frame"`	Node name
`fills`	color	No		Fill color
`parentId`	string	No		Parent node ID

`figma_create_text`

Create a text node.

Parameter	Type	Required	Default	Description
`x`	number	No	`0`	X position
`y`	number	No	`0`	Y position
`text`	string	No	`"Text"`	Text content
`fontSize`	number	No	`16`	Font size
`fontFamily`	string	No	`"Inter"`	Font family
`fontStyle`	string	No	`"Regular"`	Font style
`fills`	color	No		Text color
`name`	string	No	`"Text"`	Node name
`parentId`	string	No		Parent node ID

`figma_clone_nodes`

Clone (duplicate) nodes.

Parameter	Type	Required	Default	Description
`nodeIds`	string[]	Yes		Node IDs to clone
`parentId`	string	No		Parent for clones
`offset.x`	number	No	`20`	X offset from original
`offset.y`	number	No	`20`	Y offset from original

`figma_create_component`

Create a reusable component.

Parameter	Type	Required	Default	Description
`fromNodeId`	string	No		Convert existing node to component
`x`	number	No	`0`	X position
`y`	number	No	`0`	Y position
`width`	number	No	`100`	Width
`height`	number	No	`100`	Height
`name`	string	No	`"Component"`	Component name
`fills`	color	No		Fill color
`parentId`	string	No		Parent node ID
`description`	string	No		Component description

`figma_create_instance`

Create an instance of a component.

Parameter	Type	Required	Description
`componentId`	string	Yes	Component ID to instantiate
`x`	number	No	X position
`y`	number	No	Y position
`parentId`	string	No	Parent node ID
`name`	string	No	Instance name

Style Commands

`figma_set_fills`

Set fill color on a node.

Parameter	Type	Required	Description
`nodeId`	string	Yes	Node to modify
`fills`	color	Yes	Fill color

Color formats:

Hex: { color: "#FF0000" } or { color: "#FF0000AA" } (with alpha)
RGB: { r: 1, g: 0, b: 0, a: 0.5 }
Full array: [{ type: "SOLID", color: { r, g, b }, opacity: 1 }]

`figma_set_strokes`

Set stroke color on a node.

Parameter	Type	Required	Description
`nodeId`	string	Yes	Node to modify
`strokes`	color	Yes	Stroke color
`strokeWeight`	number	No	Stroke weight in pixels

`figma_set_text`

Set text content on a text node.

Parameter	Type	Required	Description
`nodeId`	string	Yes	Text node to modify
`text`	string	Yes	New text content

`figma_set_opacity`

Set node transparency.

Parameter	Type	Required	Description
`nodeId`	string	Yes	Node to modify
`opacity`	number	Yes	Opacity (0-1)

`figma_set_corner_radius`

Set corner radius.

Parameter	Type	Required	Description
`nodeId`	string	Yes	Node to modify
`radius`	number	No	Uniform radius for all corners
`topLeft`	number	No	Top-left corner radius
`topRight`	number	No	Top-right corner radius
`bottomLeft`	number	No	Bottom-left corner radius
`bottomRight`	number	No	Bottom-right corner radius

`figma_set_effects`

Set effects (shadows, blurs).

Parameter	Type	Required	Description
`nodeId`	string	Yes	Node to modify
`effects`	array	Yes	Array of effect objects

Shadow effect:

{ "type": "DROP_SHADOW", "color": { "color": "#000000" }, "offset": { "x": 0, "y": 4 }, "radius": 8, "spread": 0, "visible": true }

Blur effect:

{ "type": "LAYER_BLUR", "radius": 10, "visible": true }

`figma_apply_style`

Apply a local style to a node.

Parameter	Type	Required	Description
`nodeId`	string	Yes	Node to apply style to
`styleId`	string	Yes	Style ID
`property`	string	Yes	Property: `fills` , `strokes` , `text` , `effects` , `grid`

`figma_set_variable`

Set variable value or bind to node property.

Parameter	Type	Required	Description
`variableId`	string	Yes	Variable ID
`modeId`	string	No	Mode ID (for setting value)
`value`	any	No	Value to set
`nodeId`	string	No	Node ID (for binding)
`field`	string	No	Field to bind ( `opacity` , `cornerRadius` , `fills` , etc.)
`paintIndex`	number	No	Paint array index for fills/strokes (default 0)

Layout Commands

`figma_set_auto_layout`

Configure auto-layout on a frame.

Parameter	Type	Required	Description
`nodeId`	string	Yes	Frame to configure
`layoutMode`	string	No	`NONE` , `HORIZONTAL` , `VERTICAL`
`primaryAxisSizingMode`	string	No	`FIXED` , `AUTO`
`counterAxisSizingMode`	string	No	`FIXED` , `AUTO`
`primaryAxisAlignItems`	string	No	`MIN` , `CENTER` , `MAX` , `SPACE_BETWEEN`
`counterAxisAlignItems`	string	No	`MIN` , `CENTER` , `MAX` , `BASELINE`
`paddingTop`	number	No	Top padding
`paddingRight`	number	No	Right padding
`paddingBottom`	number	No	Bottom padding
`paddingLeft`	number	No	Left padding
`itemSpacing`	number	No	Space between items
`counterAxisSpacing`	number	No	Space between rows when wrapped
`layoutWrap`	string	No	`NO_WRAP` , `WRAP`

`figma_set_layout_align`

Set child alignment in auto-layout.

Parameter	Type	Required	Description
`nodeId`	string	Yes	Child node to modify
`layoutAlign`	string	No	`MIN` , `CENTER` , `MAX` , `STRETCH` , `INHERIT`
`layoutGrow`	number	No	Growth factor (0-1)
`layoutPositioning`	string	No	`AUTO` , `ABSOLUTE`

Transform Commands

`figma_move_nodes`

Move nodes to a new position.

Parameter	Type	Required	Description
`nodeIds`	string[]	Yes	Nodes to move
`x`	number	No	X position or offset
`y`	number	No	Y position or offset
`relative`	boolean	No	If true, x/y are offsets (default false)

`figma_resize_nodes`

Resize nodes.

Parameter	Type	Required	Description
`nodeIds`	string[]	Yes	Nodes to resize
`width`	number	No	New width
`height`	number	No	New height

`figma_delete_nodes`

Delete nodes.

Parameter	Type	Required	Description
`nodeIds`	string[]	Yes	Nodes to delete

`figma_group_nodes`

Group multiple nodes.

Parameter	Type	Required	Default	Description
`nodeIds`	string[]	Yes		Nodes to group
`name`	string	No	`"Group"`	Group name

`figma_ungroup_nodes`

Ungroup group nodes.

Parameter	Type	Required	Description
`nodeIds`	string[]	Yes	Group nodes to ungroup

`figma_rename_node`

Rename nodes.

Parameter	Type	Required	Description
`nodeId`	string	No	Single node ID
`nodeIds`	string[]	No	Batch node IDs
`name`	string	Yes	New name

`figma_reorder_node`

Change z-order (layer order).

Parameter

Type

Required

Description

nodeId

string

Yes

Node to reorder

position

string/number

Yes

"front"

"back"

, or index number

`figma_set_constraints`

Set resize constraints (non-auto-layout frames only).

Parameter	Type	Required	Description
`nodeId`	string	Yes	Node to configure
`horizontal`	string	No	`MIN` , `CENTER` , `MAX` , `STRETCH` , `SCALE`
`vertical`	string	No	`MIN` , `CENTER` , `MAX` , `STRETCH` , `SCALE`

Navigation Commands

`figma_set_selection`

Set the current selection.

Parameter	Type	Required	Description
`nodeIds`	string[]	Yes	Nodes to select (empty to clear)

`figma_set_current_page`

Switch to a different page.

Parameter	Type	Required	Description
`pageId`	string	Yes	Page ID to switch to

Export Commands

`figma_export_node`

Export a node as an image.

Parameter	Type	Required	Default	Description
`nodeId`	string	Yes		Node to export
`format`	string	No	`"PNG"`	Format: `PNG` , `SVG` , `JPG` , `PDF`
`scale`	number	No	`1`	Export scale (1 = 100%)

Returns base64-encoded data.

Component Commands

`figma_detach_instance`

Detach instance from component (converts to frame).

Parameter	Type	Required	Description
`nodeId`	string	Yes	Instance to detach

Token Optimization

Variable Queries

Use figma_search_variables instead of figma_get_local_variables:

// Inefficient (~25k+ tokens) figma_get_local_variables({ type: 'ALL' }) // Efficient (~500 tokens) figma_search_variables({ namePattern: 'tailwind/orange/*', type: 'COLOR', compact: true, limit: 50 })

figma_search_variables

Parameter	Type	Default	Description
`namePattern`	string		Wildcard pattern ( `*` = any chars)
`type`	string	`"ALL"`	Variable type filter
`collectionName`	string		Collection name filter
`compact`	boolean	`true`	Minimal data (id, name, value only)
`limit`	number	`50`	Max results

Node Traversal

Use the depth parameter in figma_get_nodes:

Depth	Properties	Use Case
`minimal`	~5	Tree traversal, finding nodes
`compact`	~10	Layout inspection
`full`	~40	Detailed node editing

Finding Nodes

Use search tools instead of traversing the full tree:

// Find nodes by name within a page/frame figma_search_nodes({ parentId: '1:2', // Required scope nameContains: 'button', // Case-insensitive types: ['FRAME', 'COMPONENT'], compact: true }) // Browse hierarchy one level at a time figma_get_children({ parentId: '1:2' }) // Find components by name figma_search_components({ nameContains: 'Header' }) // Find styles by name figma_search_styles({ nameContains: 'primary', type: 'PAINT' })

Tool	Use Case	Token Efficiency
`figma_search_nodes`	Find frames/elements by name	~50 tokens/node
`figma_get_children`	Browse hierarchy level-by-level	~50 tokens/node
`figma_search_components`	Find specific components	~50 tokens/result
`figma_search_styles`	Find specific styles	~30 tokens/result

Known Limitations

No ES6 spread operator in plugin code
Boolean operations require nodes with same parent
Constraints don't work on auto-layout children (use layoutAlign)
Lines have height=0, use length parameter
Vectors only support M, L, Q, C, Z commands (no arcs)
detachInstance() also detaches ancestor instances
30-second timeout on all commands

Troubleshooting

Plugin Not Connecting

Ensure the MCP server is running
Check the port: default is 3055, or set FIGMA_BRIDGE_PORT
Restart the plugin in Figma
Click "Reconnect" in the plugin UI

Port Already in Use

The server automatically tries ports 3055-3070. To use a specific port:

FIGMA_BRIDGE_PORT=3057 node src/index.js

Multiple Claude Code Instances

Each Claude Code instance can work with a different Figma file by using different ports:

First instance: Use default port 3055
Second instance: Set FIGMA_BRIDGE_PORT=3056
In Figma plugin: Change the port number in the plugin UI to match

The plugin UI has a port input field - just change it to connect to a different MCP server.

Commands Timing Out

Commands have a 30-second timeout
Large exports may timeout; try smaller scales
Check plugin is still connected (green status)

Font Errors

Text operations require font loading. The plugin handles this automatically, but if a font isn't installed, it will fail. Use fonts available on your system.

License

MIT

Figma MCP Bridge

Features

Architecture

Quick Start

Prerequisites

Installation

Option A: Install from npm (recommended)

Option B: Install from source

Configuration

Environment Variables

Auto-approve Figma Tools

Commands Reference

Query Commands

figma_get_context

figma_list_pages

figma_get_nodes

figma_get_local_styles

figma_get_local_variables

figma_get_children

figma_search_nodes

figma_search_components

figma_search_styles

Creation Commands

figma_create_rectangle

figma_create_ellipse

figma_create_line

figma_create_frame

figma_create_text

figma_clone_nodes

figma_create_component

figma_create_instance

Style Commands

figma_set_fills

figma_set_strokes

figma_set_text

figma_set_opacity

figma_set_corner_radius

figma_set_effects

figma_apply_style

figma_set_variable

Layout Commands

figma_set_auto_layout

figma_set_layout_align

Transform Commands

figma_move_nodes

figma_resize_nodes

figma_delete_nodes

figma_group_nodes

figma_ungroup_nodes

figma_rename_node

figma_reorder_node

figma_set_constraints

Navigation Commands

figma_set_selection

figma_set_current_page

Export Commands

figma_export_node

Component Commands

figma_detach_instance

Token Optimization

Variable Queries

Node Traversal

Finding Nodes

Known Limitations

Troubleshooting

Plugin Not Connecting

Port Already in Use

Multiple Claude Code Instances

Commands Timing Out

Font Errors

License

Resources

New MCP Servers

Latest Blog Posts

MCP directory API

`figma_get_context`

`figma_list_pages`

`figma_get_nodes`

`figma_get_local_styles`

`figma_get_local_variables`

`figma_get_children`

`figma_search_nodes`

`figma_search_components`

`figma_search_styles`

`figma_create_rectangle`

`figma_create_ellipse`

`figma_create_line`

`figma_create_frame`

`figma_create_text`

`figma_clone_nodes`

`figma_create_component`

`figma_create_instance`

`figma_set_fills`

`figma_set_strokes`

`figma_set_text`

`figma_set_opacity`

`figma_set_corner_radius`

`figma_set_effects`

`figma_apply_style`

`figma_set_variable`

`figma_set_auto_layout`

`figma_set_layout_align`

`figma_move_nodes`

`figma_resize_nodes`

`figma_delete_nodes`

`figma_group_nodes`

`figma_ungroup_nodes`

`figma_rename_node`

`figma_reorder_node`

`figma_set_constraints`

`figma_set_selection`

`figma_set_current_page`

`figma_export_node`

`figma_detach_instance`