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.