Design Tokens: What are global, alias and component tokens — Part 1
This is going to be series of 3 blogs which are part of design system series, in this 1st part, we’ll delve into the world of design tokens, specifically global, alias, and component tokens.
What’s a token?
Design tokens are like the building blocks of a design system. They help keep things organized and consistent, like deciding on colors, fonts, and spacing in a neat and organized way.
Imagine them as the colors in a painter’s palette. They’re the foundation that guides how everything in a design looks and feels, like the colors, how things are spaced, and what fonts to use.
So, design tokens are kind of like the rulebook for making things look good and consistent in a design.
What’s a global token?
Global tokens are the big shots in the design token world. They’re like the celebrities that everyone knows. These tokens are important values that are the same across the whole design system.
Imagine if everyone agreed that ‘Blue-50’ means a specific shade of blue (lets say #2F45FF is Blue-50), and every time we say ‘Blue-50’, we all know we’re talking about that exact shade. It’s like a secret language for design!
What’s an alias token?
Aliases are like nicknames for design values. They give a more meaningful name to those design tokens, making it easier to understand what they stand for.
Alias tokens often reference -> global tokens to ensure consistency.
For example, instead of saying ‘Blue-50’, we could give it a cool name like ‘primary-brand-color’. It’s like giving a friendly name to a friend — it makes it easier to remember and understand.
What’s a component level token?
Component-level tokens are like special instructions for specific parts of a design, like a button. They allow us to tweak how a certain element looks, without changing everything else in the design.
Think of it like a special setting just for a specific button, making it unique and cool. It’s like customizing your own special edition of a toy.
How should we name tokens? We should keep the names simple and clear. It’s like naming a character in a story. We follow a simple formula to make it easy to understand what each token represents:
Token Naming: “Name + Element + Variant + State + Property”
see the below example to understand better:
By following this formula, we create names that tell us exactly what each token is all about. It’s like having a name tag that explains who we are and what we do.
Likewise, we have to create tokens for all the UI components in design system. every property in each UI component should be called from Design tokens. Below is the example for button background token in component level
Lets go to part 2 and we will get to know how to create tokens in figma
Thank you for reading :)
