← ClaudeAtlas

figmentlisted

Figment builds and iterates on a Figma design system, component library, illustrations and complete screens straight from code, using a local Figma plugin plus an offline harness that catches layout bugs before Figma is ever opened. Use this whenever someone wants design generated into Figma from a codebase, a token file or a spec — "build these screens in Figma", "push our design system / tokens to Figma", "generate a component library in Figma", "make a Figma file for this app", "keep Figma in sync with the code" — and especially when the Figma MCP server is unavailable, rate-limited, or the seat cannot edit the file. Use it too when iterating on generated Figma output from screenshots and review notes, or whenever the design needs to be reproducible, diffable and versioned in git instead of hand-drawn.
Ashad001/figment · ★ 0 · Web & Frontend · score 70
Install: claude install-skill Ashad001/figment
# Generating Figma from code, with a plugin Figma's MCP server is the right tool for reading a design and for one-off edits. It is the wrong tool for *generating and then iterating on* a large design, for three reasons: it is metered (a Starter plan allows twenty tool calls **per month**, for every seat type), each call is a network round-trip, and nothing it produces is reproducible — rerun it and you get a slightly different file. A local plugin has none of those limits. It is the same Plugin API; only the transport changes. And because the plugin is a file in the repo, the design becomes source code: diffable, reviewable, regenerable, and correct by construction after the first time you fix a bug. **The trade you are making:** a plugin runs in the Figma desktop app, so there is a human in the loop on every run (Plugins → Development → your plugin). You will not see the canvas. That sounds fatal and is not — see *The loop* below. ## Quick start `assets/` in this skill is a working plugin scaffold. Copy it into the target repo, then: ```bash cp -r <skill>/assets <repo>/tools/figma-plugin cd <repo>/tools/figma-plugin ./build.sh && node test/run.cjs # should print: OK — 1 screen, no layout overflow ``` Then in the **Figma desktop app** (not the browser — a manifest plugin needs desktop): Plugins → Development → Import plugin from manifest… → pick `manifest.json` → Plugins → Development → *your plugin* → Build. Now start replacing the placeholder tokens with the