Design Tokens in Practice: From Figma to Code

Design tokens are the single source of truth for visual decisions — colors, spacing, typography, and more. When Figma and your codebase reference the same token names, designers and engineers speak the same language and changes propagate predictably.

What I use

I keep tokens as CSS custom properties at the :root level, grouped by category. Something like --color-brand-500, --space-4, --font-size-body. These map directly to Figma variable names so there's no translation layer to maintain.

Staying in sync

The biggest challenge is drift. Figma tokens change, engineers rename things, and suddenly the Figma spec says --color-accent but the code has --color-highlight. I've found that a lightweight script that exports Figma variables to a JSON file, then diffed against the CSS file in CI, catches renames before they ship.

When to break the rules

Tokens are guidelines, not gospel. One-off values for a specific illustration or decorative element don't need to live in the token system. The goal is consistency for things that repeat, not centralizing every hex value in the codebase.