How do I install the Setup Design Tokens Figma skill?

Run npx skillmds@latest add southleft/setup-design-tokens-figma in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Setup Design Tokens Figma safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Setup Design Tokens Figma?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Setup Design Tokens Figma free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Setup Design Tokens Figma?

southleft (@southleft) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Setup Design Tokens Figma by southleft

Name: Setup Design Tokens Figma
Author: southleft

Setup Design Tokens Figma

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 manage-variables-figma; for syncing from a code tokens file use import-tokens-figma.

southleft Updated Sep 17, 2026

File contents

setup-design-tokens-figma — 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 → manage-variables-figma.
Sync from a code token file → import-tokens-figma.

Workflow

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.
Fill the constants in scripts/setup-tokens.js: COLLECTION_NAME, MODES, TOKENS (values keyed by mode name), and optional per-variable SCOPES.
Run via use_figma (skillNames: "setup-design-tokens-figma"). It returns { collectionId, modes, created, errors }.
Validate with get_variable_defs or the export-tokens-figma read script, then screenshot if you also created swatches.

Notes

Two-tier systems: create primitives (raw values) with this skill, then create semantic tokens that alias them using import-tokens-figma (which has the alias pass) or manage-variables-figma. Keep primitives single-mode and put theming on the semantic layer.
Set scopes: the default ALL_SCOPES clutters every property picker. Pass SCOPES for the surfaces each token belongs to (FRAME_FILL/SHAPE_FILL for backgrounds, TEXT_FILL for text, GAP for spacing, CORNER_RADIUS for radii, WIDTH_HEIGHT for sizing).
Keep one bootstrap per collection. Multiple collections = multiple runs.

---name: setup-design-tokens-figmadescription: 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 manage-variables-figma; for syncing from a code tokens file use import-tokens-figma.---# setup-design-tokens-figma — atomic token-system bootstrapCreate a variable collection + modes + all variables in a single `use_figma` call. This is thefastest way to stand up a new token system (or a new collection within one). Because it runs as oneatomic 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 → `manage-variables-figma`.- Sync from a code token file → `import-tokens-figma`.## Workflow1. **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: "setup-design-tokens-figma"`). It returns `{ collectionId, modes, created, errors }`.4. **Validate** with `get_variable_defs` or the `export-tokens-figma` read script, then screenshot if you also created swatches.## Notes- **Two-tier systems**: create *primitives* (raw values) with this skill, then create *semantic* tokens that alias them using `import-tokens-figma` (which has the alias pass) or `manage-variables-figma`. Keep primitives single-mode and put theming on the semantic layer.- **Set scopes**: the default `ALL_SCOPES` clutters every property picker. Pass `SCOPES` for the surfaces each token belongs to (`FRAME_FILL`/`SHAPE_FILL` for backgrounds, `TEXT_FILL` for text, `GAP` for spacing, `CORNER_RADIUS` for radii, `WIDTH_HEIGHT` for sizing).- Keep one bootstrap per collection. Multiple collections = multiple runs.

Frequently asked questions