Writable Figma MCP Bridge (Figma-Konnektor)

Stellt jedem MCP-kompatiblem KI-Client einen universellen Schreibkanall bereit, um inerhalb de Figma-Sandbox belibiges JavaScript auszuführen — lokall, ohne Cloud-Dienst, standardmä is nur auf diesem Rechner errechbar.

Geeig met dün die meisten Desktopp-KI-Assen; nach Anbindung über das Standart MCP-Prokotok können her Figma-ateien gelesen und geschrieben werden.

🌐 Spprache: 中文 ｜ English

1. Einzeifüung

Der Figma-Konnektor ist ei Kombo from einem lokalen MCP-Dienst + Figma-Plugin, mit dem jeder Deesktopp-KI-Assenent über dasstandart-MCP-Protook die gerade bearbeitete Figma-Datei lesen und modifizieren kann. Dier geamie Kette lüftg auf deinem Rechner (127.0.0.1) and is von keiner äußrene API od er Cloud-Dienst abhängig.

Das Design-Prinzip lautet: „Lokall, auditierbar" – die geamie Kette läuftg auf deiner Maschine (127.0.0.1), without ausßre API-Syields oder OAuth, k He and vollständij auditerbar.

Related MCP server: Local Figma MCP Bridge

2. Kernfunktion

• Beschreibbare MCP-Brücke: M₁⁵-CAp‑assets beiw as vertrauenswürdeiges schreib-Zugang offered.

• Sicher Schreibvorgänge: Before jed-ein Task wer den nodes in a Momentaufnahme; at failure, the created node s of this task versions automatically zoommeroll.

• Design-System zuerst: Die eingebaut an helpers (Design-System-Index, Component-Import, Variable-arning, Styl-Anwendung usw.) verfüiden hart-oedierte Werte.

• Statusansicht: Das Panel zeight in Echtzeit die Zustände „Oartend auf Task / AI liest / AI schreibt" (Blau = Schreiben, Grün = Lesa).

• Zielflit (Aim): Jede Link-Bringt ein -Ziel node: ein Klick egoesprungen, auto-gerunt und auswählt.

• Duplitat-Hinweis: Wenn ein bereits vorhandener Link eingefügt wird, wir d** in deig inserted Hinweis „Der Link existiert bereits" angezeigt.

“ On with an existing link on the bottom a hint appears.

• Multi-Plugin-Schutz: GET /health list all polling windows; with FIGMA_WRITER_STRICT=1 you can force single-window exclusive to avoid writing to the wrong file in multiple windows.

3. Funktionsweise

