How to use tokens in design systems

Design systems are the backbone of consistent, scalable user interfaces. But what powers a design system under the hood? Enter design tokens—the unsung heroes that make systems flexible, maintainable, and cross-platform ready.

Whether you're building a design system from scratch or improving an existing one, understanding and leveraging tokens is key. In this post, we’ll break down what tokens are, how to use them, and why they matter.

What are design tokens?

Design tokens are named entities that store design decisions, think of them as variables for visual styles. Instead of hardcoding values like #FF5733 or 16px, you define a token like color.primary or spacing.md.

They help enforce consistency, enable easy updates, and bridge the gap between design and code. Examples of Tokens:

Why Use Tokens?

• Consistency: Everyone (designers, developers, PMs) references the same values.

• Scalability: Update one token, and it cascades across your product.

• Cross-platform support: Use the same tokens for web, iOS, Android, etc.

• Theming: Easily switch between themes (dark/light, brands, regions).

Types of Tokens

1. Core Tokens: Raw values that don't depend on context.
   e.g., color.blue.500 = #1A73E8

2. Semantic Tokens: Contextual usage of core tokens.
   e.g., color.primary = color.blue.500

3. Component Tokens: Specific to components like buttons, cards, inputs.
   e.g., button.primary.background = color.primary

How to Use Tokens in Practice

1. Define Your Token System

Start small: focus on the basics—colors, typography, spacing, border radius. Define a naming convention that suits your team’s workflow. Example Token Structure:

2. Integrate Tokens Into Design Tools

Tools like Figma support tokens via plugins like Design Tokens, Figma Tokens, or Variables (native feature). This lets designers apply tokens directly to UI elements.

3. Sync Tokens to Code

• Style Dictionary by Amazon – to transform tokens into CSS, SCSS, JS, Android XML, iOS Swift, etc.

• Token Studio (formerly Figma Tokens) – for syncing design and code tokens.

• Tailwind CSS – tokens can act as your config foundation.

4. Use Semantic Tokens in Components

Avoid using raw values in components. Instead, refer to tokens semantically. Example (React with styled-components):

This makes updating the look-and-feel of your UI as easy as changing a few token values.

Tips for Managing Tokens

• Version them: Use Git or a version-controlled tool for tracking token changes.

• Document them: Make tokens part of your design system documentation.

• Test themes: Set up theme toggling early (light/dark, brand variants).

• Audit regularly: Remove unused or duplicate tokens.

Final Thoughts

Tokens might seem like a small detail, but they’re foundational to building high-quality, consistent design systems. They align design and development, make scaling easier, and create a single source of truth for your visual language.

Start simple, define your core values, and grow your token system with your product. You’ll thank yourself later.