figma-setup-design-tokens
Bootstrap a complete design-token system in Figma in one atomic step — create a variable collection, its modes (e.g. Light/Dark), and every variable with per-mode values together. Use when starting a token system from scratch: triggers 'set up design tokens in Figma', 'create a token collection with light and dark modes', 'scaffold variables', 'bootstrap a Figma theme'. Works on ANY Figma plan. For incremental edits to an existing system use figma-manage-variables; for syncing from a code tokens file use figma-import-tokens.
npx skills add southleft/figma-console-mcp-skills --skill figma-setup-design-tokens --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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
- Skill boundaries
- Workflow
- Notes
What does the figma-setup-design-tokens skill do?
Bootstrap a complete design-token system in Figma in one atomic step — create a variable collection, its modes (e.g. Light/Dark), and every variable with per-mode values together. Use when starting a token system from scratch: triggers 'set up design tokens in Figma', 'create a token collection with light and dark modes', 'scaffold variables', 'bootstrap a Figma theme'. Works on ANY Figma plan. For incremental edits to an existing system use figma-manage-variables; for syncing from a code tokens file use figma-import-tokens.
How do I install it?
Run `npx skills add southleft/figma-console-mcp-skills --skill figma-setup-design-tokens --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From southleft/figma-console-mcp-skills, a repository with 67 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.