figma-setup-design-tokenslisted
Install: claude install-skill whiskfernlowdensitylipoprotein154/figma-console-mcp-skills
# figma-setup-design-tokens — atomic token-system bootstrap
Create a variable collection + modes + all variables in a single `use_figma` call. This is the
fastest way to stand up a new token system (or a new collection within one). Because it runs as one
atomic script, either everything is created or nothing is (failed scripts apply no changes).
## Skill boundaries
- **`use_figma` rules** — load the official **`figma-use`** skill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-level `await` + `return` (no IIFE, no `figma.closePlugin()`; `console.log` is not returned), inputs inlined as `const` at the top of each script, colors in 0–1 range, load fonts before any text op, `await figma.getNodeByIdAsync(...)`, and **atomic errors** (a failed script applies nothing — read the error, fix, retry).
- Incremental CRUD / batch edits to an existing system → `figma-manage-variables`.
- Sync from a code token file → `figma-import-tokens`.
## Workflow
1. **Agree the v1 scope.** List the collection name, the modes (first one is the default), and the
full token set with per-mode values. Lock this before writing — it's much cheaper than editing
afterward.
2. **Fill the constants** in [`scripts/setup-tokens.js`](scripts/setup-tokens.js): `COLLECTION_NAME`,
`MODES`, `TOKENS` (values keyed by mode name), and optional per-variable `SCOPES`.
3. **Run** via `use_figma` (`skillNames: "figma-setup-design-tokens"`). It returns
`{ c