io.github.nguyendinhphongdx/figma-bridge-mcp

Let AI draw on your Figma canvas — and read your designs back as code.

A bidirectional Model Context Protocol bridge for Figma Desktop.
No Figma API key. No cloud. Everything runs on localhost.

Quick start · How it works · Tools · Security · Troubleshooting · Changelog

Not affiliated with, endorsed by, or sponsored by Figma, Inc. "Figma" is a trademark of Figma, Inc., used here only to describe compatibility.

Overview

figma-bridge-mcp connects an AI assistant to the document you have open in Figma Desktop.

Requires Figma Desktop. The plugin talks to the server over localhost, which Figma's web app does not allow.

How it works

Three parts cooperate: your AI client, the MCP server (Node), and the Figma plugin (inside Figma Desktop). The plugin polls the server, so no inbound connection to Figma is ever needed.

flowchart LR
  subgraph Client["AI client"]
    A["Claude Code · Cursor · Windsurf<br/>VS Code · Antigravity · any MCP client"]
  end
  subgraph Server["figma-bridge-mcp  (Node)"]
    B["MCP server<br/>5 tools · stdio"]
    C["Code sandbox<br/>runs figma_write code"]
    D["HTTP bridge<br/>127.0.0.1:47451"]
  end
  subgraph Figma["Figma Desktop"]
    E["Plugin UI<br/>long-poll client"]
    F["Plugin main thread<br/>66 operations"]
    G[("Figma document")]
  end
  A <-->|"MCP / stdio"| B
  B --> C
  C --> D
  B --> D
  D <-->|"HTTP long-poll"| E
  E <-->|postMessage| F
  F <--> G

One round trip

The server holds each poll open for up to 8 s and answers the moment work is queued, so latency is typically under 100 ms.

sequenceDiagram
  autonumber
  participant AI as AI client
  participant S as MCP server
  participant B as Bridge :47451
  participant P as Figma plugin
  AI->>S: figma_write { code }
  S->>S: run code in sandbox
  S->>B: queue operation (create, modify, …)
  P->>B: GET /poll  (held up to 8 s)
  B-->>P: operations
  P->>P: apply to the Figma document
  P->>B: POST /response { id, data }
  B-->>S: resolve operation
  S-->>AI: result + logs

Several Figma files at once

Each open plugin instance registers its own session. Pass the optional sessionId to figma_write / figma_read to target a specific file; if that session is not connected the call fails instead of writing into another file.

Quick start

1 · Add the MCP server to your client

claude mcp add figma-bridge-mcp -- npx @hanoilab/figma-bridge-mcp          # this project
claude mcp add --scope user figma-brid

... [View full README on GitHub](https://github.com/nguyendinhphongdx/figma-bridge-mcp#readme)