Design5 min read

Design Tokens

Named design decisions stored as data - design tokens propagate colors, spacing, and typography from Figma to CSS, iOS, and Android automatically.

Design TokensFigmaStyle DictionaryThemingDesign System

skill: Design Tokens category: Design tags: [Design Tokens, Figma, Style Dictionary, Theming, Design System] readingTime: 5

Design tokens are the contract between design and engineering. Without them, every design update requires manual code changes; with them, theming, multi-brand support, and dark mode become configuration, not code. The W3C Design Token specification is the emerging standard - use it to stay future-proof.

Workflow

Define token taxonomyA clear taxonomy (primitive → semantic → component) makes tokens understandable, scalable, and theme-able without bloating the token set.
Author tokens in W3C formatThe W3C Design Token format is the emerging industry standard - tools like Token Studio, Style Dictionary, and Figma Tokens support it natively.
Transform with Style DictionaryStyle Dictionary reads your token JSON and transforms it to CSS custom properties, SCSS variables, JS/TS constants, Swift, Kotlin, or any format you need.
Sync with Figma VariablesFigma Variables (2023+) store tokens natively and can be kept in sync with code tokens - eliminating manual Figma→code handoff for colors and spacing.
Implement theming with token overridesSemantic tokens enable full theming by replacing only the semantic layer - primitive values stay constant, semantic references change per theme.

Output Format

Token pipeline: Figma Variables → W3C JSON → Style Dictionary transforms → CSS/JS/Swift output.

tokens/
├── primitives/
│   ├── color.json
│   ├── spacing.json
│   └── typography.json
├── semantic/
│   ├── light.json
│   └── dark.json
└── component/
    └── button.json

dist/ (generated)
├── tokens.css
├── tokens.js
└── tokens.swift

Examples

Input

Output

Edge Cases & Gotchas

Token naming conflicts between teams - Without governance, different teams add tokens with inconsistent naming (--button-bg vs --btn-background vs --primary). Establish naming conventions and a token review process.
Token proliferation - Tokens are easy to add and hard to remove. Before adding a new token, check if an existing one covers the need. A good design system has 100-200 semantic tokens, not 1000.
Dimension tokens and responsive design - Fixed px spacing tokens don't adapt to user font size preferences. Consider using rem for spacing tokens so they scale with the browser's base font size.
Figma Variables API rate limits - The Figma REST API has rate limits. For large token sets, batch variable reads and cache aggressively to avoid 429 errors during CI sync.

When to Break These Rules

Use Tailwind CSS's theme config instead of a separate token layer when the project is a single React/Vue app without multi-platform or multi-brand requirements.
Skip the full W3C token format for small projects - CSS custom properties defined in a globals.css file are sufficient when there's no Figma sync requirement.

Reference Files

https://design-tokens.github.io/community-group/format/
https://amzn.github.io/style-dictionary/