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 jargons 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, headless system. I can't fathom these without understanding the basic concept of tokens. Also I understand it helps in themeing somewhat. But how?

I even asked ChatGPT for simpler explanation and got this 'Design tokens are created to ensure consistency across the entire product or product line, making it easier to maintain a consistent design and reduce the amount of time spent on individual design decisions.' I thought components are there for the same purpose?

Answer 1

Simply put: the values used for components in a design system

Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a color as a RGB value, an opacity as a number, an animation ease as Bezier coordinates. They’re used in place of hard-coded values in order to ensure flexibility and unity across all product experiences.

https://spectrum.adobe.com/page/design-tokens/

If we take Atomic Design as an example, a token would be the most granular atom in the system, since tokens are values for the element, see figure below:

There is a very good explanation on this page (from which I took the above image). But the bottom line is that it's a way to simplify tasks and allow quick application and modification of elements from a design system.

Edit: Token mapping explained

Answer 2

Personally, I think of Design tokens as variables, if you’re familiar with the concept from development. It’s exactly what they become once put in code.

They would be even smaller than an atom in the Atomic Design metaphor. They are not a component, they will never be put on an interface just like that, and the user cannot interact with them.

Just as you can exchange design tokens in the design tool, you can exchange a set of variable values against another set of values in code. This is how theming in Bootstrap works.

Pushed even further, these variables (or design tokens) might even be changed at run time, in other words by the user, for example by switching theme. All that might need to be done is to switch tokens.