Figma Bridge Mcp

io.github.nguyendinhphongdx由 GitHub 账号 nguyendinhphongdx 发布v2.6.1更新于 Nov 11, 2026

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

发布方自己的服务：Figma MCP Server

已验证STDIO仅桌面开发者工具媒体与设计

服务详情

标识符: io.github.nguyendinhphongdx/figma-bridge-mcp
传输: STDIO
运行时: Desktop only
信任: Verified
发布于: Nov 11, 2026

安全提示

MCP 服务会接收对话中的工具调用请求，并可能执行外部操作。启用前请先了解该服务能做什么，并只授予它所需的权限。

注册中心已验证此条目所属的 GitHub 账号 nguyendinhphongdx。这并不表明该账号就是产品方。

SourceWeft 的检查只涵盖条目是否完整、端点是否响应；不审查服务器的代码，也不审查其工具的行为。

在 README 中添加徽章

向读者展示该 MCP 服务已收录于 SourceWeft，徽章链接到本页。

[![Listed on SourceWeft](https://sourceweft.com/badge/mcp/io.github.nguyendinhphongdx%2Ffigma-bridge-mcp.svg)](https://sourceweft.com/mcp/io.github.nguyendinhphongdx%2Ffigma-bridge-mcp?utm_source=readme&utm_medium=badge)

概览

AI 生成的概览

把 AI 助手连接到你在 Figma 桌面版中打开的文档，让它直接在画布上绘制界面，并把设计读回为数据和代码。

可以做什么: 检查连接状态、当前文件、页面与插件会话
加载 figma.* API 参考以及颜色、文字样式、变量与组件的设计规则表
在沙箱中运行 JavaScript 来创建和修改设计内容：画框、文本、矢量、图片、组件、变量、样式与原型交互
提取设计数据：节点树、解析后的设计令牌、CSS、组件映射、截图以及 SVG/PNG 导出
按类型、名称、颜色、字体或尺寸搜索与扫描节点，并可通过会话指定某个已打开的文件
适用场景: 适合在 Figma 桌面版中工作、希望助手生成或迭代布局、套用现有设计系统，或把选中的画框转成 Tailwind、React、Swift 等代码的场景。
运行要求: 以本地 Node.js 进程通过 stdio 运行，通常用 npx 启动；必须使用 Figma 桌面版，因为网页版无法访问 localhost。需要在 Figma 桌面版中从 manifest 导入并运行配套插件。未声明需要 Figma API 密钥或账号凭据。可选环境变量用于设置桥接端口、绑定地址、长轮询时长和私有地址抓取开关。

安装前请注意

桥接没有登录机制，能访问该端口的人都能操控它，请保持默认的本地回环绑定地址。figma_write 在 Node vm 沙箱中执行 JavaScript，而 vm 不是进程边界，不要运行不可信的代码。写入操作会在你的 Figma 文档中创建、修改和删除节点，loadImage/loadIcon 会访问外部网址。

安装

在 SourceWeft 中

打开控制台中的 Figma Bridge Mcp，将其添加到工作区。
为需要使用其工具的对话启用该服务。

Desktop only，通过 STDIO。 STDIO 服务会启动本地进程，因此需要 SourceWeft 桌面宿主。

其他 MCP 客户端

参照仓库中的启动说明。

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.


✍️ Write	The AI runs JavaScript against a `figma.*` API to create frames, text, vectors, components, variables, prototypes.
👀 Read	The AI extracts node trees, resolved design tokens, CSS, component maps and screenshots — ready for design-to-code.
🔒 Local	The 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

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

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 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"] }  }}

{  "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"] }    }  }}

