Figma Variables & Tokens

Stand up a real, multi-tier Figma Variables system and wire it to your codebase. This skill structures collections, modes, and aliased semantic tokens the way a design-system team actually maintains them, then generates the export artifacts your frontend consumes. It's for designers who own a design system and the frontend engineers who have to keep CSS, Tailwind, and Figma from drifting apart.

When to use it

• You're migrating from raw color/number styles to Figma Variables and need a sane primitive→semantic layering.
• You want light/dark (and optionally brand or density) handled through modes on a collection instead of duplicated frames.
• Your tokens live in Figma but your code has hand-maintained CSS variables, and the two keep diverging.
• You need a repeatable export to W3C design-token JSON, CSS custom properties, or a tailwind.config theme.

How it works

The skill builds two collections: a Primitives collection (color/blue/500, space/4, radius/md) with one mode, and a Semantic collection (bg/surface, text/default, border/subtle) with Light and Dark modes whose values alias primitives via figma.variables.setVariableValue references. It applies scoping so a color token only appears in fill pickers, a radius token only in corner-radius fields, etc., and sets code syntax per variable (Web/Android/iOS) so exports carry the right names.

Token data is read through the REST GET /v1/files/:key/variables/local (Enterprise) or the Plugin API (figma.variables.getLocalVariableCollectionsAsync). The skill normalizes that into W3C $value/$type/$ref JSON, then transforms it — Style Dictionary–style — into :root / [data-theme="dark"] CSS blocks and a Tailwind theme.extend map pointing at the CSS vars.

Example

curl -fsSL --create-dirs -o ~/.claude/skills/figma-variables-tokens/SKILL.md https://claudeskil.com/skills/figma-variables-tokens/SKILL.md

# After connecting your file:
> Build a primitive + semantic token system with light/dark modes,
  scope the color tokens to fills/strokes, and export to
  tokens.json, src/styles/tokens.css, and tailwind.config.js

Resulting CSS:

:root { --bg-surface: var(--color-white); --text-default: var(--color-gray-900); }
[data-theme="dark"] { --bg-surface: var(--color-gray-950); --text-default: var(--color-gray-50); }

Tips & gotchas

• Alias, don't hardcode. Semantic tokens should reference primitives so a palette change ripples everywhere. Raw hex in a semantic token is the #1 maintenance trap.
• Modes are per collection. Don't put light/dark on the primitives collection — keep primitives single-mode and let semantics flip.
• The local-variables REST endpoint is Enterprise-only; on other plans the export runs through the Plugin API instead.
• Set code syntax names early — renaming a variable later doesn't auto-update existing exports.

FAQ

Does this support nested/component variable bindings? It exports the variable definitions and aliases. Bindings on layers stay in Figma; the code side consumes the generated CSS/Tailwind names.

Can I round-trip edits from code back to Figma? Export is one-directional by default (Figma → code). Writing back requires the Plugin API and is treated as a separate, explicit step.

W3C JSON or Style Dictionary format? It emits W3C $type/$value JSON, which Style Dictionary 4 consumes directly if you prefer your own build.