A plugin and a CLI so your coding agent can read and edit the Figma file you have open. DESIGN:OS Bridge runs in Figma Desktop, including on the Free plan. The figma-agent CLI talks to the plugin over a local WebSocket on 127.0.0.1 (ports 9410 to 9419). One undo step per mutation. No seat, no access token, no model inside the bridge. You bring your own agent: Claude Code, Codex, Cursor, or any shell.
The repository is jangtrinh/design-os-figma-plugin. The product name is DESIGN:OS Bridge.
FREE + source-available (PolyForm Shield 1.0.0).
Quickstart · Use with your agent · FAQ · How it works · Install · Limits
git clone https://github.com/jangtrinh/design-os-figma-plugin.git
cd design-os-figma-plugin
npm ci && npm run build # Node.js 22; builds cli/dist/figma-agent.js and plugin/code.js
node cli/dist/figma-agent.js status --peekThen, in Figma Desktop: Plugins → Development → Import plugin from manifest… and pick plugin/manifest.json. Open the plugin in a scratch file first.
In Claude Code, you can also install the plugin from the marketplace:
/plugin marketplace add jangtrinh/design-os-figma-plugin
/plugin install design-os-figma-plugin@design-os-figma-plugin
Check the connection from the repository root:
node "$PWD/cli/dist/figma-agent.js" status --wait --timeout 60The plugin shows a compact status rail in the file you have open. This is a real capture of that rail, not a mock.
Idle, Connected, and the work in flight. The orb, the sentence, and a caret to expand.
The bridge has two parts: a plugin that runs inside Figma Desktop, and the figma-agent CLI that your agent runs in a shell. The CLI talks to the plugin over a local WebSocket on 127.0.0.1 (ports 9410 to 9419). No model runs inside the bridge.
Set up once (any agent)
git clone https://github.com/jangtrinh/design-os-figma-plugin.git
cd design-os-figma-plugin
npm ci && npm run buildIn Figma Desktop: Plugins → Development → Import plugin from manifest…, then choose plugin/manifest.json.
node "$PWD/cli/dist/figma-agent.js" status --wait --timeout 60Claude Code
/plugin marketplace add jangtrinh/design-os-figma-plugin
/plugin install design-os-figma-plugin@design-os-figma-plugin
Or write the skill from your built CLI: node cli/dist/figma-agent.js install-skill --folder ~/.claude/skills --with-craft --yes.
Cursor
Cursor loads skills from ~/.cursor/skills/ and ~/.agents/skills/ (Cursor docs).
node cli/dist/figma-agent.js install-skill --folder ~/.cursor/skills --with-craft --yesThen ask in Agent chat: "Inspect my current selection with the design-os-figma-agent skill."
Codex
Codex scans ~/.agents/skills/ for user skills (Codex skills docs).
node cli/dist/figma-agent.js install-skill --folder ~/.agents/skills --with-craft --yesWithout a skills folder, tell any shell agent to run node "$PWD/cli/dist/figma-agent.js" status and then read its command list.
Does it replace the official MCP server? No. They coexist. The official server is the better tool for Code Connect, cross-library search and working with Figma Desktop closed. This bridge reads and writes the open file through the Public Plugin API.
Does it need a paid seat? No seat or access token for the bridge. It needs edit access to the file for writes, and Figma Desktop running the imported plugin.
Is it on the Community listing? No. It is a development plugin imported from this repository.
Does it run or pay for a model? No. You choose and pay for your own agent or provider.
Can the agent undo its own work? Yes. Each typed mutation seals its own undo step, so one undo rolls back one change.
What licence is it under? It is source-available under PolyForm Shield 1.0.0. The LICENSE file governs.
The CLI exposes 42 commands, from the catalog in cli/src/command-catalog.ts. A short sample:
| Command | What it does |
|---|---|
status |
Broker and plugin connection. --peek never spawns a broker. --wait can. |
inspect · context · get-selection |
Read the current selection or a node, compacted for an agent's context window. |
scan-design-system |
Scan tokens and components in the open file. |
create-frame · set-text · bind-variable · set-autolayout |
Typed writes. Each one seals its own undo step. |
export-png --assert |
A PNG snapshot, checked, before or after a mutation. |
install-skill · install-hook |
Install the agent skill or a hook into a project. |
Every command prints one JSON object to stdout and exits 0, or {error:{code,message}} and exits 1. The full list is in docs/operations.md and in figma-agent --help.
The official write MCP is plan-gated. This bridge is a local alternative for the file you already have open, and it coexists with that server. See the official rate limits for what the official server requires.
Nothing in the bridge sends data off your machine. See PRIVACY.md.
Choose the setup that matches your agent. The canonical skill is skills/design-os-figma-craft/SKILL.md. After a build, install-skill writes it for you. The copies below are for a manual install.
/plugin marketplace add jangtrinh/design-os-figma-plugin
/plugin install design-os-figma-plugin@design-os-figma-plugin
git clone https://github.com/jangtrinh/design-os-figma-plugin.git /tmp/design-os-figma-plugin
mkdir -p ~/.codex/skills/design-os-figma-craft ~/.codex/prompts
cp -R /tmp/design-os-figma-plugin/skills/design-os-figma-craft/* ~/.codex/skills/design-os-figma-craft/
cp /tmp/design-os-figma-plugin/prompts/doctor.md ~/.codex/prompts/design-os-figma-craft-doctor.md
rm -rf /tmp/design-os-figma-plugingit clone https://github.com/jangtrinh/design-os-figma-plugin.git /tmp/design-os-figma-plugin
mkdir -p ~/.gemini/skills/design-os-figma-craft
cp -R /tmp/design-os-figma-plugin/skills/design-os-figma-craft/* ~/.gemini/skills/design-os-figma-craft/
rm -rf /tmp/design-os-figma-plugingit clone https://github.com/jangtrinh/design-os-figma-plugin.git /tmp/design-os-figma-plugin
mkdir -p ~/.agents/skills/design-os-figma-craft
cp -R /tmp/design-os-figma-plugin/skills/design-os-figma-craft/* ~/.agents/skills/design-os-figma-craft/
rm -rf /tmp/design-os-figma-pluginVerify or uninstall
Verify:
node cli/dist/figma-agent.js status --peek
python3 scripts/self_check.pyOr run /doctor inside Claude Code or Codex.
Uninstall the skill copies:
rm -rf ~/.claude/skills/design-os-figma-craft ~/.codex/skills/design-os-figma-craft ~/.gemini/skills/design-os-figma-craft ~/.cursor/skills/design-os-figma-craft ~/.agents/skills/design-os-figma-craft- The plugin has to be open in Figma Desktop, with the file you want to edit already open. It cannot talk to a file that is only in the cloud.
- It does not replace Code Connect, cross-library search, or work that needs the official Figma MCP server with Figma Desktop closed.
- It is not listed in the Community catalog. You import
plugin/manifest.jsonfrom this repository. - Converting an arbitrary live HTML page through a third-party scraper is out of scope. Use image fills or the typed frame builders, including the
html-to-figmacommand in this CLI when that is the right tool.
DESIGN:OS Bridge is FREE + source-available (PolyForm Shield). One episode of the Autonomous Design Agent series from the design:os by Jang channel (Vietnamese, with English terms):
Watch Autonomous Design Agent Ep. 5: Two-way bridge: One Comment, the AI Fixes Design and Code (2:44) for how one review comment can drive changes to both the design file and the code through DESIGN:OS Bridge.
More episodes: Autonomous Design Agent playlist.
This is one of the DESIGN:OS tools. The others: Studio, CLI, 3D Blender, SVG Animation, Code2Flow, Knowledge Builder and more on jangtrinh.github.io.
Docs: jangtrinh.github.io/design-os-figma-plugin · Changelog: CHANGELOG.md · Index for AI agents: llms.txt
CONTRIBUTING.md·CODE_OF_CONDUCT.md·SECURITY.md·PRIVACY.md- PolyForm Shield 1.0.0. FREE to use and modify, including for paid client work; you may not resell it or build a competing product from it.
Built by Jang Trịnh, creative technologist and autonomous system architect. More projects, case studies and writing at jang.work.
GitHub · LinkedIn · Hub · YouTube · X
If DESIGN:OS Bridge saves you time, a star on GitHub helps other engineers and AI agents find it.
