How do you use design tokens in your system?

1 What are design tokens?

Design tokens are abstract and platform-agnostic representations of visual attributes, such as colors, fonts, spacing, sizes, and animations. They allow you to create a consistent and scalable design language that can be translated into different code formats and applied to various components and elements. For example, you can define a design token for your primary brand color and use it in CSS, iOS, and Android projects.

2 Why use design tokens?

Design tokens offer many advantages to your design system and team, such as improved communication and collaboration between designers and developers. This is because they create a common vocabulary and source of truth. Design tokens also reduce the risk of inconsistencies and errors, as every change or update is reflected across all platforms and projects. In addition, they increase the efficiency and maintainability of your code by eliminating the need to hard-code or duplicate values and styles. Furthermore, design tokens enable the adaptability and scalability of your design, allowing you to adjust and customize your tokens according to different contexts and needs.

3 How to create design tokens?

When creating design tokens, there is no one-size-fits-all approach, as different systems and teams may have different requirements and preferences. However, you can start by analyzing your existing design and identifying the common and reusable visual attributes that you want to abstract and standardize. Additionally, you should define your design tokens using a clear and consistent naming convention and a logical hierarchy or structure. For instance, you can group your tokens by category (e.g. color, typography, or spacing) and by level (e.g. global, component, or theme). Finally, store your design tokens in a centralized and accessible location such as a JSON file, a database, or a cloud service to make it easier to manage and update your tokens and sync them with your code.

4 How to use design tokens?

To use your design tokens in your code, you need to convert them into the appropriate format and syntax for each platform and project. For example, you can transform your JSON tokens into CSS variables, Swift constants, or XML resources. There are several tools and frameworks that can help you automate this process, such as Style Dictionary, Theo, or Diez. You can also integrate your design tokens with your UI components library or framework, such as Storybook, React, or Angular, to create a cohesive and dynamic design system.

5 How to update design tokens?

Design tokens are not static or fixed, and may evolve and change over time as your design system grows and adapts to new requirements and feedback. To update your design tokens, you must adhere to a consistent and collaborative workflow that includes reviewing and validating the need and impact of the change, updating the source of truth for your design tokens, syncing the updated design tokens with your code and UI components, and communicating the change and rationale to your team and stakeholders. Design tokens can create consistency, efficiency, and adaptability in your design and code, while also enhancing collaboration and communication between team members. How do you use design tokens in your system? What challenges or opportunities have you encountered?

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?