AI 客户端 (Claude / WorkBuddy)
        │  MCP (http://localhost:8788/mcp)
        ▼
本地 MCP 服务 (server.mjs)  ── 任务入队
        │
        ▲ 轮询 GET /plugin/job
        │
Figma 插件 (code.js 运行在 Figma 沙箱)  ── 在 Figma 内执行读/写
        │ 结果 POST /plugin/result
        ▼
本地 MCP 服务  ── 把结果回传给 AI

1 . Die KI ruft den Server via MCP auf (http://localhost:8788/mcp). 2 . Der Server stellt laufg in waiting waiting. 3 . Das Figma-Plugin polls /plugin/job, picks up the task and executes it in Figma (only currently open file is allowed). 4 . Das Plugin sends the result back to the AI via POST /plugin/result.

️ Die tatsächliche Lese-/Schreibegrenze ist «den aktuell in Figma geefonte Dokum ent». The a link der im Panel ausgewnählt ist, markiert nur „welche akts angegeben: "Dialog ever Filer" und wird to Serve / KI gemeldet; sind die bei nicht konform, bleibt the Reale Lese-/schreibarget immer the aktuelle öounte Datei.

4. Systemvoraussetzungen

• Node.js ≥18 (necessary run the local server; local download install)

• Figma Desktop (Web-Version unterstützt keine lokalen Plugin/ dev-modus)

• Keineatei, API-Key, kein OAuth, King, ine Ginternetverbindung (Dienst heard at http 127.0.0.1)

5. Schnellstart

1. local server launching

Methode A: Command line (recommended, easy to see logs)

cd writable-figma-mcp-bridge
node server.mjs

Method B: Double-click launcher

• on macOS: Double-klicken on start.command in the repository

• on Windows: double-click on start.batt

The script starts node server.mjs as minimized in background, no need model command. Prerequisite: Node.js on this machine installed. Aft DebService 127.0.0.1:8788 starts, only local accessible, standard ( Word exposing the only figma_run_js exposed.

2. Manually in Figure manually) **(Importnant)

Figma plugin need manuell from this Repo (root import manifest.json. Steps:

1. Öffnen Sie die Figma-Desktop-App (unterstraft macOS and localStorage).

2. Öffnen the twoa= analysis beliebige=Figma Dateria.

3. Obere Mène "View: Plugins（插件） → Development（开发） → Import plugin from manifest…（从清单导入插件…）.

4. Wählen Sie im Dateidialog das manifest.json des-Repository (unter writeable-figma-mcp-bridge/ist.json).- – – –.

5. Menu Plugins（插件） → Development（开发） → Writable Figma MCP Bridge Augeführen.

6. In panel click on „Start" and connect to local service.

So lange „Start" visible and state „Wartend auf Task…" shows, is the plugin gekoppelt. Since all read/write tasks in this current opened Document running are.

3. MCP Client (Konfigurierung of Conecton)

In normal cases, start after server is all system no other config needed.

If not, configure MCP in your Client manually (set URL address to the actual address/ate actually):

{
  "mcpServers": {
    "figma-writer": {
      "type": "http",
      "url": "http://localhost:8788/mcp"
    }
  }
}

Default port 8788. If it is occupied, the service automatically takes the next port; the start log shows it. If the URL port changes to the actual port, take it.

6. Funktion

Link-Mangement

• Top enter the Figma link (can paste in that input), press "Add" to insert to the list.

• Each entry can be selected as but current active link (part of polling to report to server), and has aim target.

• If you paste an existing link, the bottom edge slides into "curve already constructed" appears.

Aim (Aimel) "Sight" (Aim) – hold it (Aim)

On each "Sign right right", there is a crosshair. It parses node-id via link and target sequence to the node in the diagram, automatically center zoom and selects. If the link points to altreist (the node in current opened document cannot be found), shows the clear hint "Link could be to another file".

Status - indicator

The status dot at top-right changes with task:

• Gray/ "Wartethen Task…": idle

• Blue/ "KI–is currently writing…": detected a writing access

• Green/ "KI–is reading…": detected a read opération

Auto–Rollback

Before figma_run_js documents a snapshot; if execution throws, it deletes all created nodes and reports number of rollbacks. On existing nodes the changes are not rolled back (use Figma-Cmd/Ctrl+Z).

7. Security

8. Environment variables

9. Available helpers (innerhalb den figma_run_js vorhandenen)

figma_run_js in itself: figma (Figma API), args (structural parameter), and helpers (safer neuts).

• helpers.loadFontNameName)

• helpers.ensureFontFolded(textNode, fallbackFontName)

• helpers.paint (value, theme) / helpers.spToRgb(hex) / helpers.rgbToHex(rgb)

• helpers.normalizeHex(value, theme)

• helpers.findVariable (nameOrKey, var) wait, missing? Let's: helpers.findVariable(nameOrKey,rolvedType) okay.

• helpers.indexDesignSystem(options)

• helpers.cloneReferenceNode(selector, options)

• helpers.importComponentByName(nameOrKey, options)

• helpers.applyTextStyle(textNode, styleName)

• helpers.applyPaintStyle(node, styleName, field)

• helpers.bindVariable(node, field, variableName, fallbackValue, resolvedType)

• helpers.bindFillVariable (node, variableName, fallbackValue) / helpers.bindStrokeVariable(...)

• helpers.findNodes(selector) / helpers.getNode(id)

• helpers.summarizeNode(node, depth) / helpers.inspectNodeAppearance(node)

• helpers.validateCanvas(options)

In the code of figma_run_js you should avoid optional chaining?. and nullish coalescing??, because Figma plugin at Runtime may refuses.

11L-Lizenz

MIT License.