UX Drill 13— What is a “Design Token”?
This is part of my drill-down journey of UX design during my graduate program in Human-Computer Interaction. Despite rigorous 4 years of work experience, I realized there are “some gaps” in my knowledge… Still!
My work was primarily focused on branding and user engagement. Working in an advertising agency for a big tech company like Samsung meant that most of my work revolved around meeting our clients’ needs rather than focusing on the usability or accessibility of our end users. This motivated me to return to school to study Human-Centered Design.
From today, I will hone my skills in UI/UX by specifically focusing on the parts that were always confusing or vague to me, even as a design practitioner. Just to help my memory — and yours as well!
The more I learn about design systems, the more it becomes clear that there are so many things to learn, which is overwhelming, just like Config every year (LOL) Still, it is FUN and intellectually stimulating.
TL;DR
What is a design token?
(1) Design tokens are design decisions translated into data.
(2) Design tokens are name-value pairings that represent small, repeatable design decisions.
In Adobe’s Spectrum design system, this is explained in detail.
As designers in 2024, we always have to work with engineers.
To communicate, we need a common language;
"Token” is a shared language that optimizes communication without the hassle of reading each line of hard-coded values.
“Design tokens are a methodology for expressing design decisions in a platform-agnostic way so that they can be shared across different disciplines, tools, and technologies. They help establish a common vocabulary across organizations.”
— W3C Design Tokens
Google defines design tokes as this:
Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code.
So, “token” is a universal language every company member shares.
Why use “tokens”?
Efficient
Tokens can streamline the work of building, maintaining, and scaling products with a design system.
Scalable
You work for a company, not a single product. And all products follow a lifecycle of birth and death, just like humans. You need a system to keep it consistent across different products/businesses.
Central Integration
You might love Samsung Galaxy or Apple smartphones. As a design student, you can create app screens that fit your device size on Figma. However, in real life, you must consider all the devices and potential applications when you design.
With design tokens, you don’t have to make new design decisions for different platforms. Design decisions(“Tokens”) can be documented in a platform-agnostic and shareable format.
Tokens can be formatted in JSON to create a consistent design experience. When you make a design system using tokens on Figma, you can export to JSON for use on diverse device platforms.
Hence, tokens act as “a single source of truth” just like constitutions.
I also found this tip from the Google design system helpful.
Despite all, I highly recommend you try using design tokens.
Then, can we learn to speak this “token” language?
I will continue on this in the next article. Thank you for reading this and I appreciate your claps or comments :)
