Design Tokens for Dummies
Design Tokens are the missing link in the Atomic Design methodology.
Intro
While haters will claim they’re not that different from CSS variables, the truth is they go far beyond that naive comparison and structure a solid Design philosophy.
Atomic Design refers to organisms, molecules, and atoms, from top to bottom. To these, we now add the “Ions” or, Design Tokens.
Design Tokens are not new and have been around since 2014, coined as “Design Tokens” by Salesforce.
Note: The reason I am only now paying more attention to them is mainly because of Figma Tokens and its approach to self-documenting and great support in interface creation.
They register choices: — I, “your name goes here”, choose “#020202” and “#3DDBD2” as colors to include in my digital product. The first color will be called “fluffy” and the second “spirit”.
They register decisions: I, “your name goes here”, decide that “fluffy” will be my font color and “spirit” will be my accent color.
As a possible analogy, I first choose the actors who will play Batman in the coming years, but then I simply call them Batman. I no longer care who is behind the mask because in my daily tasks — OR IN AN EMERGENCY CASE — I will refer to all of them as “Batman”.
Act 1: Independence day.
No design is finished by the time we hand it over to the developers for implementation or upload it live to the server.
No designer likes to see developers making random styling decisions so little to chase them with corrections and improvements such as “please change padding from 16px to 20px”.
On the other hand, no developer likes to spend his time pretending not to read the designers’ messages and emails ;)
Design Tokens, when implemented correctly in the Design+Dev flow, allow Designers to fine-tune their styles with full autonomy, straight from Figma.
A few other articles that might interest you:
https://bootcamp.uxdesign.cc/design-tokens-for-better-design-systems-ab6d833e8d2f
Act 2: How does it work?
Now I can record all these guidelines and inform the creators, in human language: — Use the color “spirit” here and the color “fluffy” here and there.
If anything changes in the color values, the change is practically invisible to the developers. Let’s see:
Problem: I need to change the color “fluffy” from “#020202” to “030303”.
Past Solution: I send a Slack message to the frontend developer, send him an email as well, and finally pretend I’m getting a cup of coffee and accidentally spill it on him and then say “by the way, can you quickly change the color of the HEX here and there?!
New Solution (with Design Tokens): I go on my tokens file, edit the value and push a new JSON* file to GitHub. JSON is converted to CSS and deployed to the server.
Sooner or later I will write a more extensive article on how JSON and Design Tokens work together. For now, just assume that the tokens are exported as a JSON file and then transformed into CSS, SWIFT, or SASS. It is language agnostic.
Act 3: Do Design Tokens need a tool or a plugin?
No. Design Tokens do not describe any tools and are completely technology agnostic. A simple JSON file can be the source of truth for all your Design Tokens. What designers and programmers are currently trying to do is to find easy ways to generate and maintain these JSON files, rather than using a simple code editor.
That said, I can also make fire with chopsticks. Does it make me feel more manly? Yes! Is it the most efficient way to generate fire? No!
In the same way, there are more and less efficient ways of working with Design Tokens.
These range from “fully handcrafted” to “fully automated”. As the second extreme is more interesting, it will be our focus.
It is my belief that in the near future Figma will support Design Tokens natively. Until that happens, the best I know of in the market is the “Figma Tokens” plugin.
This plugin allows you to:
- Create and manage Design Tokens.
- Manage different themes (for example light, dark or high contrast).
- Create a living Figma styleguide. A document that updates according to the changes you make to your Design Tokens.
- Export Design Tokens as a JSON file.
- Upload the Design Tokens to GitHub and allow teammates to contribute. (with version control).
- Change styles (for example the border radius or surface color on an entire design file or page)
- Easily swap themes on the same Design file.
Final Act: Conclusion
You may feel like insulting me here and there because I am not specifying to you “how” these things are done. Please understand that this level of detail is not the main purpose of this article and that it would make it too complicated.
I consider the inclusion of Design Tokens in modern Design Systems to be extremely relevant. The plugin makes the entire process much more enjoyable and magical.
See it in action (a quick, purposeless video).
Caveat: For Figma files that are too large, the plugin can take some time (5 to 30 min) to search and update all token instances. It is recommended that you split your Design System into different files also due to Figma’s limitation of 2GB per file.
If you are interested in Design Tokens (and, of course, other daydreams), follow me. I plan to continue exploring this topic on Medium and even consider creating an online course around it in the near future.
