# design-os-figma-plugin

> Free Figma plugin + CLI so Claude Code, Codex or any shell agent can read and edit the Figma file you have open. Local WebSocket, one undo step per mutation, no seat.

A lightweight bridge allowing AI coding agents to inspect, manipulate, and generate Figma canvas nodes in real-time through the official Public Plugin API on Figma Free, without cloud tokens or paid seats.

## Documentation

- [Landing Page & Overview](https://jangtrinh.github.io/design-os-figma-plugin/): Plugin setup, command surface, and verified evidence.
- [Deep Dive Architecture](https://jangtrinh.github.io/design-os-figma-plugin/deep-dive.html): WebSocket transport, command serialization, and security boundaries.
- [Operations Guide](https://jangtrinh.github.io/design-os-figma-plugin/operations.html): Full CLI tool reference and command cheat sheet.
- [Multi-Machine Setup](https://jangtrinh.github.io/design-os-figma-plugin/multi-machine-setup.html): Configuring remote agent execution across SSH / Tailscale.
- [GitHub Repository](https://github.com/jangtrinh/design-os-figma-plugin): Source-available plugin code, broker server, and TypeScript library.

## Key Capabilities

- **Figma Free Compatible**: Uses the Public Plugin API in Figma Desktop. No paid seat, no access token.
- **Local WebSocket Broker**: Runs locally on ports 9410–9419 with strict origin isolation.
- **Atomic Undo**: Each mutation seals its own undo step so ⌘Z rolls back one atomic operation, not a whole session.

## Use with your agent

- Build: `git clone https://github.com/jangtrinh/design-os-figma-plugin.git && cd design-os-figma-plugin && npm ci && npm run build` (Node.js 22).
- Import `plugin/manifest.json` in Figma Desktop: Plugins, Development, Import plugin from manifest.
- Claude Code: `/plugin marketplace add jangtrinh/design-os-figma-plugin`, or `node cli/dist/figma-agent.js install-skill --folder ~/.claude/skills`.
- Cursor: `node cli/dist/figma-agent.js install-skill --folder ~/.cursor/skills`.
- Codex: `node cli/dist/figma-agent.js install-skill --folder ~/.agents/skills`.
- Check the connection: `node cli/dist/figma-agent.js status --wait --timeout 60`.

## FAQ

- Does it replace Figma's official MCP server? No, they coexist. The official server is better 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 Figma seat? No seat or access token for the bridge. Writes need edit access to the file.
- Is it on Figma Community? No. It is a development plugin imported from the repository.
- Does it run a model? No. You choose and pay for your own agent or provider.
- What licence? Source-available under PolyForm Shield 1.0.0: free to use and modify, not for resale or building a competing product.

## DESIGN:OS Ecosystem

- [design-os](https://jangtrinh.github.io/design-os/): DESIGN:OS CLI — Multi-runtime design CLI for Claude Code, Codex & Antigravity (cli)
- [design-os-knowledge-builder](https://jangtrinh.github.io/design-os-knowledge-builder/): Knowledge Builder — Multimodal knowledge compiler with UKMC.v1 contract & epistemic gate (compiler)
- [design-os-figma-plugin](https://jangtrinh.github.io/design-os-figma-plugin/): Figma Plugin & CLI — Live canvas bridge for AI coding agents on Figma Free (plugin)
- [design-os-svg-animation](https://jangtrinh.github.io/design-os-svg-animation/): SVG Animation Engine — Deterministic vector animation & 1080p 60fps video pipeline (engine)
- [design-os-3d-blender](https://jangtrinh.github.io/design-os-3d-blender/): 3D Blender Agent — Mechanical parts generation with embedded Three.js CAD viewer (3d / cad)
- [design-os-drone-showcase](https://jangtrinh.github.io/design-os-drone-showcase/): OPAH ONE — 249g indoor drone showcase with scroll-scrub kinematics (hardware)
- [design-os-github-page](https://jangtrinh.github.io/design-os-github-page/): GitHub Pages Engine — 9-tier zero-dependency scaffolder with SEO, AEO & GEO (pages)
- [design-os-apple](https://jangtrinh.github.io/design-os-apple/): Apple Design OS — Native SwiftUI 6.2 component system for iOS, iPadOS & macOS (swiftui)
- [design-os-pedagogy](https://jangtrinh.github.io/design-os-pedagogy/): Agent Teacher — Evidence-graded pedagogy library and curriculum tree runtime (pedagogy)
- [design-os-origami](https://jangtrinh.github.io/design-os-origami/): Origami CAD — Parametric packaging dielines, spot-color PDFs & 3D fold previews (packaging)
- [design-os-voice-ux](https://jangtrinh.github.io/design-os-voice-ux/): Voice UX & AI Agent Architecture — Full-duplex barge-in FSMs & sub-500ms voice specs (voice-ai)
- [design-os-code2flow](https://jangtrinh.github.io/design-os-code2flow/): Code2Flow — Local-first codebase-to-user-flow audit CLI across 7 UI frameworks (ast / audit)
- [design-os-generative-ui](https://jangtrinh.github.io/design-os-generative-ui/): Generative UI — Streaming interactive visual runtime with morphdom & WebGL (runtime)

## Videos

- [Autonomous Design Agent Ep. 5: Two-way bridge: One Comment, the AI Fixes Design and Code](https://www.youtube.com/watch?v=c6yc314JsTI): Autonomous Design Agent Ep. 5: how a two-way bridge lets one review comment drive changes to both the design file and the code, through the DESIGN:OS Bridge plugin and CLI. Vietnamese, with English terms.
- [design:os by Jang on YouTube](https://www.youtube.com/@designosbyjang): channel.