I will start by saying that this is a work-in-progress story. After a few months of dealing with this subject, I might conclude and start to understand what is the best approach for Design Tokens (at least for my needs so far).
So the story begins a few months ago when I read an article about a plugin called Figma Tokens for Figma. At that time I was already introduced to design systems and had an idea about the subject. After reading it, I remembered that the first time I heard about tokens was back in the days when I did a little bit of frontend development, the difference is that in CSS they use the syntax “var” (or at least this is how I know them) for tokens.
The next step was of course to try that plugin and see how it works. I’ve used the main colors from my portfolio and started to build the design tokens. I thought I’ve cracked the code and everything will go smoothly from there. The problem was that I understood the concept completely wrong and that there are still a lot of other aspects that need to be taken into consideration.
While the concept of defining tokens for spacing, typography, border, radius, etc, was pretty clear to me, the problem was with color naming. I found it difficult to understand and build a good scheme for naming and structure tokens, but i will share all the steps I took so far.
First attempt to generate a color palette
So my initial idea was to use the HSLA from the primary color and smartly build tints and shades. I defined a token called $primary-h which has only the value 226 from primary color HSLA(226, 100%, 61%, 100). Using that token, I started to build other tokens and I’ve always used this schema to define the colors: $primary-70 = HSLA($primary-h, 100&, 70, 100), changing only the luminosity for each.
And then I said: “oh, why don’t I use the magical power of Design Tokens, and change everything with a single number that corresponds with my H from my beautiful new primary color?”. The color was a green HSLA(97, 70%, 54%, 100), and I only took 97 and updated my $primary-h value.
Of course, that didn’t work and I learned that the hard way. My initial and bad assumption was that all colors have the same Saturation and it will be enough to change only the Hue and play around with the Lightness in order to generate my color palette. Later I found that this trick might work if I will change my $primary-h to $primary-hs and defined the Saturation as well.
Building better and more accessible color palettes
After reading a few more articles about design tokens, I started to understand also the importance of having a good color palette in terms of accessibility. I found a tool developed by Adobe called Leonardo (http://leonardocolor.io). With Leonardo, you can start from your primary color and start to generate all the shades and tints needed with a contrast ratio for each color so you no longer need to manually check contrast. I know there are many other tools, I found recently a bunch of them, but this is what I stick with for now. Here are some other examples of tools to generate colors:
https://maketintsandshades.com/
With a few tweaks and changes, plus some other colors added like neutrals, success, danger, info, and warning, my accessible color palette was ready. I set some rules for how the colors should be used in the next steps, so the palette was split in two: one with colors good for backgrounds, and one with colors good for text and content over the backgrounds.
What about dark mode?
One of Leonardo’s greatest features is that it lets you generate dark mode color palettes in seconds. You only need to set background lightness and you will have a full palette with good contrast and good accessibility. So I’ve used this feature to build the dark theme as well.
Naming conventions
One of the problems that I encountered while I was building the design tokens, was the naming of the actual tokens. How should I name those tokens? How many levels are necessary? I’ve seen a lot of popular design systems and tried to find a common pattern, a naming convention at least for the colors, but I didn’t find anything for now.
After reading tons of articles, and looking at famous design systems, I realized that some design systems are using just two levels of tokens definition. Something like reference tokens or base for the first level, and for the second level they use system tokens or alias tokens.
This is just an assumption but probably how you name your tokens it’s not so important as long as you establish a naming convention with your team and everyone else understands how they work and how it’s structured.
What’s next?
To use those tokens in Figma I generated all the color styles, typography, and effect styles and published them as a Design Library that can be used on all projects as the source of truth from now on. Inside this library, I also included all the components created so far, each component is using the defined tokens for styling.
The other important aspect of those tokens is how you handoff them to the developers. I found also a lot of articles about this, and from what I understand so far, a good way to do that is to generate a JSON file and with the help of a tool called Style Dictionary, you define those styles once in a way that any platform or programming language will consume it.
“A single place to create and edit your styles, and a single command exports these rules to all the places you need them – iOS, Android, CSS, JS, HTML, sketch files, style documentation, or anything you can think of.” (Taken from https://amzn.github.io/style-dictionary/)
The process above is not tested yet, but I am planning to implement it on my website, I already use the color tokens, but I found it a little bit difficult to understand how Style Dictionary works in this process. I will post an update once I figure it out.
Takeaways
Working with Design Tokens is a big leap for a Design System and a design team. A few years ago this subject wasn’t that popular, but knowing all the benefits that came with it made design tokens part of any product in our days and it keeps growing.
This library will probably evolve with the project as well. There is always something that needs to be added and changes that need to be made on design libraries, so keep that in mind, our work is never truly ending here.
My approach will be posted on Figma Community as soon as I have it in a more polished version. Will update this article with a link when it’s done.