Figma Bridge Mcp

io.github.nguyendinhphongdxPublished by GitHub account nguyendinhphongdxv2.6.1Updated Nov 11, 2026

Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back

The publisher's own server: Figma MCP Server

VerifiedSTDIODesktop onlyDeveloper ToolsMedia & Design

Overview

AI-generated overview

Bridges an AI assistant to the Figma Desktop document you have open, letting it draw UI on the canvas and read designs back as data and code.

What you can do
  • Check connection status, active file, page and plugin sessions
  • Load the figma.* API reference and a design-rule sheet for tokens, styles and components
  • Create and modify design content by running JavaScript in a sandbox: frames, text, vectors, images, components, variables, styles and prototype reactions
  • Extract design data: node trees, resolved tokens, CSS, component maps, screenshots and SVG/PNG exports
  • Search and scan nodes by type, name, color, font or size, and target a specific open file by session
When to use it
Useful when you work in Figma Desktop and want an assistant to generate or iterate on layouts, apply an existing design system, or turn a selected frame into code such as Tailwind, React or Swift.
Requirements
Runs locally as a Node.js process, typically via npx, over stdio; Figma Desktop is required because the web app cannot reach localhost. A companion Figma plugin must be imported from its manifest and run inside Figma Desktop. No Figma API key or account credentials are declared. Optional environment variables set the bridge port, bind address, long-poll duration and private-fetch allowance.
Before you install
The bridge has no login, so anyone who can reach the port can drive it; keep the default loopback bind address. figma_write executes JavaScript in a Node vm sandbox that is not a process boundary, so untrusted code should not be run. Write operations create, modify and delete nodes in your Figma document, and loadImage/loadIcon fetch external URLs.

Installation

In SourceWeft

  1. Open Figma Bridge Mcp in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

README

[figma-bridge-mcp — Bridge MCP for Figma]

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.

[npm] [CI] [Node] [MCP Registry] [License: MIT]

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.

✍️ WriteThe AI runs JavaScript against a figma.* API to create frames, text, vectors, components, variables, prototypes.
👀 ReadThe AI extracts node trees, resolved design tokens, CSS, component maps and screenshots — ready for design-to-code.
🔒 LocalThe bridge listens on 127.0.0.1 only. Nothing leaves your machine.
🧩 Any MCP client✅ Tested with Claude Code and Antigravity. 🔧 Compatible with Cursor, VS Code, Windsurf, Zed and any stdio MCP client.

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.

mermaid
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.

mermaid
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 Code
bash
claude mcp add figma-bridge-mcp -- npx @hanoilab/figma-bridge-mcp          # this projectclaude mcp add --scope user figma-bridge-mcp -- npx @hanoilab/figma-bridge-mcp   # all projects
Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

json
{  "mcpServers": {    "figma": { "command": "npx", "args": ["-y", "@hanoilab/figma-bridge-mcp"] }  }}
Cursor

Edit .cursor/mcp.json (project) or ~/.cursor/mcp.json (global) with the same mcpServers block shown for Claude Desktop.

VS Code / GitHub Copilot

Edit .vscode/mcp.json, or add to settings.json:

json
{  "mcp": {    "servers": {      "figma": { "command": "npx", "args": ["-y", "@hanoilab/figma-bridge-mcp"] }    }  }}
Windsurf

Edit ~/.codeium/windsurf/mcp_config.json with the same mcpServers block shown for Claude Desktop.

Antigravity (Google)

Agent panel "…" menu → Manage MCP Servers → View raw config, then add the same mcpServers block to mcp_config.json.

From source
bash
git clone https://github.com/nguyendinhphongdx/figma-bridge-mcpcd figma-bridge-mcp && npm install# point your MCP client at: node /path/to/figma-bridge-mcp/server/index.js

Restart your client after editing its config. MCP servers load only at startup.

2 · Install the Figma plugin

  1. ⬇ Download the plugin and unzip it anywhere.
  2. In Figma Desktop: Plugins → Development → Import plugin from manifest… and pick manifest.json.
  3. Run Plugins → Development → Bridge MCP for Figma.

The plugin window shows a green dot once it reaches the server.

3 · Connect and design

Tell your assistant:

"Connect to figma-bridge-mcp"

It calls figma_status and confirms the file, page and plugin version. Then just describe what you want:

"Draw a mobile login screen with Apple and Google sign-in buttons."

