UX Drill 15 — Applying “Design Tokens” to Figma Variables (Part 1)
Hierarchy of design tokens and how they can be applied on Figma
In my last article, I wrote about variables and how they differ from a style by having specific purposes.
Tokens are ready-made design decisions and a common language within a company, and variables are used to create these design tokens.
In this article, I will look at some existing design systems to understand how different companies use “tokens” and maintain them in a consistent and scalable system.
How to name and use “Tokens”
(1) Adobe
As the image above shows, design tokens are named according to a set of naming rules.
Adobe’s naming structure is composed of 4 levels:
- (1) Value
- (2) Global token
- (3) Alias token
cf. "alias" means "second name/pseudonym, and we can understand it as “referencing” - (4) Component-specific token structure
as it goes from (1) to (4), naming gets more usage-specific.
Following this hierarchy,
Each token is given a “carefully chosen” name that shows its “purpose and scope” and follows a naming convention.
(2) Microsoft
Let’s look at Microsoft’s fluent design system as another example.
This design system follows a simpler hierarchy of only 2 levels :
- (1) Raw (Stored) value
- (2) Global token
- (3) Alias token
Compared to other brands, the Fluent design system has fewer levels.
However, as in the image above, they do so by compositing global tokens when naming more usage-specific tokens.
“Alias” means “alternate name”. In design tokens, it means “referencing” other tokens of lower levels. In this case, Brand,Foreground,1, are all “global tokens” in the Fluent design system.
(3) Google
Let’s look at Google’s:
This is how the M3 Design System names tokens. At a glance, this way of naming looks a lot more complex.
However, it is literally just a naming system. In essence, it's all similar.
Raw value #E8DEF is translated to a global-level token Secondary 90, then, toward a more specific purpose, pointing to a specific component at the top of the hierarchy.
Design Token Hierarchy
Now, it’s time to wrap up, with just an image:
This image is created based on Adobe design guidelines. However, all the details are gathered from different brands, including Uber, Microsoft, and Google. I could make this knowledge mine thanks to this exercise.
Understanding this hierarchy is important.
You can always jump into Figma plugins and ready-made components in the community and build yours faster, which is another valuable skill for a designer. But what if you are a designer at a startup or for AI software, building something entirely new?
It has always been a crucial work ethic for me to thoroughly understand the concept I am using, and thanks to this exercise, I could.
Now, I know why we need “variable collections” in Figma. It signifies each level of the Design Token hierarchy.
Next time, I will write more about my experience of using “variables” in Figma.
Thank you for reading this.
Your support and applause motivate me to keep working! :)
Let’s connect. Here is my LinkedIn profile.
