Design Tokens: What They Are and How to Use Them

Design systems aren’t scalable without a shared language.
That language? Design tokens.

Tokens turn style decisions — colors, spacing, typography — into reusable, consistent values across design and code.

Whether you're building your first design system or scaling to an enterprise team, tokens are essential.
Let’s break down what they are, how they work, and how to use them.

🧠 What Are Design Tokens?

Design tokens are the named values that store visual design decisions.

Think of them like variables in code — but for UI styles.

Instead of setting a color as #0066ff, you define:

And then you reuse that token in both your Figma file and your codebase.

💬 Tokens bridge the gap between design and development.

🛠️ What Can Be a Token?

• ✅ Colors (e.g. color.text.primary)

• ✅ Spacing (e.g. spacing.sm)

• ✅ Typography (e.g. font.body.medium)

• ✅ Radius, shadows, borders

• ✅ Opacity, z-index, grid columns, breakpoints

💬 If it’s a style value, it can be tokenized.

🎯 Why Use Design Tokens?

• Consistency: No more guesswork between screens

• Scalability: Update one token, and every instance updates

• Theming: Easy to switch styles for light/dark mode or brands

• Dev alignment: One source of truth across Figma and code

💬 Tokens turn your design system into a real system.

🔤 How to Name Tokens

Use dot notation for clarity and hierarchy:

Start with category → use → modifier.
Stick to lowercase, and avoid hardcoded values in names (color.blue.500 is less flexible than color.primary.500).

💬 Good naming = faster adoption.

🔄 How to Use Design Tokens in Figma

✅ Figma Variables

As of 2024+, Figma lets you define tokens as variables:

• Create color, number, and boolean variables

• Name and group them in collections

• Apply them to components and styles

💬 Variables are your design tokens — built in.

🧩 How to Sync Tokens With Code

Use tools like:

• Style Dictionary (open source, customizable)

• Tokens Studio for Figma (plugin that exports JSON)

• Supernova, Specify, or Lona (for design-to-code pipelines)

💬 Automation turns tokens into a bridge — not a gap.

🧘 Start Simple

You don’t need to tokenize everything on day one.
Start with:

• Colors

• Spacing

• Typography

Then expand into shadows, radius, motion, and themes as your system grows.

📘 See Tokens in Action

Sigma Design System is built around a token-first mindset — with clean variables for color, spacing, and typography that scale across layouts, themes, and components.