Create Design Tokens in 5 Easy Steps
A practical guide to unlock the benefits of design tokens and improve your team's workflow.
Design tokens are a powerful tool that can streamline your design process, increase consistency, and facilitate collaboration between different teams.
We all know the theory.
Getting started is often the biggest hurdle, and trust me, I've seen it time and time again!
No two people work the same way, but when it comes to these five critical steps, they're universal and cannot be skipped.
#1 Set a naming convention and taxonomy
Before you start creating design tokens, it’s important to establish a naming convention and taxonomy that everyone on your team will use.
A practical way to do this is running a workshop that involves designers, developers, product owners, and more.
The goals of the workshop should be:
set a hierarchical naming structure, defining categories, elements, properties, variants, and more
exercise the naming structure with the team, creating as many design tokens as you can and aligning everyone on the method
create a taxonomy document, listing all the terms and decisions
Here it’s a shot of a Miro board I recently used in a workshop with my team:
I was asking participants to choose the design tokens categories by picking votes from aside column and put them on the post-its. A simple but effective exercise.
We repeated the exercise for other elements like: properties, variants, components.
#2 Define tokens levels and groups
The levels of design tokens are tiers that are commonly used to organize them in a design system.
Each tier adds a specific capability to design tokens which belong to.
Probably you have seen theme in action with the following names, depending on specificity:
core tokens
component tokens
foundation tokens
specific tokens
semantic tokens
alias tokens
global tokens
Repeat the exercise for all design tokens tiers. You’ll end up with a shared sense of organization.
#3 Start with the basics
Once you have your naming convention and taxonomy in place, it’s time to start creating real design tokens.
It's best to start with the basics, such as colors, typography, and spacing.
These three categories are the scaffold of any digital interface.
For example, you could define your primary color, secondary color, font family, font size, line height, and spacing units.
#4 Experiment with design tokens
After you've created your basic design tokens, you have to experiment with them in your design. This will better understand how they work together and help you refine your design system.
To experiment with design tokens, you need to be open to continuous changes. Don't set rigid rules.
Here are some practical tips to experiment with design tokens in Figma:
Create a design token library so that they can be easily accessed and reused across your designs;
Experiment with different variations of your tokens to see what works best;
Get feedback: share your designs and design token experiments with your team or other designers for feedback. This can help you refine your design tokens and improve your overall design system
Document your design tokens: as you experiment with design tokens, document them in a style guide or documentation, so that they can be easily referenced and used by other designers on your team.
#5 Wait for patterns
As long as you will play with the tokens for a while, you will see patterns arise.
Perhaps you may discover that some tokens are unnecessary or that you need to create new ones to better support your design. That’s the moment to add, remove or change tokens.
It's important to stay flexible and willing to make changes. You can refine your design tokens over time to make sure they are valuable and effective.
In conclusion
By following these steps, you can create a set of design tokens to help you create more consistent and efficient designs.
With a solid set of design tokens, you can focus on creating great designs instead of spending time tweaking individual design elements.
Design Tokens Manager
Design Tokens Manager is a powerful Notion template designed to help you streamline the design tokens management. Whether you're a solo designer or part of a team, this template can help you manage and create a cohesive design language for your projects.