Design Tokens
Also known as: design variables, style tokens
What Are Design Tokens?
Design tokens are named, reusable values that store individual design decisions — a specific hex code, a font size, a spacing measurement, a border radius. Instead of hardcoding these values wherever they appear, tokens give each one a name that both design tools and code can reference directly.
The idea is simple: define a value once, name it, and use that name everywhere it's needed. Change the value behind the name, and every instance updates automatically.
What Types of Values Do Design Tokens Store?
Design tokens cover the full range of visual properties that make up a UI:
Color — primary, secondary, background, text, border, and status colors. Light and dark mode variants can be defined as separate token sets pointing to the same base palette.
Typography — font family, size, weight, line height, and letter spacing, each as individual tokens that combine into a type scale.
Spacing — margin, padding, and gap values defined as a consistent scale (4px, 8px, 16px, 24px, and so on) rather than arbitrary numbers.
Elevation and shadow — layer depth and shadow styles for cards, modals, and raised components.
Border radius and stroke — corner rounding and border weight values applied consistently across components.
What Are the Benefits?
Single source of truth — one token definition controls every instance of that value across the entire product. Updates happen in one place and propagate automatically.
Theming — design tokens make light/dark mode, white-labeling, and brand variants manageable. Swapping a token set changes the entire product's appearance without touching individual components.
Design-to-development alignment — when designers and developers reference the same named token, the value that ships matches the value that was designed.
Consistency at scale — as products grow across teams and platforms, tokens keep visual decisions coherent without requiring constant manual review.
What Are the Challenges?
Naming is hard — a token named blue-500 describes what it looks like, not what it does. Semantic naming (color-primary-action) requires upfront decisions that are difficult to revise later.
Tooling required — tokens need a pipeline to sync from design tools into code. Without that connection, they're just a naming convention rather than a live link between design and development.
Initial setup investment — defining a full token structure takes time. Teams that skip this step and bolt tokens onto an existing product later face a harder migration than teams that start with them from scratch.
How Do Design Tokens Connect Design and Development?
Design tokens sit at the boundary between design and code. In Figma, they're implemented as Figma variables — named values that attach directly to components and update automatically when changed. On the development side, the same token names map to CSS custom properties, platform-specific style files, or generated stylesheets.
This shared vocabulary is what makes DesignOps workflows scalable at the team level — rather than translating design decisions into code by hand, teams use tokens to automate that handoff.