Summary: DESIGN:OS Figma Plugin & CLI v0.1.0 is a bridge between your programming AI agent and the open Figma canvas. You describe verbally, the agent (Claude Code, Codex, Gemini CLI, Antigravity) reads the design, creates frames, edits text and layout, assigns variables, and then exports PNG for self-checking results. It runs on the Free Figma package. Free; we don't sell anything; no telemetry, all connections only run on your machine (127.0.0.1).

License: source-available under PolyForm Shield 1.0.0 (free to use and modify, including for commercial purposes; just not for resale or competitive products).

Why it's needed

• Official Figma MCPs are read-only, dumping a large amount of JSON into the agent's context, and reverse writing to the canvas often requires a paid package.
• DESIGN:OS Figma Plugin & CLI combines a Figma plugin with a figma-agent CLI via a local WebSocket: the agent can read and write to the canvas, with a concise summary and controlled depth.

AI design on the real canvas, with evidence

• Directly reads the selection area: auto-layout, variables, typography of the selected frame.
• Scans the design system of the file, then creates a new frame using the correct tokens and available components.
• Direct editing: creates frames, changes text, copies layout properties, assigns variables.
• Checks visually: the agent exports high-resolution PNGs before and after editing, no "blind edits".

Real use in large projects

• We use the plugin in real work for a multi-application enterprise platform: scanning a 28-page Figma file with 292 component sets and 2,096 components takes about 10 seconds.
• Code retains the original tokens; variables in Figma are synchronized according to code, with a step to check discrepancies between canvas and code.
• The process includes oversight: the agent inspects and reads PNGs before and after each edit, prioritizing commands with types (clone-traits) instead of free scripts.
• When a designer manually adjusts the results, the sync-corrections command records those adjustments for the agent to learn from, but does not automatically turn them into rules without approval.

Example commands (spoken verbally for the agent)

• "Inspect the selected frame in Figma, retrieve auto-layout and variable tokens, then build the corresponding React component."
• "Scan the design system tokens of the open file and create a pricing table section 1440x900 using DLS components."
• "Edit the content and spacing of the selected hero, export PNG 2x for visual matching."

Who can use it

• Designer: delegates repetitive tasks (changing text, adjusting spacing, assigning variables) to the agent directly in the Figma file being worked on.
• Frontend developer: accurately extracts layout and tokens from the selected frame to build components, without having to guess from screenshots.
• Design system lead: scans tokens of the file and lets the agent build screens according to DLS.

Installation

• Claude Code: add the marketplace jangtrinh/design-os-figma-plugin and then install the design-os-figma-plugin.
• Codex, Gemini CLI, Antigravity, OpenCode, Cursor, Windsurf: clone the repo and copy the es-figma-craft skill into the agent's skills directory (instructions for each agent are in the README).
• Check: run scripts/self_check.py or the command /doctor to verify the skill path, manifest and runtime conditions; the status --peek command checks the connection to the canvas.

Privacy

• CLI and skill do not call out to the external network, do not collect analytics, do not send source code, prompts or result files anywhere (PRIVACY.md).

New in v0.1.0

• Library for manipulating variables by mode and component set in a variant matrix format.
• Supports slots and annotations; added support for Figma Slides.
• Flag --instance to target a specific plugin; can pin the plugin directly on the panel.
• exec-js command in read-only mode will be rejected if it makes changes to the file.
• More stable broker: