Design tokens: what — why — and how
to systematically unified and cohesive the product design experience.
Design Tokens have been a popular topic in recent years. Although Figma has yet to release any features that support this concept, it’s only a matter of time before they do.
In this article, I generally cover the fundamental of Design Token: What is it, Why we need it, and How it work in Figma.
What are Design tokens?
Design tokens are abstract representations of design elements such as color, typography, spacing, and many others. A combination of design elements create a component.
Each design element connects with a value (e.g background-color is #2463EB), we call this connection a design token.
But design tokens are not limited to some elements above. Any design element can be stored as a token: color, opacity, spacing, animation ease,… From this concept, we can see how a button (or on a larger scale, a whole theme) will have different looks depend on design tokens being used.
Design token tiers
To make it work properly, design tokens are organized into a tree structure, with a specific token referencing to a more general ones.
We’ll call each token layer a tier (some other names are token types, levels, groups).
Tier 1: Global tokens
Token in this tier store the raw values that form the foundation of design elements. You may have seen some other tier names: core tokens, reference tokens, option tokens, but they’re all refer to the same meaning.
Tier 2: Alias tokens
These tokens refer to global tokens. Its name describe the intended use in a specific context. Other tier names can be: semantic tokens, system tokens, decision tokens.
Tier 3: Component-specific tokens
These tokens usually inherit from alias tokens. They represent every value that associated with a component, and always being named as specific as possible. Other tier names can be: scoped tokens or overwrite tokens.
Namespace
Sometimes you’ll see a namespace in a token name. E.g we have “md” stand for Material Design from Google, and “ p” for Polaris from Shopify.
This namespace helps to avoid problems when your design tokens use the same names as tokens from other systems that are used in combination.
Why do we need this complexity?
From the perspective of a product designer, I have to admit it’s a complex concept to apply to your works, especially if you’re not familiar to how CSS work. There are several benefit of using design tokens, I‘m mentioning some significant ones:
Scalability
Design Tokens make scalability an easy task by allowing elements such as colors, font size, spacing, border radius and other variables to have a unified definition and be easily updatable. This means that any changes can be applied consistently across the entire system, saving time, effort, and cost.
Tech companies simultaneously develops multiple products, each with its own theme and style. This creates different teams, different design systems and can easily lead to inconsistencies. Design tokens centralize all design elements to one place, thus solving the problem.
Design file as a single source of truth
This vision lies in the near future, but we can anticipate how necessary it is based on the current pain points we experience:
- 😢 Different teams, such as designers and developers, have different ways to manage the same assets.
- 😢 Updating minor design decisions (e.g color changing) are a redundant process between designers and front-end developers.
- 😢 Huge effort needed to update components across multiple platforms.
- 😢 Time delay for changes to be implemented & released.
Beside solving the problems, a token based concept allows teams to speak in the same design language, no matter their roles or platforms they’re working.
How it currently work in Figma?
A primitive way of using design tokens in Figma is the style system. You set a value as a style, and using that style across your components. Currently it’s limited to 4 types of value can be added to style: text, color, effect, grid.
Beside giving your design consistency, this Figma style system helps changing theme for components a much more easy task. This feature is called “Swap Library”.
Figma: fake it ‘till make it
At the time I published this blog (Feb 2023), Figma has not yet released any feature to support design tokens. There are several Design Systems built with tokens, but require you a plugin to view all the tokens in their design files.
There are several plugins to help, but you have to stick with the plugin forever as it not natively create any design token on Figma files.
My predictions for design tools
Figma has been doing really well for closing the gap between design and coding. In my predictions, applying design tokens to design tools are inevitable:
- Designers will completely in-charge of updating & maintaining styles on both designs and front-ends.
- Changes on design files will be published across platforms and products with several clicks.
- Design Operation will be a more dedicated and vital role in a team.
- Front-end developers will be free-up from corresponding workload to focus on more crucial ones.
All thanks to this design tokens.