{  "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

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

⬇ Download the plugin and unzip it anywhere.
In Figma Desktop: Plugins → Development → Import plugin from manifest… and pick manifest.json.
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"])

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

Prompt	What 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

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.

Tool	Purpose
`figma_status`	Connection check, active file/page, sessions. Call first.
`figma_docs`	The full API reference and design rules. Call before drawing.
`figma_write`	Run JavaScript against the `figma.*` API to create or change the design.
`figma_read`	Extract design data: trees, tokens, CSS, components, screenshots.
`figma_rules`	One 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

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.

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",});

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",});

Area	Operations
Nodes	`create` (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 & view	`status` · `listPages` · `setPage` · `createPage` · `set_selection` · `set_viewport`
Components	`listComponents` · `createComponent` · `instantiate` (with per-layer `overrides`) · `setComponentProperties` · `swapComponent` · `addComponentProperty` · `bindComponentProperty` · `unbindComponentProperty` · `removeComponentProperty`
Tokens & styles	`setupDesignTokens` (colors, numbers, fonts, text styles, modes in one idempotent call) · variable collections / modes / values · `applyVariable` · `applyTextStyle` · `setFrameVariableMode` · `createPaintStyle` · `createTextStyle`
Images & icons	`loadImage(url)` · `loadIcon(name)` · `loadIconIn(name)` — server-side, with a 7-library icon fallback (Ionicons → Fluent → Bootstrap → Phosphor → Tabler → Lucide)
Prototyping	`setReactions` / `removeReactions` (click, hover, press → navigate, overlay, swap; Smart Animate and more) · `setScrollBehavior`

Styling properties on create / modify

Property	Example
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`)
Corners	`cornerRadius: 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 path	`d: "M 150 7 A 143 143 0 1 1 29.26 226.62"` — SVG arcs are converted to Béziers
Insert position	`insertIndex: 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

Operation	Returns
`get_selection` · `get_design` · `get_page_nodes`	Node trees for the selection, a frame/page, or the top-level frames
`get_design_context`	AI-optimized payload: flex layout, token-resolved fills as `var(--name)`, typography with style names, component instances
`get_component_map` · `get_unmapped_components`	Every instance with set name, variant label and suggested import path; instances with no code mapping yet
`get_node_detail`	One node's properties with variables and styles resolved to names and values, plus a full list of instance overrides
`get_css`	A ready-to-use CSS string for a node
`screenshot` · `export_image` · `export_svg`	Inline PNG, base64 PNG/JPG (`format`, `scale`), or SVG markup
`get_styles` · `get_variables` · `get_local_components` · `get_viewport`	Local styles, design tokens (all modes), components, viewport
`getReactions` · `getComponentProperties`	Prototype interactions of a node; variant, boolean, text and instance-swap properties of a component or instance
`search_nodes` · `scan_design`	Find 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:

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"] });

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"]

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"]

Layer	Protection
Network	Binds `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.
Allowlist	Only the 66 named operations are accepted, on the MCP path and on `/exec`.
Sandbox	`figma_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 fetch	`loadImage` / `loadIcon` fetch only public `http(s)` URLs; private, loopback and link-local targets are blocked, including after redirects.
Sessions	A pinned `sessionId` that is not connected is an error, never a silent fallback to another file.
Limits	5 MB request body · 30 s sandbox execution · 60–90 s per plugin operation.

Found a vulnerability? See SECURITY.md.

Configuration

Variable	Default	Purpose
`FIGMA_MCP_PORT`	`47451`	Bridge port. If taken, the next 9 ports are tried.
`FIGMA_MCP_HOST`	`127.0.0.1`	Bind address. Changing it exposes an unauthenticated bridge — avoid.
`FIGMA_MCP_LONG_POLL_MS`	`8000`	How long an idle poll is held open.
`FIGMA_MCP_ALLOW_PRIVATE_FETCH`	unset	Set to `1` to let `loadImage` reach private/loopback hosts (e.g. a local asset server).

Troubleshooting

Symptom	Fix
`Plugin not connected`	Run the plugin in Figma Desktop (Plugins → Development → Bridge MCP for Figma). The web app cannot reach `localhost`.
Tools missing in the AI client	Restart the client fully after editing its MCP config.
Green dot never appears	Check 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 differ	Re-import `manifest.json` after upgrading; the plugin does not auto-update.
`Session "…" is not connected`	The 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_write`	Each call is isolated. Re-query node IDs at the start of every call.
`Icon "…" not found`	Use 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

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

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.