mermaid
flowchart LR  P["Your prompt"] --> D["figma_docs<br/>load API + design rules"]  D --> R["figma_read<br/>inspect the canvas"]  R --> W["figma_write<br/>draw / modify"]  W --> S["figma_read screenshot<br/>verify"]  S -->|"needs fixes"| W  S -->|"looks right"| Done(["Done"])
Prompt ideas and tips
PromptWhat happens
"Draw a mobile login screen with social buttons"A 390×844 frame with inputs and buttons
"Read the selected frame and describe the design"Colors, typography, spacing from your selection
"Convert my selected frame to Tailwind"Reads the node tree, generates code
"Create a dark dashboard with KPI cards"A full layout with stats and charts
"Take a screenshot of the current frame"An inline image the AI can analyze
  • Name the style (dark, glassmorphism, minimal white) and the platform (mobile 390×844, tablet 768×1024, desktop 1440×900).
  • Iterate: "make the buttons bigger" works on existing nodes — the AI reads before it modifies.
  • Use selection: select a frame, then ask "improve this design".

Updating

bash
npx @hanoilab/figma-bridge-mcp@latest --version   # prints the new version and the plugin path

Restart your client, then re-import manifest.json from the printed path (Plugins → Development → Manage plugins in development). The Figma plugin does not auto-update. Run figma_status and check that pluginVersion matches.

Tools

The server exposes five MCP tools.

ToolPurpose
figma_statusConnection check, active file/page, sessions. Call first.
figma_docsThe full API reference and design rules. Call before drawing.
figma_writeRun JavaScript against the figma.* API to create or change the design.
figma_readExtract design data: trees, tokens, CSS, components, screenshots.
figma_rulesOne markdown rule sheet: color tokens, text styles, variables, components. Call once per session.

Design to code

mermaid
flowchart LR  F["Select a frame<br/>in Figma"] --> A["get_design_context<br/>layout · tokens · typography"]  F --> B["get_css<br/>ready-to-paste CSS"]  F --> C["get_component_map<br/>instances + import paths"]  A --> AI(["AI generates<br/>React · Vue · Swift · Tailwind"])  B --> AI  C --> AI

figma_write — 47 operations

Code runs in a sandbox with the figma object; each call is isolated, so re-query node IDs at the start of every call.

js
const root = await figma.create({  type: "FRAME", name: "Dashboard", width: 1440, height: 900, fill: "#0f172a",});const sidebar = await figma.create({  type: "FRAME", name: "Sidebar", parentId: root.id,  width: 240, height: 900, fill: "#1e293b", stroke: "#334155", strokeWeight: 1,});await figma.create({  type: "TEXT", parentId: sidebar.id, x: 20, y: 24,  content: "My App", fontSize: 16, fontWeight: "SemiBold", fill: "#f8fafc",});
AreaOperations
Nodescreate (FRAME, RECTANGLE, ELLIPSE, LINE, TEXT, SVG, VECTOR, IMAGE) · modify · delete (single or ids: []) · query · append · clone · group / ungroup · flatten · resize · batch (up to 50 ops)
Pages & viewstatus · listPages · setPage · createPage · set_selection · set_viewport
ComponentslistComponents · createComponent · instantiate (with per-layer overrides) · setComponentProperties · swapComponent · addComponentProperty · bindComponentProperty · unbindComponentProperty · removeComponentProperty
Tokens & stylessetupDesignTokens (colors, numbers, fonts, text styles, modes in one idempotent call) · variable collections / modes / values · applyVariable · applyTextStyle · setFrameVariableMode · createPaintStyle · createTextStyle
Images & iconsloadImage(url) · loadIcon(name) · loadIconIn(name) — server-side, with a 7-library icon fallback (Ionicons → Fluent → Bootstrap → Phosphor → Tabler → Lucide)
PrototypingsetReactions / removeReactions (click, hover, press → navigate, overlay, swap; Smart Animate and more) · setScrollBehavior
Styling properties on create / modify
PropertyExample
Solid fill"#6C5CE7", "#6C5CE780" (8-digit hex) or "rgba(108,92,231,0.5)"
Gradient{ type: "LINEAR_GRADIENT", angle: 135, stops: [{ pos: 0, color: "#7C3AED" }, { pos: 1, color: "#EC4899" }] } (also RADIAL_GRADIENT)
CornerscornerRadius: 12 or topLeftRadius / topRightRadius / bottomLeftRadius / bottomRightRadius
Effects[{ type: "DROP_SHADOW", color: "#00000026", offset: {x:0,y:8}, radius: 24 }] — also INNER_SHADOW, LAYER_BLUR, BACKGROUND_BLUR
Vector pathd: "M 150 7 A 143 143 0 1 1 29.26 226.62" — SVG arcs are converted to Béziers
Insert positioninsertIndex: 2 places the node at an exact index in its parent

