What are design tokens?
What are design tokens?

What are design tokens?

Design tokens are a set of styles, typically colours, typography and sizes that are used to form a design system. They are system agnostic and can be used to give consistency across multiple platforms.
Using design tokens ensures that there is a single source of truth for each value, we know that "primary pink" is always going to be defined in the one locations (the tokens file) and that today we will give that a value of #F63E7C
{
  "name": "primary-pink",
  "value": "#F63E7C",
  "type": "color"
}
This is our design token, it holds the value in a yaml or json file, but it can talk to all the different parts of the software/product that need to know the value.
 
 
notion image
 
If we wish to change the colour of "primary pink" we only need to change it once, and we know that all the other locations will look at this value and get the latest information from a single place.
 
Depending on how widely and how comprehensively you want to use the design tokens will depend on your setup. You can have a simple 2 column table with the name and value listed out. Or you can have version controlled json files that update automatically via APIS.
 
However you choose to format your files, the most important thing is having them in a single location. This enables developers, designers and anyone else who needs to know these values can rely on the information being correct. Over the years we've had inconsistent locations for these values, with developers not able to access Sketch/Photoshop/Figma and designers not able to see the code framework that the developers are working on.
 
The tokens become part of the design language that everyone adheres to and you set up your design dictionary so that everyone knows how to talk the language.
notion image
 
Using the atomic design principles we can see that Design tokens are the smallest denominator, these are what atoms are made of, and then atoms grow in to bigger combinations of things to become web pages.
notion image
 
We can build a combination of tokens to create something, for example if I have my "primary pink" colour and I also have tokens for padding and border-radius - I can declare 3 tokens combined to create a button.
 
Find out more about design tokens from the people who know:
Design Tokens W3C Glossary: https://www.designtokens.org/glossary/
Design Tokens in Figma - How to get started: https://www.youtube.com/watch?v=Ka1I5TphDb0

Find out what DesignbyXperience can do for you

Contact me for freelance work or for articles.

Contact Me