Mokido

⚡ Mokido

MCP server for Figma design. Let an AI agent design in Figma — and actually see what it drew.

Formerly figma-mcp-bridge (@kolganovr/figma-mcp-bridge on npm). Old links redirect here.

A zero-dependency MCP server that gives coding agents read *and write* access to a live Figma canvas, then closes the loop by handing the rendered PNG back to the model for visual self-critique.

---

*One prompt, two screens: the agent reads your design system, builds them live in the file you have open, checks its own screenshot and fixes the layout. 56 seconds of real time, sped up.*

---

The problem

Coding agents are effectively blind inside Figma. Most Figma MCP servers are read-only — they flatten a design into text so a model can turn it into code, and the traffic stops there. The ones that *can* write are either gated behind a paid Figma seat with a monthly tool-call quota, or expose a fixed vocabulary of commands (create_rectangle, set_fill) that runs out the moment the task gets specific.

And none of them answer the question that actually matters after a write: did it look right? An agent that draws a card, gets back {"ok": true}, and moves on has no way to notice that its text overflowed, its contrast failed, or its frame landed on top of someone else's work.

This bridge closes that loop, and adds the safety rails an autonomous agent needs to be trusted with a real design file.

---

How it's different

The short version: Framelink is the best choice if you only want to turn an existing design into code. The official server is the safest choice if you're already on a paid Figma plan and want Code Connect. This bridge is for the case where the agent is doing the designing — where it needs to write freely, check its own work, and be undoable when it gets it wrong.

---

How it works

flowchart LR

subgraph AI ["🤖 Coding Agent"] LLM["Claude Code · Cursor Antigravity · Windsurf"] end