applyVariable binds FLOAT, COLOR, STRING and BOOLEAN variables to fills, strokes, geometry, corner radii, auto-layout spacing, typography, font family/style, text content and visibility.

figma_read — 19 operations

OperationReturns
get_selection · get_design · get_page_nodesNode trees for the selection, a frame/page, or the top-level frames
get_design_contextAI-optimized payload: flex layout, token-resolved fills as var(--name), typography with style names, component instances
get_component_map · get_unmapped_componentsEvery instance with set name, variant label and suggested import path; instances with no code mapping yet
get_node_detailOne node's properties with variables and styles resolved to names and values, plus a full list of instance overrides
get_cssA ready-to-use CSS string for a node
screenshot · export_image · export_svgInline PNG, base64 PNG/JPG (format, scale), or SVG markup
get_styles · get_variables · get_local_components · get_viewportLocal styles, design tokens (all modes), components, viewport
getReactions · getComponentPropertiesPrototype interactions of a node; variant, boolean, text and instance-swap properties of a component or instance
search_nodes · scan_designFind nodes by type, name, color, font, size; progressive scan of large files

Hidden layers are skipped by default; pass includeHidden: true to get_selection, get_design, search_nodes or scan_design to include them.

Working with an existing design system

Read before you draw, then bind to what exists:

js
const vars = await figma.get_variables();const varMap = {};vars.collections.forEach(c => c.variables.forEach(v => { varMap[v.name] = v.id; }));
const card = await figma.create({  type: "FRAME", name: "Card", width: 360, height: 200,  layoutMode: "VERTICAL", paddingTop: 16, paddingLeft: 16, paddingBottom: 16, paddingRight: 16, itemSpacing: 12,});await figma.applyVariable({ nodeId: card.id, field: "fill", variableId: varMap["bg-surface"] });await figma.applyVariable({ nodeId: card.id, field: "cornerRadius", variableId: varMap["radius-md"] });

Prefer figma.instantiate({ componentId, parentId, overrides }) over redrawing existing components, and pin frames to a mode with setFrameVariableMode to preview Light and Dark side by side. The complete reference is one figma_docs call away.

Security model

The bridge has no login, so access is controlled at the network edge, and figma_write code is treated as having your user's trust level.

mermaid
flowchart LR  R["HTTP request"] --> O{"Origin missing<br/>or 'null'?"}  O -->|no| X1["403 — web page"]  O -->|yes| H{"Host is<br/>loopback?"}  H -->|no| X2["403 — DNS rebinding"]  H -->|yes| A{"Operation on<br/>the allowlist?"}  A -->|no| X3["400"]  A -->|yes| Q["Queued for the plugin"]
LayerProtection
NetworkBinds 127.0.0.1 only. Requests carrying a web-page Origin or a non-loopback Host get 403, so a site you have open cannot drive the bridge.
AllowlistOnly the 66 named operations are accepted, on the MCP path and on /exec.
Sandboxfigma_write runs in a Node vm context that receives no host objects — only strings cross the boundary — and has no require, process, fs or fetch. It is hardened against the known constructor escape, but vm is not a process boundary: do not run code you do not trust.
Outbound fetchloadImage / loadIcon fetch only public http(s) URLs; private, loopback and link-local targets are blocked, including after redirects.
SessionsA pinned sessionId that is not connected is an error, never a silent fallback to another file.
Limits5 MB request body · 30 s sandbox execution · 60–90 s per plugin operation.

Found a vulnerability? See SECURITY.md.

Configuration

VariableDefaultPurpose
FIGMA_MCP_PORT47451Bridge port. If taken, the next 9 ports are tried.
FIGMA_MCP_HOST127.0.0.1Bind address. Changing it exposes an unauthenticated bridge — avoid.
FIGMA_MCP_LONG_POLL_MS8000How long an idle poll is held open.
FIGMA_MCP_ALLOW_PRIVATE_FETCHunsetSet to 1 to let loadImage reach private/loopback hosts (e.g. a local asset server).

