Log inSubmit server
Figma MCP Bridge logo

Figma MCP Bridge

Write to a live Figma canvas, inspect rendered results, and undo agent changes through MCP.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Figma MCP Bridge

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "figma-mcp-bridge": {
      "command": "npx",
      "args": [
        "-y",
        "@kolganovr/figma-mcp-bridge"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

We couldn’t confirm it starts correctly

We ran the install command but it didn't respond within our test window — this can mean a slow first-time install rather than a real problem.

npx -y @kolganovr/figma-mcp-bridge

Process exited before answering initialize.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked 7d ago.

Overview

The figma-mcp-bridge MCP server connects AI agents to a live Figma document through a Figma Desktop plugin. It exposes tools for executing JavaScript in Figma’s sandbox, reading and rendering nodes, inserting components or SVG, managing variables, and rolling back writes. The server uses MCP over stdio and a WebSocket connection to the plugin, while optional Figma REST access adds cloud-file tools. Reach for it when an agent needs to create or modify designs, inspect the visual result, and recover from mistakes.

Use cases

  • Create Figma layouts from agent-generated JavaScript
  • Inspect a live canvas before modifying it
  • Capture changed nodes for visual review
  • Insert components and SVG assets into Auto Layout
  • Undo an agent write without reverting unrelated work

Key features

  • Live Figma canvas reads and writes
  • Sandbox JavaScript execution with optional screenshots
  • Token-budgeted document inspection
  • Component, SVG, variable, and layout operations
  • Checkpoint-based rollback
  • Optional cloud-file rendering and metadata access

Tools18

What Figma MCP Bridge lets your agent do. Expand a tool for its parameters.

Self-reported~457 tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 1d ago

Recent health check succeeded.

4/4 checks healthy over the last 41d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 13d ago via OSV.dev · @kolganovr/figma-mcp-bridge (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars2Stargazers on the source repository.
npm downloads171Package downloads in the last 30 days.
Last commit7d agoMost recent push to the default branch.
Install checkInconclusiveDidn't respond in our test window — often a slow first install.
Tools exposed18Callable tools this server registers over MCP.
Directory activity7 viewsConfig copies, upvotes, and views on AllMCPs.

How Figma MCP Bridge works

What figma-mcp-bridge MCP server does

The figma-mcp-bridge MCP server gives an AI client read and write access to a Figma canvas that is open in Figma Desktop. Its central write path, figma_execute_code, runs JavaScript in Figma’s plugin sandbox and can return a rendered PNG when the call requests capture. The execution context includes Figma’s figma API plus bridge helpers such as ensureFont, getFreePosition, progress, and bridge.

Read operations cover both the current canvas and selected objects. The server can return a compact JSX-like tree, JSON, or a more detailed representation, with budget_tokens available to constrain responses. Other live-canvas tools expose selection geometry, layout bounds, component search, variable collections, screenshots, and theme-mode changes.

Write-oriented helpers cover common design tasks without restricting an agent to a fixed set of primitive commands. Agents can instantiate components or variants, apply text overrides, place instances in Auto Layout, insert SVG with proportional scaling, and roll back a previous write checkpoint.

How it works

An AI client communicates with the Node.js server through MCP over stdio. The server maintains a WebSocket connection on port 8765 to the imported Figma plugin, which executes commands in the open document and returns results. This arrangement supports live-canvas operations without requiring a cloud API token.

The figma-mcp-bridge MCP server can capture the nodes changed by a write instead of returning only a success response. figma_screenshot can also render selected node IDs or the current selection. Write calls create checkpoints, allowing figma_rollback to remove nodes created by a call and restore tracked property changes. Deletions that can no longer be recovered are reported rather than silently reconstructed.

For longer operations, the server supports asynchronous execution and a job identifier that can be checked with figma_job_status. Multiple connected Figma documents can be discovered with figma_list_targets, allowing calls to select a target document where supported.

Setup and configuration

Run the installer with npx @kolganovr/figma-mcp-bridge, or clone the repository and run node install.mjs. The installer copies the server and plugin files and registers the MCP server in detected client configurations.

In Figma Desktop, import figma-plugin/manifest.json through the development-plugin menu and launch Antigravity Bridge. A green CONNECTED status indicates that the plugin has connected. Restart the AI client after installation so it loads the registered tools. The included --doctor option checks the installation.

Live-canvas tools do not need a Figma token. To enable cloud access for unopened files, start the installer with the --token option and provide a personal access token. The cloud-oriented tools include get_file, get_image, get_styles, and get_comments; without a token, these tools are not registered.

Tools and capabilities

The exposed capabilities include:

  • Execute sandbox JavaScript, optionally capture changed nodes, run asynchronously, and target a connected document.
  • Read the live document in JSX, tree, or JSON form with a token budget.
  • Capture PNG screenshots, search cached components, and insert component instances or SVG.
  • Inspect variables, styles, comments, selection details, and canvas layout.
  • Switch variable modes on a frame or page and poll background jobs.
  • Render cloud-file nodes to PNG, SVG, or PDF when cloud access is configured.

The bridge also supports persistent sandbox modules through its bridge helper, so reusable code can be defined for later execution calls rather than recreated in every function scope.

Limitations and notes

The figma-mcp-bridge MCP server depends on Figma Desktop and its imported development plugin for live-canvas operations. It is therefore not a standalone remote Figma service. Cloud-file access is a separate, optional path and requires a personal access token; the live document tools do not.

The server communicates with the plugin over the configured local WebSocket endpoint and uses Node.js as its runtime. Screenshot responses can contain image data, so callers should account for response size even though capture can be limited to changed or selected nodes. Rollback tracks writes made through its checkpoint mechanism; changes that are deleted or otherwise unavailable cannot necessarily be restored.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Figma MCP Bridge

figma-mcp-bridge is an MCP server that connects AI agents to a live Figma canvas through a Figma Desktop plugin. Its main tools execute JavaScript, read the live document, capture screenshots, find components, insert instances or SVG, manage variables, and roll back write operations.

Install it with `npx @kolganovr/figma-mcp-bridge`, or clone the repository and run `node install.mjs`. Then import the included plugin manifest into Figma Desktop, launch the development plugin, and restart the AI client.

Yes, figma-mcp-bridge supports Cursor configuration through its installer. After the server and Figma plugin are set up, restart Cursor so it loads the registered MCP tools.

No, live-canvas tools work without a token. A personal access token is required only for optional cloud access to unopened files and related REST-backed tools such as file, image, style, and comment operations.

Call `figma_rollback` with the checkpoint ID returned by the write operation. The server removes nodes created by that call and restores tracked property changes, while reporting IDs that are no longer recoverable.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewFigma MCP Bridge AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/figma-mcp-bridge?style=directory)](https://allmcps.com/mcp/figma-mcp-bridge)
HTML Embed
<a href="https://allmcps.com/mcp/figma-mcp-bridge"><img src="https://allmcps.com/api/badge/figma-mcp-bridge?style=directory" alt="Figma MCP Bridge on AllMCPs" /></a>