mcpField
S
setup-design-tokens-figma

setup-design-tokens-figma

github.com/southleftDesign & UI2071 installsUpdated 21w ago
Repository

About setup-design-tokens-figma

This Figma skill creates a variable collection, modes, and variables in one use_figma call for teams setting up a design-token system. Its script runs atomically, so a failure applies no partial changes.

Key features

  1. 01Create variable collections and modes
  2. 02Create variables with per-mode values
  3. 03Set scopes for variables
  4. 04Run creation as an atomic script

Use cases

  1. 01Bootstrap a new design-token collection
  2. 02Create tokens from an agreed set of modes and values

MCP support

The skill runs Figma Plugin API scripts through use_figma. The README does not say that it provides an MCP server or tools.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/southleft/skills-for-figma --skill setup-design-tokens-figma

After installing, type/setup-design-tokens-figmain Claude Code to confirm it loaded.

Bundled filesscripts/setup-tokens.js

Details

From the project README

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

  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: 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.

Comments

Markdown supported