Troubleshooting

SymptomFix
Plugin not connectedRun the plugin in Figma Desktop (Plugins → Development → Bridge MCP for Figma). The web app cannot reach localhost.
Tools missing in the AI clientRestart the client fully after editing its MCP config.
Green dot never appearsCheck nothing else holds port 47451, or set FIGMA_MCP_PORT and re-import the plugin.
Every port in 47451–47460 is "in use"Find the owner with netstat -ano | findstr :47451. If it is a leftover process of yours, free the port with npx -y kill-port 47451 (it kills whatever holds the port, so check first), or choose another with FIGMA_MCP_PORT.
Plugin and server versions differRe-import manifest.json after upgrading; the plugin does not auto-update.
Session "…" is not connectedThe targeted Figma file is closed or its plugin stopped. Open it, or omit sessionId to use the active file.
variable is not defined in figma_writeEach call is isolated. Re-query node IDs at the start of every call.
Icon "…" not foundUse Ionicons names in kebab-case (notifications, chevron-back, lock-closed).

Project layout

text
figma-bridge-mcp/├── server/                 npm package: MCP server + bridge│   ├── index.js            MCP entry (stdio) and tool handlers│   ├── bridge-server.js    HTTP bridge: long-poll, sessions, origin gate│   ├── code-executor.js    sandbox for figma_write│   ├── figma-proxy.js      the figma.* API seen by user code│   ├── http-fetch.js       guarded fetch for images and icons│   ├── allowed-ops.js      operation allowlist│   └── docs/               reference served by figma_docs├── src/plugin/             plugin source (plain files, concatenated)├── plugin/                 manifest.json, ui.html, code.js (generated)└── scripts/                build, test runner, regression tests

Development

bash
npm installnpm run build:plugin    # src/plugin/*.js  →  plugin/code.js  (generated — never edit by hand)npm test                # every scripts/test-*.mjs; no live Figma needed

Plugin files share one scope when concatenated; their order lives in scripts/lib/plugin-files.mjs. See CLAUDE.md for the invariants worth knowing before you change anything.

Releasing: bump version in package.json, rename the top CHANGELOG.md heading to ## [x.y.z] — date, push to main. CI runs the tests, publishes to npm, tags the commit, creates a GitHub Release with the plugin zip attached, and updates the MCP Registry.

License

MIT © nguyendinhphongdx. Forked from TranHoaiHung/figma-ui-mcp; the original copyright notice is preserved in LICENSE.

Source: README.md at commit 8212237

Tools

0
SourceWeft has not started this package in its sandbox yet, so its tools are not known.

Version history

1
  1. v2.6.1LatestNov 11, 2026

Score

50% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 days25 pts

    Keep the endpoint answering the MCP handshake; SourceWeft probes it every 30 days.

  • Auth declared10 pts

    Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.

  • Tools listed15 pts

    Answer tools/list without a credential, or ship a package that starts in a sandbox without one.

  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts

Other Figma integrations

Figma MCP Server

com.figma.mcpOfficial publisher

Figma's remote MCP server that gives AI coding agents design context from Figma files so they can generate and update code.

Streamable HTTPWeb executableAuth
Developer ToolsCredential requiredOct 24, 2026

FigmaMCP

Published by GitHub account MrCoder

A local Mac MCP server that lets Claude Code or Codex read and edit the Figma file you have open, through a Figma plugin.

STDIODesktop only
Developer ToolsNot validated yetNov 13, 2026

Figma Vector MCP

Published by GitHub account workingmodel

Local MCP server plus Figma plugin that lets an assistant create and edit fully editable vector nodes, shapes, text and components on the Figma canvas.

STDIODesktop only
Developer Tools58 toolsOct 30, 2026

Figma CodeKit MCP

Published by GitHub account Mehmoodqureshi

Converts a Figma frame into HTML, React or Next.js code and pixel-diffs the rendered result against the design until it converges.

STDIODesktop only
Developer Tools3 toolsNov 7, 2026

figma-mcp

Published by GitHub account Mehmoodqureshi

Converts a Figma frame into deterministic HTML, React or Next.js code, then renders it in Chromium and pixel-diffs it against the design until it converges.

STDIODesktop only
Developer ToolsNot validated yetOct 24, 2026