2

I have created a few design systems in Figma for different companies. Some are simple, and some are complex. But till now I can't understand the concept of design tokens. Every article or video I watch just says jargon like 'It helps to store design decisions for our brand...'. Figma does have some tokenising elements like colour, typography and effects.

But what more can be done?

The more I try to learn about it, I'm faced with complicated concepts like token alias, nested tokens, and headless system. I can't fathom these without understanding the basic concept of tokens. Also, I understand it helps in theming somewhat. But how?

3 Answers 3

2

I'm going to give a simplified explanation of what I understand.

Tokens = variables

sort of...

In programming, a variable is a container where you store a value. A design token is simply a variable by another name.

You use tokens to represent a property. For example, if I wanted to attribute a background color to my button I'd create this token:

$button-cta-background-color

I'd like to attribute a certain blue value to it:

#2680EB

But instead of doing it directly (because who knows by heart what color is #2680EB? I might also have other colors in my design system) I create a variable describing this color a bit better:

$blue-400 = #2680EB

Then I'd apply this variable to my button:

$button-cta-background-color = $blue-400

This token would be placed in a list, together with other tokens forming the design system.

What does this tokenization accomplish here?

  • it describes what attribute is that (the background color of a cta button)
  • it's easier to tell what color it is using (blue-400)
  • the next time I need to change the color theme of all my cta buttons, it's easier: I only have to change the value once in the token definition. All buttons using that token to define its color would be automatically updated.
  • it makes developers lives easier, they also don't have to go hunting all over to find all properties of all elements, it's all organized already.
1

Luciano explained in great detail what tokens are and how to use them. I just want to add some material where you can find the best practices of large companies:

1

Metaphor Time! (which may or may not make things more confusing and may or may not be completely flawed)

Think of the periodic table of elements. And let's take, for instance, the element of Gold. If we were just sitting around as a product team talking about gold I don't think most of us would recall the atomic number of 196.6657. And then the engineers all start running off trying to build off of 14K or 18K gold...and designers are designing in 24K...which are all different from our true gold. So we say, Au-79 (token) is our standard for the element with an atomic weight of #196.6657 and we agree to refer to it as "Gold" (alias of the token). Now we have achieved a shared understanding both with the name to use in our conversations/handoff notes, and an agreed upon absolute for what it actually is.

What's in a name? That which we call a rose by any other word would smell as sweet 🌹

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.