Design Tokens from Figma to Code: Implementation Patterns
Design tokens are the shared values (colors, spacing, typography) between design and code. Figma’s variables and styles map well to CSS custom properties or theme objects. This post covers how to extract tokens from Figma and implement them so design and frontend stay aligned.
What to tokenize
- Colors: Primaries, neutrals, semantic (text, bg, border, error, success). Use semantic names in code (e.g.
--color-text) and map from raw palettes (e.g.--token-gray-700). - Spacing: A scale (e.g. 4, 8, 16, 24, 32 px) used for padding, margin, gap. Expose as
--spacing-sm,--spacing-md, etc. - Typography: Font families, sizes, weights, line heights. Map to
--font-body,--font-heading,--text-sm,--text-base, etc. - Radii, shadows, motion: Optional but useful for consistency (e.g.
--radius-sm,--shadow-card).
From Figma to code
- Figma variables (and styles) often map 1:1 to token names. Export via Figma’s API, a plugin, or a hand-maintained JSON.
- Pipeline: Figma → JSON (or similar) → script or build step → CSS custom properties (and/or JS theme object). Keep the JSON as the source of truth so you can regenerate CSS when design changes.
- Naming: Use the same names in Figma and code (e.g.
color/text/primary) or a simple transform (e.g. to--color-text-primary). Consistency reduces mistakes.
Implementation: CSS custom properties
Define tokens on :root (or a theme selector):