UI Design: I can't understand the concept of design tokens

Question

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?

Answer 1

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.

Answer 2

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:

• Material Design 3.0 - https://m3.material.io/foundations/design-tokens/overview
• Carbon Design System (IBM) - https://carbondesignsystem.com/guidelines/color/usage/
• Lightning Design System - https://www.lightningdesignsystem.com/design-tokens/