Design tokens sound complex. The concept underneath is simple. Once you understand what design tokens actually are, it becomes hard to imagine managing a design system without them — because the problem they solve isn’t a technology problem, it’s a translation problem between designers and code.
1. Design Tokens: The Core Concept
A design token is a named value that stores a design decision. Instead of a bare hex code like #0057FF, you have a named token: color.brand.primary = #0057FF. The name is what makes it useful — that same name can exist in your Figma file, in your CSS, in your iOS Swift code, and in your Android Kotlin code, all pointing to the same value.
When the underlying value changes, you change it in exactly one place, and it propagates everywhere the token is referenced. What design tokens really are, at bottom, is a single source of truth for design decisions, expressed in a format both designers and developers can read and use without translating it by hand.
2. Primitive vs. Semantic Tokens
Primitive tokens are raw values with descriptive names — color.blue.500 = #0057FF — that describe what the value literally is. Semantic tokens describe what the value means: color.action.primary = color.blue.500. The semantic layer is where a design system’s intentionality actually lives; “this color is used for primary actions” is design information that a hex code alone can never carry.
Primitive token
color.blue.500 = #0057FF — describes what the value is, nothing more.
Semantic token
color.action.primary → color.blue.500 — describes what the value means and where it’s used.
3. Getting Started with Design Tokens
In Figma, tokens are implemented through Variables, introduced in 2023. Start by creating a Variable collection, then add color, number, string, and boolean variables, and reference them in component properties instead of hard-coded values. For syncing to code, Style Dictionary (open source) or Tokens Studio (a Figma plugin) can export Figma Variables to CSS custom properties, JSON, or platform-specific formats.
Create a Variable collection in Figma and name it clearly by purpose (color, spacing, radius).
Add primitive variables first — the raw values your palette and scale actually contain.
Layer semantic variables on top, mapped to primitives, named by intent rather than appearance.
Export to code with Style Dictionary or Tokens Studio so the same names exist on both sides.
Why the Naming Convention Is the Real Deliverable
Teams that struggle with design tokens usually aren’t struggling with the tooling — they’re struggling with naming discipline. A token system with inconsistent naming (some tokens named by appearance, some by intent, some by component) is harder to maintain than no token system at all, because it looks organized while actually hiding the same ad-hoc decisions tokens were meant to eliminate.
💡 Pro tip — Write your semantic naming convention down as a short document before creating a single variable in Figma. Deciding the pattern (category.role.variant, for instance) up front prevents the slow drift where six months in, half your tokens follow one convention and half follow another.
4. Common Mistakes with Token Systems
The most common mistake is skipping the semantic layer entirely and treating primitive tokens as if they were the whole system. This technically works in the short term but recreates the original problem: when a brand color changes, every component that referenced the primitive directly needs manual updating, instead of updating once at the semantic layer.
The second mistake is building the token system in Figma and never actually syncing it to code, which leaves designers and developers maintaining two separate sources of truth that quietly drift apart. A token system only pays off once both sides are genuinely reading from the same named values.
A third mistake is over-engineering the token structure before the design system has enough real components to justify it — building five layers of abstraction (primitive, semantic, component-specific, theme, and platform overrides) for a product with a dozen screens. Token architecture should grow with the system’s actual complexity, not get built to a scale the product hasn’t reached yet.
Closing thoughts
Design tokens aren’t a trend — they’re a naming discipline dressed up as a technical feature. The tooling to implement them (Figma Variables, Style Dictionary, Tokens Studio) is now mature and accessible. The part that still takes real design judgment is the semantic layer: deciding what each value means, not just what it is.
If you’re introducing tokens to a team for the first time, resist the urge to convert an entire existing design system overnight. Start with one category — color is usually the clearest win — get the primitive-to-semantic naming right there, sync it to code, and confirm the whole pipeline actually works end to end before expanding to spacing, radius, typography, and shadow tokens. A working color token system that ships is worth more than a comprehensive token spec that never leaves the Figma file.
Design Daily Life · Notes on design, daily