Figma MCP Bridge Server

You can run a dedicated MCP server that lets Claude read and manipulate Figma documents in real time. The Figma MCP Bridge creates a WebSocket bridge between Claude and a Figma plugin, exposing 62 Figma operations and full Figma API access so you can create, modify, and export design assets directly from your AI workflows.

How to use

To use the Figma MCP Bridge, run the MCP server locally or connect to it from Claude Code or Claude Desktop. The bridge exposes a WebSocket interface on port 3055 by default. When the server is running, you install and load the Figma plugin into Figma, then open a Figma file and start the Claude Figma Bridge plugin. The plugin reports the connection status as Connected, and you can start issuing commands to read the document, create or modify nodes, apply styles, export assets, and more.

How to install

Prerequisites you need before installing: Node.js 18+ (for stdio-based runs) and the Figma desktop app. You also need Claude Code CLI or Claude Desktop to configure and launch the MCP server.

Option A: Install from npm (recommended) for Claude Code CLI and Claude Desktop users.

For Claude Code CLI, run the following to add the Figma MCP Bridge via npx:

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

For Claude Desktop, add the MCP server configuration to your local config file. On macOS, place it at ~/Library/Application Support/Claude/claude_desktop_config.json. On Windows, use %APPDATA%\Claude\claude_desktop_config.json. Then restart Claude Desktop.

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

Install the Figma plugin to connect the bridge.

- In Figma: Plugins → Development → Import plugin from manifest
- Select plugin/manifest.json

Connect the bridge to a Figma file.

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

Additional install path

Option B: Install from source if you prefer a local clone.

1. Clone the repository and install dependencies.

git clone https://github.com/magic-spells/figma-mcp-bridge.git
cd figma-mcp-bridge
npm install

2. Add to Claude Code using a local Node runtime.

claude mcp add figma-mcp-bridge node /path/to/figma-mcp-bridge/src/index.js

3. Install the Figma plugin in Figma as described above, and connect the plugin to Claude.

4. Connect to a Figma file with the plugin; the status should be Connected.

Configuration

Environment variable for the bridge port. The MCP bridge runs a WebSocket server on port 3055 by default and can auto-increment if that port is in use.

FIGMA_BRIDGE_PORT=3055

Troubleshooting

If the plugin cannot connect, verify the MCP server is running and that the port matches the plugin configuration. Restart the plugin, then use Reconnect in the plugin UI. If a port is already in use, the server will try ports 3055–3070; you can force a specific port by setting FIGMA_BRIDGE_PORT before starting the server.

Common timeout issues occur after 30 seconds for commands; large exports may take longer. Ensure the plugin remains connected (green status) while performing operations.

Notes on usage and capabilities

The bridge provides full Figma API access, including styles, variables, auto-layout, boolean operations, and more. You can perform creation, updates, queries, navigation, export, and styling operations through a comprehensive set of commands described in the command reference.

Security and permissions

Only enable permissions you trust and limit access to your Claude instances. If you enable automatic tool approvals, ensure you follow your organization’s security guidelines.

Notes on tools and commands

The following commands are available to query and manipulate Figma documents: get context, list pages, get nodes, get local styles, get local variables, get children, search nodes, search components, search styles, create shapes (rectangle, ellipse, line, frame, text), clone nodes, create component, create instance, set fills, set strokes, set text, set opacity, set corner radius, set effects, apply style, set variable, set auto layout, set layout align, move nodes, resize nodes, delete nodes, group/ungroup, rename node, reorder node, set constraints, set selection, set current page, export node, detach instance, and more. Each operation is designed to be efficient for real-time AI workflows and supports token-optimized queries and traversal.

Example environment and tool options

Use the port and command examples shown to configure and start the MCP bridge alongside Claude. If you need to run multiple Claude Code instances with separate Figma files, you can run separate MCP servers on different ports and connect each instance to its own port in the plugin UI.

License

MIT license.

Available tools

figma_get_context

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

figma_list_pages

List all pages in the current Figma document.

figma_get_nodes

Get detailed information about specific nodes by their IDs.

figma_get_local_styles

List all local styles defined in the document.

figma_get_local_variables

Get all local variables and variable collections.

figma_get_children

Get immediate children of a node to browse hierarchy.

figma_search_nodes

Search for nodes by name within a scope to find frames/elements.

figma_search_components

Search local components by name.

figma_search_styles

Search local styles by name.

figma_create_rectangle

Create a new rectangle node.

figma_create_ellipse

Create an ellipse or related shapes.

figma_create_line

Create a line element.

figma_create_frame

Create a frame container with optional auto-layout.

figma_create_text

Create a text node.

figma_clone_nodes

Clone (duplicate) nodes.

figma_create_component

Create a reusable component.

figma_create_instance

Create an instance of a component.

figma_set_fills

Set fill colors on a node.

figma_set_strokes

Set stroke colors on a node.

figma_set_text

Set text content on a text node.

figma_set_opacity

Set node opacity.

figma_set_corner_radius

Set corner radii for a node.

figma_set_effects

Set visual effects like shadows and blurs.

figma_apply_style

Apply a local style to a node.

figma_set_variable

Set a variable value or bind to a node property.