Design tokens are a powerful tool for creating a consistent, unified look and feel in a design system. By providing a way to share design elements between teams, and create complex elements from atomic pieces of design, they can streamline the design process and save time by reducing errors. Additionally, design tokens can be used to create a unified look and feel across a product or organization's design system, making it easier to ensure consistency. With the resources available, designers can easily learn how to use design tokens and start creating a cohesive design system.
It is obvious that design tokens need to become an official format, such as JPEG or MP3, so we can continue to harness the power of them. Another big aspect of having a formal format is that tools will use the same specifications. For example, we have millions of image viewers and they all open images in the same way because they use a shared language. Imagine if you had to do some setup for each tool before opening the image, or if you exported in one tool and the image became unreadable by another tool. It would be a disaster.
When design tokens become a format as JPEGs or MP3, design will enter a new era. Code and design will become more closely intertwined. Imagine being able to import Tailwind classes into Figma and quickly creating a stunning landing page – this will soon be a reality.
Good news is that there is an official team that works on design token specification. Interesting read is also how this format might look.
Since design token files are JSON files, all the basic JSON types are available:
- String
- Number
- Object
- Array
- Boolean
- Null
In shadows of a tool we use this is how it might look.
{
"Majestic magenta": {
"$value": "#ff00ff",
"$type": "color"
},
"Translucent shadow": {
"$value": "#00000080",
"$type": "color"
}
}
We are closer than ever to having tokens as a powerful format for crafting our designs. I hope that pushing pixels will become a thing of the past, and that focusing on the problems we are trying to solve will become the default of our job. Exciting times!