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 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?

1

2 Answers 2

3

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:

enter image description here

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

4
  • Ah so it's like each line of css. 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?
    – Bluebug
    Feb 1, 2023 at 17:16
  • 1
    Yes to the first question, and for the second question see edit, I have added a link to a page that explains it step by step with examples
    – Devin
    Feb 1, 2023 at 18:08
  • 2
    Good answer! I just would correct ”most granular molecules”, since in Atomic design, Molecules are already combinations of Atoms. The Atom is the most granular piece in Atomic design (and physics :)
    – Andy
    Feb 1, 2023 at 20:44
  • thank you Andy, you're correct, I edited it
    – Devin
    Feb 1, 2023 at 22:30
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.

4
  • Ah, I know a little bit of CSS, so I get your explanation now. But then I'm confused about what token aliases are! 🤔
    – Bluebug
    Feb 1, 2023 at 17:11
  • 1
    Hm. That, I don’t know. I’ll look it up and try to understand. Maybe it’s like using yet another name for the same value? Like padding-h=.5rem; padding-left=$padding-h;
    – Andy
    Feb 1, 2023 at 20:51
  • Sort of. I have been studying more since I posted this and I found it's like saying: This hex code is called red-50 and red-50 is supposed to show critical states ($state.critical) and when we need to show some component in error state, we say the token is component.error which refers to $state.critical. So basically state.critical and component.error are the aliases of red-50.
    – Bluebug
    Feb 1, 2023 at 22:21
  • 1
    I see thanks! So actually it’s exactly what I suggested, technically. To take the Bootstrap example again, they are doing exactly that with colours: $red: #dc3545 !default; $red: $danger: $red !default;
    – Andy
    Feb 2, 2023 at 8:51

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.