In modern mobile application development, it’s a challenge to maintain design consistency across multiple platforms, devices, and teams. Design tokens are a powerful methodology that helps streamline UI development by abstracting design decisions into reusable components. This approach ensures brand consistency and also enhances scalability and maintainability.

Why Do We Need Design Tokens?

Our team supports dozens of customers across a variety of platforms. It is complex to ensure design consistency across all these applications and simultaneously align multiple teams—design, engineering, and product management. Adopting  design tokens allows us to:

• Maintain a unified visual identity across all our applications
• Ensure designers and engineers use the same references for colors, typography, and components. Reduce inconsistencies between design mockups and implementation
• Streamline communication between teams, eliminating discrepancies that arise from different interpretations of design specifications
• Improve scalability and efficiency when updating UI elements, reducing redundant work across multiple teams

Design tokens create a single source of truth for our design system, enhance collaboration and ensure seamless execution from design to development.

What Are Design Tokens?

Design tokens are platform-agnostic variables that store design-related values such as colors, typography, spacing, and component styles. Instead of hardcoding values directly into XML, SwiftUI, or design files, tokens allow designers and developers to define and manage these values in a centralized and systematic way.

For example, instead of defining a color in an iOS SwiftUI view like this:

A design token simplifies it to this:

Then, you can reference the token in SwiftUI:

Benefits from a Designer’s Perspective

From a designer’s standpoint, design tokens serve as the bridge between design and development. They ensure the final product matches the intended design vision. By leveraging design tokens, designers can:

• Standardize UI elements: Define a clear set of colors, typography, and spacing values that remain consistent across all screens and components.
• Easily update and scale designs: Centralized token management allows for global design updates, enabling quick and precise visual changes across all desired files, eliminating the need for manual adjustments.
• Improve collaboration with developers: Using design tokens in tools like Figma allows engineers to directly reference code, minimizing design-development discrepancies and fostering enhanced collaboration between design and engineering teams. 
• Enable efficient multi-dimensional theming: Creating light and dark modes or supporting different brand styles becomes seamless when all values are tokenized. Multi-dimensional theming also allows for storing string translations, enabling efficient language switching within mockups.
• Ensure accessibility compliance: Tokens can be configured to maintain contrast ratios and accessibility standards across all UI components.

Example in Figma

Designers using Figma can define design tokens as part of their style system:

• Color Tokens: Establish a shared style library for defining primary and secondary colors (and more), ensuring consistent application across backgrounds, text, icons, and all UI elements.
• Typography Tokens: Create heading, subheading, and body text styles using predefined font sizes and weights.
• Spacing Tokens: Set standard padding, margins, and grid spacing values to maintain alignment and structure.

With tools like Tokens Studio, designers can automate the export of design token values in JSON format to GitHub, making them readily accessible for developers and streamlining the design-to-code handoff.

How to Implement Design Tokens in Mobile Apps

Implementing design tokens for mobile apps can be done with four steps, outlined below:

1. Define Your Design Tokens

Identify key design attributes like colors, typography, spacing, and border-radius values. Organize them into a structured format such as JSON, YAML, or XML.

Example JSON structure:

2. Integrate Tokens in Your Design and Code

At CMT, we use a token management tool Style Dictionary to generate tokens for various platforms, including iOS and Android.

For iOS, you can convert JSON tokens into an asset catalog or Swift constants:

For Android, use XML to define tokens:

3. Use Tokens in Your UI Components

Ensure your design tokens are referenced in your component styles. In Android’s Jetpack Compose, you can use tokens like this:

4. Enable Dynamic Theming

For theming support, define different sets of tokens for light and dark modes.

In iOS, define themes in an asset catalog:

For Android, use night mode resources:

Then, toggle themes dynamically in Android:

Conclusion

Design tokens provide a robust and scalable approach to maintaining UI consistency across different platforms and devices. By defining a centralized set of design attributes, teams can build adaptable and easily maintainable design systems. Whether you’re working on an iOS or Android application, incorporating design tokens will streamline your development process and improve collaboration between designers and developers.

Are you using design tokens in your projects? Share your experiences in the comments below!

About The Author

Codie Heinemann, Zongkun Dou