subgraph Bridge ["⚡ MCP Server — Node.js, 0 deps"] Router["Tool Router

• Job Ledger
• Target Router"] Opt["Token Optimizer

REST + LIVE"] end

subgraph Figma ["🎨 Figma Desktop"] Plugin["Bridge Plugin Checkpoint Journal Component Index"] Canvas["Live Canvas"] end

LLM -->|"stdio JSON-RPC"| Router Router <-->|"WebSocket :8765"| Plugin Plugin -->|"execute in sandbox"| Canvas Canvas -->|"export PNG"| Plugin Plugin -->|"raw node tree"| Opt Opt -.->|"86% smaller"| LLM Plugin ==>|"screenshot + warnings"| LLM

The agent speaks plain MCP over stdio. The server owns a hand-rolled RFC 6455 WebSocket on :8765, which the Figma plugin connects to — so commands reach the canvas with no polling latency, and results (including multi-megabyte base64 PNGs) stream straight back.

---

Quickstart

npx mokido

Or, to read the installer before it touches your machine — it's the same script either way, just fetched differently:

git clone https://github.com/kolganovr/mokido.git

cd mokido node install.mjs

Both copy the server and plugin into place and register the MCP server in every AI client config they find — Claude Desktop, Claude Code, Cursor, Windsurf, Antigravity. The npm package exists purely for a shorter first command; it doesn't add a single runtime dependency — dependencies is empty in its package.json too, and no Python is needed either. node is the only runtime this project ever needs, for the installer and the server alike.

Then, in Figma Desktop:

1. Plugins → Development → Import plugin from manifest… → pick ~/.mokido/mcp/figma-plugin/manifest.json (the installer prints the full path; the repo's own figma-plugin/ has no bridge token)
2. Press `Ctrl + Alt + P` (macOS: Cmd + Option + P) to launch Mokido
3. Status turns green — `CONNECTED`

Restart your AI client so it picks up the new tools. Verify anytime with:

npx mokido --doctor   # or: node install.mjs --doctor

Optional: Figma Cloud REST access

The live canvas tools need no token. If you also want to read *unopened* cloud files (get_file, get_node, get_styles, …), supply a personal access token:

npx mokido --token "your_figma_personal_access_token"

or: node install.mjs --token "your_figma_personal_access_token"

Without a token these 7 tools aren't registered at all — see Tool reference.

Updating

Updating is the same installer run again. It overwrites the copy in ~/.mokido/mcp, keeps your bridge token and client configs, and removes copies left by older versions.

npx mokido@latest --update

Keep @latest: a bare npx mokido can reuse the version npx cached last time. From a clone:

git pull

node install.mjs --update

Then reopen the plugin in Figma (Ctrl + Alt + P) and restart your AI client. A server that was already running keeps the old code in memory, and the plugin shows "Update needed" until it restarts.

You don't have to watch for releases: once a day the server checks npm and prints a one-line notice to your client's MCP log when a newer version is out (see the update check). What changed in each version is in CHANGELOG.md.

Agents updating it for you follow the same steps in AGENTS.md.

---

What it gives the agent

1. Write freely, then look at the result

capture: true returns a PNG of exactly what the call just created or modified — auto-framed to the changed nodes, never the whole page, and *never* by hijacking the user's selection.

// agent calls figma_execute_code

{ "code": "const f = figma.createFrame(); /* ... */ return f.id;", "capture": true }

// agent gets back — text + image in one response { "ok": true, "created": ["12:34"], "warnings": ["Text \"Total\" has ~3.1:1 contrast against its parent fill (WCAG AA wants 4.5:1)."], "checkpoint_id": "cp_mfk3p2a_7", "duration_ms": 840 }

The warnings array is a cheap auto-lint over the touched subtree — text overflow, low contrast, zero-size nodes. It catches the obvious mistakes without spending a screenshot round trip.

2. Undo anything the agent did

Every write opens a checkpoint automatically. One call reverses it — no Ctrl+Z rolling back over the human's own unrelated work.

// agent calls figma_rollback

{ "checkpoint_id": "last" }

// gets back { "ok": true, "checkpoint_id": "cp_mfk3p2a_7", "label": "Generate checkout flow", "removed": ["12:34", "12:35"], // nodes the call created — deleted "restored": ["9:11"], // nodes it modified — properties put back "missing": [] // ids that no longer exist }

Created nodes are tracked automatically via a Proxy around figma.create*(). Property edits are tracked when snapshotted. Deletions are honestly reported as unrecoverable rather than silently lost.

3. Read the live canvas for ~700 tokens instead of ~5,000

The same pruning + Pseudo-JSX pipeline that powers the cloud tools, pointed at whatever is open right now. Measured on a realistic 6-card layout: 20 KB of raw API JSON → 2.7 KB (86% smaller).

<Frame id="1:1" name="Landing" w="1440" h="900" row gap="20">

Feature 0

budget_tokens caps the response: if the requested depth overshoots, the server re-serializes the already-fetched tree shallower — no second round trip — and appends a comment saying what it did and which id to fetch for more.

4. Teach the sandbox new tricks that survive restarts

Every figma_execute_code call is a fresh function scope, so helpers normally die instantly. bridge.define compiles and stores a module *inside the .fig document*:

// once

bridge.define("kit", async function label(parent, text) { /* ... */ } module.exports = { label }; );

// in any later call — including next week, after a Figma restart const { label } = bridge.require("kit");

5. Long jobs that don't die at the timeout

A generation still running after 45s hands back a job_id instead of failing while the plugin keeps working. figma_job_status then blocks until the job finishes (up to wait_ms, 45s by default) — one call, not a polling loop. Progress from progress(step, of, note) is included while it runs; a job silent for 2 minutes is flagged stalled, and one whose plugin disconnected fails at once with PLUGIN_DISCONNECTED instead of running out the clock. A call that times out behind a still-running job says so (PLUGIN_BUSY, naming the job) instead of inviting a blind retry.

6. Built for the token bill

In an agent loop a tool call is paid for twice: once when it returns, and again on every later turn, because its output stays in the context that each turn re-reads. So the bridge optimizes for *fewer turns* and *smaller residue*:

| Che