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?
5 Likes
Design tokens cover major design decisions. You are right, few are supported in Figma, these are:
- Colours
- Text styles on very primitive levels
- Effects
But there are more to have in a truly mature design systems
- Spacing
- Border radius
- Typography scale
Here is my humble attempt to workaround spacing and radii - Component swap property is awesome
So they are similar to variants but in more atomic level? So meaning, we can build an entire component by specifying different tokens only? 
Also, how do we map tokens? For example, how we tell theme.background.light and theme.background.dark are similar and interchangable? Also what are token aliases?
1 Like
Well, kind of. Imagine having a style for border-radius, when instead of memorizing a value you just pick one option from a single set. So you define a set of values first and then assign them to individual elements/layers. The same way as we do with colour styles and text. Or you not just set spacing inside your component randomly but pick a value that is already defined.
Hence why tokens are all about the decisions you made. How big or small your element is going to be. How much do I round my corners? What colours do I use? And what would be my typography preference?
1 Like
it’s because they don’t make sense. Very confusing and redundant to have variables, styles and tokens.
4 Likes
I am new to tokens too and learning it, I faced similar challenges and found a course on skillshare that really helped me a lot in understanding tokens. Currently I am practicing it, hence thought to share it with you.
adding a link as reference.
https://www.skillshare.com/en/classes/design-like-a-pro-figma-tokens-for-consistency-and-efficiency-for-design-system/855172696