Building a Token System for Design System
What is a token?
A token in general is an object that represents something else.
What is a system?
In general, a system is a collection of elements that are working together following a set of rules for a common purpose.
Now, let’s combine these 2 words.
Token + System = Token System
To create a design we need to have various elements, from color, typography, border-radius, spacing, etc. All of these elements contain a value. For example:
Color: #ff0090
Border-radius: 8px
Spacing: 2px
Typography Size: 16px
All of these values can be converted into tokens. For example:
Color: background/primary
Border-radius: radius/type-1
Spacing: spacing/type-1
Typography: body/m
Before using the token system the design team needs to pass raw values like color #ff0090 to the developer. It is doable for one color, but if there are 10 colors in the design it will be hard, humans are prone to make mistakes. That’s why using tokens will benefit the design system.
The Benefit of Using a Token System
- Increase communication and collaboration between design and dev. With a token designer can share a human-readable format with the developer.
- The token will help maintain consistency between design and development. For example, if buttons in design have the same token name in both design and development. It means there are no discrepancies between both sides.
- Platform agnostic format, This means the token should work for any platform desktop, tablet, or mobile.
- Suitable for codes in development.
- Help the design system become scalable, Tokens will help the theming process across the design and dev.
How do we create a token?
There is various method of creating a token, for example:
A. Global Tokens
In this method, the token names are created with content-agnostic names. For example:
Color Value: #ff0090
Color Token: flamingo
The downside of using this naming method is the naming is too generic. It’s not clear where we can use this token.
B. Alias Tokens
Alias token names represent a specific purpose of the token. For example:
Color Value: #ff0090
Color Token: primary-brand-background
This type of token can be used in multiple places. It’s not too generic and too specific. Just right in the middle.
C. Component-Specific Tokens
The token names are created based on their usage in the component. For example:
Color Value: #ff0090
Color Token: button-primary-brand-background
This type of token naming will be hard to use. Because it is created specifically for the primary button component. it doesn’t give us the flexibility to use this token in other places. In the end, more tokens will be needed to cover all of the components.
Tokens are used repetitively across the design. I suggest creating the token based on its purpose using the alias method. Only add new tokens if there is a new purpose needed.
Make it generic enough so it can be reused across various places. Tokens that are too specific can only be used 1 or 2 times. This will make a big list of tokens since you are adding the tokens for a lot of use cases. More tokens more maintenance.
The example above mostly covered color tokens. For other types of token styles such as border-radius, typography, sizing, spacing, etc. The treatment will be a little bit different. I will cover this topic deeper in the upcoming article. Stay tuned. Take care :)
