mcpField
F
figma-setup-design-tokens

figma-setup-design-tokens

github.com/southleftDesign & UI94128 installsUpdated 10w ago
Repository

About figma-setup-design-tokens

A skill for bootstrapping Figma design tokens by creating a variable collection, modes, and variables in one atomic script. It is intended for new token systems or additional collections; failed scripts apply no changes.

Key features

  1. 01Create a variable collection and modes
  2. 02Create variables in one operation
  3. 03Set scopes for individual variables
  4. 04Run changes as an atomic script
  5. 05Return results and provide validation steps

Use cases

  1. 01Initialize tokens for a new design system
  2. 02Add a variable collection to an existing file
  3. 03Limit token availability by property type

Install

Copy the command and run it in a terminal.

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

After installing, type/figma-setup-design-tokensin Claude Code to confirm it loaded.

Bundled filesscripts/setup-tokens.js

Details

From the project README

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: 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 { collectionId, modes, created, errors }.
  4. Validate with get_variable_defs or the figma-export-tokens 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 figma-import-tokens (which has the alias pass) or figma-manage-variables. 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