What are design tokens? Let’s figure it out together
Most designers know that it s not enough just to create great designs; it is also important to implement this design in the final product. Many problems can arise during the development phase when you adapt your design to multiple platforms and devices. Product teams rely on design systems to minimize potential problems front-end design…
In this article, we will discuss one specific part of the design system – tokens. You will learn what design tokens are and how designers use them.
What are tokens?
Design system tokens are style values of interface elements such as color, typography, spacing, shadows, etc. that are used in products and can be converted to a format for any platform (web, mobile, desktop) … Tokens are the building blocks of a design system – think of them as subatoms, the smallest elements of style meanings that allow designers to create product styles.
The design token concept was originally introduced by Gina Bolton and John Levine in their talk “Using Design Tokens with the Lightning Design System” …
Upcoming Workshops
Also, there is a lecture by Yuri Vetrov about design tokens:
Differences between regular variables and tokens
Visual design properties such as color can be stored as regular variables:
$blue-400 = # 2680EB;
The variable $ blue-400 can be used in a CSS preprocessor like SASS. While this approach can help you structure your design choices, it has one major drawback: variables do not necessarily bridge the gap between naming and usage. Designers need to know what parameters they should apply in a particular context, and this is where tokens come into play:
$ button-cta-background-color = $ blue-400;
The name of this token, $ button-cta-background-color, makes it clear that the color $ blue-400 serves as the background color for the call-to-action button.
How tokens help the design process
Designers can work with style values in two ways: either hard-code them in the design, or use tokens. Design language changes and evolves over time, and when a product group relies on hard-coded values, they have to manually adjust the values every time they redesign.
It doesn t take long to update a single style value in a design. However, in real projects, attributes such as brand color or typography are used in dozens of different places, and manually setting values is time consuming. In addition, you can forget to change the specific meaning for any element (or elements) and introduce inconsistencies in the design. In contrast to these disadvantages, tokens offer various advantages to the design process.
Tokens allow flexible design
Tokens are used in place of hardcoded values and allow designers to create more flexible design solutions. They provide designers with the ability to retain complete control over the values of the design system. Designers update the value centrally (in one place) and the new change is automatically applied to all projects on each platform.
Tokens create a unified look
The ability to create a consistent look and feel across different platforms is another advantage of tokens. They help keep your design system values in sync across all projects, and you can format them to suit the needs of any platform. For example, when designing the web version of your product, you can use the HEX color value from CSS, but when designing iOS applications, you can use the RGBA color format.
Tokens simplify the development process
Last but not least, tokens simplify the development process. Developers have access to the latest design attributes through the design system software. They can use tokens in code like the npm package and get design updates without changing the code.
Token Management Tips
Now that you have the answers to the questions “What is a design token?” and “How are they used?” it s time to learn techniques that will help you streamline the token creation process. The tips mentioned in this section are based on the recommendations of leading proponents of design systems such as Brad Frost and Nathan Curtis…
Take inventory of the interface
To create tokens, you need to parse pages down to their atomic level, and an interface inventory will help you with that. Interface inventory Is the process of categorizing the components that make up your product. At the end of this process, you will have a comprehensive collection of the large and small parts that make up the interface, and this information will help you create tokens.
To simplify inventory, you can rely on the tool CSS Statsto see how many style properties your stylesheets have. This will help identify areas for optimization. For example, by analyzing the colors you use in your project, you can determine which colors look nearly identical and replace them with one color.
Define the criteria for creating tokens
When does a style variant become a token? It is helpful to have clear criteria for when to create tokens. The X times used criterion is a simple but effective way to decide which options should be tokenized. If the style is only used in one place, you probably don t need to create a token.
Decide on names
The strength of a design system lies in the ability to apply parameters to context. It is important to ensure that the correct token is being used for the correct property. Different teams will call things differently. This is why it is so important to define clear naming conventions before you start working with tokens.
Here s the recommended naming approach: [Category]-[Type]-[Item]-[State]… If you follow this approach, you will get something like the following: color–background–ctabutton–active
When a designer needs a color for an active call-to-action button, they should be able to browse the collection of tokens and choose the one that suits their needs.
Apply scales
Scales such as T-shirt sizes (XS, S, M, L, XL, XXL) or progression (2, 4, 8, 16, 32) can be very useful in different scenarios for using tokens. For example, you might have a default font size for body text and use the T-shirt size scale when you need to adjust it for different screen sizes.
Use JSON format to reuse token data
JSON is a great format for encoding value pairs. With JSON tokens, you can customize design settings for multiple preprocessors – SASS, LESS, or Stylus.
Appoint a token manager
Who should review and approve tokens? It s tempting to put this responsibility on everyone on the team, but it s best not to succumb to this temptation because not everyone has the time to keep their tokens in order. It is much better to choose a person who will curate the tokens proposed by all team members.
At the end of the day, any member of the product group can offer tokens, but one person (responsible) will review the offers and accept / reject them. This person should strive to keep the tokens in order – view the styles and files of the tokens, evaluate the proposed tokens, and use collaboration tools to provide feedback.
Ensure accessibility
The designs you create should be accessible to all users. When working with tokens, remember to test them for availability. Contrast is one of the fundamental design principles… When you choose colors, you need to check the contrast according to WCAG 2.0 guidelines… WCAG recommends a threshold ratio of 4: 5: 1 for standard or small text and 3: 1 for larger text.
Product teams should conduct automated availability tests on a regular basis. This will help you a11y Is a great accessibility audit tool that integrates into your design system.
It is also worth highlighting the contrast values directly in project documentationas it becomes the only source of truth for everyone working on the project.
The value of color contrast in the Duet design system. Picture Duet…
Build the best design systems with tokens
Effectively managing design tokens simplifies the process of creating a consistent look across platforms. Tokens help product teams apply design solutions quickly and confidently. They become a single source of truth for designers and developers, so they can rely on tokens to achieve consistency and scalability in their interface designs, while effectively collaborating within a single design system software…