Was sind Design Tokens?

Have you ever noticed how a button might look slightly different on your company's website compared to its mobile app? Or how colors sometimes don't quite match?

This inconsistency often happens because design decisions are implemented separately across different platforms and teams.

Design tokens are the solution to this problem! They are the single source of truth for all your design decisions.

Think of them as abstract names for visual properties like colors, fonts, spacing, and shadows, instead of their hardcoded values.

You might be thinking, "Aren't these just variables?" Not quite!

• Variables (like in CSS or Sass) are specific to a certain technology or platform.
• Tokens are platform-agnostic. They define a design decision once, in a neutral format, and can then be translated into variables for any platform (web, iOS, Android).

This is a core concept. By defining design decisions as tokens, you ensure that:

• Design tools (like Figma) reference the same tokens.
• Codebases (for web, iOS, Android) reference the same tokens.

This guarantees consistency across your entire product ecosystem.

Design tokens can represent almost any visual attribute. Here are some common categories:

• Color: Primary, secondary, text, background.
• Typography: Font family, size, weight, line height.
• Spacing: Margins, paddings (e.g., small, medium, large).
• Sizing: Component dimensions, icon sizes.
• Shadows: Elevation effects.
• Borders: Width, color, radius.

Tokens are best named semantically, describing their purpose rather than their literal value.

For example, instead of blue-500, you'd use color.brand.primary. This makes tokens more adaptable. If your brand primary color changes from blue to green, you only update the token's value, not its name or where it's used.

Design tokens are often stored in a simple, human-readable format like JSON or YAML. This neutral format makes them easy to share and process.

Try running this example to see a basic JSON structure of design tokens:

Once defined, design tokens are processed by specialized tools (like Style Dictionary or Theo) that transform them into platform-specific code:

• Web: CSS variables, Sass variables, Less variables.
• iOS: Swift or Objective-C constants.
• Android: XML resources.

This automation ensures that every platform uses the exact same design values.

Implementing design tokens brings significant advantages:

• Consistency: Unified look and feel across all products.
• Efficiency: Faster development and updates.
• Scalability: Easily manage design at scale.
• Maintainability: Centralized changes, reduced errors.
• Collaboration: Clear communication between design and development.

Which of the following best describes the primary purpose of design tokens?

You've learned that design tokens are powerful, abstract representations of design decisions. They provide a single, consistent source of truth for all visual properties, bridging the gap between design and development.

By using semantic naming and a neutral format, tokens ensure consistency, efficiency, and scalability across your entire product ecosystem. Next, we'll dive into how to implement them!