Setup design tokens figma

Skill southleft/skills-for-figma/skills/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.From its SKILL.md

Install

npx -y skills add southleft/skills-for-figma --skill setup-design-tokens-figma

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

12 stars12 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.9 KB, 593 tokens by cl100k_base, as published. Nobody here has run it

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.

What ships with it: 1 file

3.1 KB alongside SKILL.md, 1 of them executable

scripts/

setup-tokens.jsruns3.1 KB

Gives 0 of the 12 instructions most project setup skills give in 593 tokens

Counted across 1,553 of the 3,091 authors here whose files we hold, read 2026-09-06

Write the configuration filein 36 of 1553
Create the directory structurein 35 of 1553, across 33 files
Verify the setupin 31 of 1553, across 28 files
Run the setup scriptin 30 of 1553, across 29 files
Pre-determine the required sample sizein 29 of 1553, across 12 files
Check if the configuration already existsin 29 of 1553
Document every testin 26 of 1553, across 10 files
Start with a hypothesisin 26 of 1553, across 11 files
Ask one question at a timein 22 of 1553
Test a single variable per testin 21 of 1553, across 9 files
Read product marketing context before asking questionsin 19 of 1553, across 8 files
Do not peek and stop earlyin 18 of 1553, across 7 files

Said here and by no other author read

Agree the v1 scope first
Fill the constants in the setup script
Run the setup via use_figma
Validate with variable definition tools

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.