The world of digital design is constantly evolving, and to remain competitive, it is essential to maintain visual consistency across all platforms and devices. This is where design tokens come in. These small units of design, although often overlooked, play an essential role in creating harmonious and effective user experiences.

What is a design token?

Design tokens are standardized values which represent the basic elements of a design system.
To recall, a system design is a repository that brings together all the components of a digital project. These make it possible to design a coherent logic throughout the production and guide all the teams involved in the design of an interface.
Design Tokens can be used to define colors, fonts, sizes, margins, whitespace, and other design elements. These are powerful tools that can help improve the Coherence and quality design, as well as collaboration between designers and developers.
Instead of using a value, we use the token. This then allows you to have only one page with all the tokens entered and to be able to rely on a single source.

Example for a token of one color:

At this level, a token design is a bit like the styles on Figma ou Sketch (colors, fonts, shadows, etc.) but with many more possibilities and much more flexibility. A design token is most often used for colors, size, margins, opacity, borders, etc.

So, rather than having:

We would have:

The token design allows us to change value on the fly from “{primary}” if necessary, without having to return to the different lines.
Moreover, in case of Multi-brand Design System, this also makes it possible to have only one one and only page to edit to change the style.
The ideal is to have the same name in the styles on our design software for greater consistency and simplicity when hand off between designers and developers.
However, the use of design tokens as an integral part of a design system is much more than that. They also allow a increased scalability, better communication between teams and therefore better decision-making.

The two types of Design Tokens

• Token primitives
  The token primitives are basic values design system. They include colors, fonts, font sizes, margins, whitespace, and other design elements. Token primitives are usually stored in a standardized data format, such as JSON, CSS ou YAML. This makes it easy for designers and developers to share and use them.
• Semantics tokens
  Semantic tokens are combinations of primitive tokens that have a specific meaning in the design system. For example, a semantics token could be a specific color used for a command button, or a specific font used for a page title. Semantic tokens allow you to create a coherent and homogeneous design, and simplify collaboration between designers and developers.

Primitives and semantics are two essential elements of a design system. They allow define the basic elements design, and organize them so that they are easy to find and use. By using tokens, designers and developers can create consistent, high-quality interfaces more quickly and easily.

The benefits of Design Tokens

• Consistency
  Design tokens respond, among other things, to a business problem : how to guarantee the graphic identity of the brand with a minimum of friction?
  In the event of a change in the foundations (a rebranding for example), design tokens make it possible to quickly deploy these modifications.
  Styles are unified across all products and platforms.
• Reusability
  Design tokens can be reused across one or more products, which allowssave time and resources in development. Developers retrieve tokens directly rather than having to create new styles each time.
  Design tokens avoid hard-writing values ​​in the code.
• Maintainability
  Design tokens facilitate project maintenance because they allow quick style update. How ? Tokens are data that contain a name and a value that are centralized.
  By simply modifying the value of a token, such as that of the color of a main button, this will impact all the buttons of the application/site in a single intervention! Developers can thus more easily maintain project styles even when design choices evolve.

The limits of Design Tokens

• The tools are not ready
  Since the format of design tokens is not set in stone, no one has yet agreed on how to use them. Every team and company has its own functioning and its own language. Currently the W3C is currently working on a format that would solve this problem. But for the moment it is appropriate to make do with the tools available and their limitations. Figma has indicated that it is working on this subject, but this feature will probably not be released before the end of the year.
• A slowdown in workflow
  Find a nomenclature understood by everyone is a true quest for the Holy Grail. In addition to that, like any system, it will have to evolve according to a good number of parameters. To this is added the complexity of documentation and time needed to write it. Teams specialized in Design System are still not widespread, and this is even more true for people dedicated to writing documentation.
  The slightest modification of one of these primitives can generate numerous updates that must be taken into account.
  Having an overview of the system is essential when implementing design tokens.
  THEimplementation is complex and requires significant grassroots effort, but I am confident that such an approach is far outweighed by the exponential benefits it can bring.

Conclusion

Design Tokens are entities with a specific name and nomenclature that store indivisible data (like spacing or color for example). They are all values ​​necessary for system construction and maintenance. We use these values ​​rather than “hard-coding” them in the code to ensure maximum flexibility, homogeneity and scalability across the different products and experience… They are also agnostic and should work on any platform.
But above all they represent a methodology and not just “variables”. They allow any Design System to grow across all the platforms, devices and products a brand may have. The variable part is just a drop in the ocean.

Take away

• Design tokens not only store information, but also transmit information.
• They are used to indicate the primitive values, but their true potential is revealed when they are used in UI component documentation.
• They are similar to a methodology and a way to build a complex system.

Resources to go further

• Tokens in Design Systems: 10 Tips to Architect & Implement Design Decisions for Everyone: To read here 
• Design Tokens beyond colors, typography, and spacing: To read here

 

 

 

Alexandre Caillé, UI & Design System Lead at UX-Republic