How to Set Up Design Tokens in Figma (2026 Guide)

To set up design tokens in Figma, use Figma Variables: define primitive values (raw colours, a spacing scale, type sizes), then layer semantic tokens on top that reference them, add modes for themes like light and dark, and sync the whole set to code as JSON or CSS custom properties. That two-tier structure is what lets you change a value once and update it everywhere.

What design tokens are (in one line)

Design tokens are named variables that store your core design decisions — colours, spacing, type, radii — so they live in one place instead of being hardcoded across hundreds of components. For the short definition, see the design tokens glossary entry.

Step 1 — Define primitives

Create raw, context-free values first: a full colour ramp (e.g. blue-50 to blue-900), a spacing scale (4, 8, 16, 24, 32), type sizes, and radii. These are the palette — they describe what a value is, not where it's used.

Step 2 — Add semantic tokens

Layer meaning on top by creating tokens that reference the primitives: color-primary → blue-600, color-surface → grey-50, space-card-padding → 16. Now components use the semantic token, so re-theming or re-mapping a value happens in one place.

Step 3 — Use modes for themes

Figma Variables support modes — set up a Light and Dark mode on your semantic collection, mapping each semantic token to the right primitive per mode. A component bound to color-surface then adapts automatically when you switch modes.

Step 4 — Bind tokens to components

Apply the semantic tokens to your components' fills, spacing and text styles. From here, updating the token updates every instance — no manual sweep across screens.

Step 5 — Sync to code

Export the variables to a shared format — JSON or CSS custom properties — so engineering consumes the exact same tokens. Both design tools and code reading one source is the standard approach, and it's what closes the gap between design and production.

Where tokens fit in the bigger picture

Tokens are Phase 2 of building a real system. To see how they connect to component architecture, documentation and governance, read the full guide to scalable design systems for digital products.

Frequently asked questions

What's the difference between primitive and semantic tokens?

Primitives are raw values (blue-600, 16px); semantic tokens give them meaning (color-primary, space-card-padding) by referencing primitives. Components use semantic tokens so changes propagate from one place.

Can Figma variables sync to code?

Yes — you export them as JSON or CSS custom properties so engineering consumes the same tokens, keeping design and code in lockstep.

Do I need a plugin for design tokens in Figma?

Figma's native Variables cover most needs; plugins help with advanced export pipelines and formats, but you can start with variables alone.