Design tokens solve product problems, but they also create them. Here's our experience at Parimatch Tech: how we use tokens and why we created to automate design system.
What are design tokens
Design tokens store style values, such as colours and fonts, allowing style values to be applied consistently across designs, code, tools, and platforms.
A token is a piece of UI information. You set visual parameters for a specific interface element by naming a token. For example, you can create a token for the title: set the necessary style parameters, and all titles will look the same throughout the product.
Previously, designers named styles according to the Material guide: Primary100. But such a name only tells us what kind of colour it is and how dark it is. On the contrary, the naming of a design token considers the component or situation when you need to apply this colour: control-button-regular.
You may ask: why bother with naming? The trouble emerges when you need to create a new colour theme. For example, the Parimatch brand yellow works great in dark mode. But in the light mode, it needs to be replaced with a darker shade or even solid black. This is a long and inconvenient process without tokens, as all changes must be hardcoded.
We quickly realized that such a system could not be scaled and maintained. So, we found a solution — design tokens.
How design tokens save designer’s time
Design tokens solve several problems at once:
- support for as many colour themes as you want;
- enable rapid design change;
- provide product consistency.
Design tokens are the only convenient solution if your product supports light and dark modes. You create one design and get two results: the dark mode can be recoloured to the light mode with one click. Design tokens also can be used to replace fonts globally on a product — mainly if you use different font pairs on iOS and Android.
Tokens help to change the style of a product quickly. For example, if you decide to use a different button shape or even recolour the entire product in new brand colours, with tokens, you can do it in a couple of clicks — and save time for designers and developers.
Tokens work like a ready-made library of solutions. Designers don't need to think every time which shade of gray to use for regular text and which one for hints — tokens already have all the answers in their names. This automates the design process and prevents mistakes.
Another significant advantage of tokens is the consistency of design and code. How recolouring works for a designer is the same for a developer.
How we use design tokens at Parimatch Tech
With all the pros, design tokens have their cons, too. At some point, we have had too many tokens. Such a large system is hard to work with and maintain. In addition, we are constantly improving them and creating new ones. How can the frontend understand which tokens have been updated?
The answer is automation. We use Continuous Integration (CI), a Continuous Release cycle. CI tool checks the styles in Figma and translates them to the code. So, everything that the designer does with styles gets to the developer in real-time.
Without automatic delivery of tokens, there is no point in using them, so designers shouldn't give up on this process. When creating a design system, the design must match what's going on in the code. And it is the constant checking of tokens that synchronizes the design and the code.
There are various third-party solutions for design implementation. Our scheme is this:
- The developer provides a link to the Figma file for the script that runs on CI.
- This script downloads the file and extracts its contents (tokens and images).
- CI then builds several packages for both web & mobile platforms. Finally, these resources are uploaded to their respective repositories. At this stage, tokens are ready to use in the code.
We also have a channel in Slack: notifications are sent there if the tokens have changed.
Other schemes don't work equally well for all three platforms. They require a massive add-on for Figma, which is hard to maintain. In addition, a plugin may crash — in this case, the product will crash, too. It would cost us dearly.
Therefore, we use native methods. We have all the styles in Figma. If any plugin crashes, nothing will fall apart — the system won't be so convenient to use. And if Figma offers its native solution, we can quickly move to it.
How we name design tokens
In Modulor, Parimatch Tech's design system, token names consist of three levels, different in the hierarchy.
- Global colour mode. Light mode, dark mode, or other colour modes.
- Component group. At this level, we group the components. For example, a group of backgrounds includes all the backgrounds we use throughout the product. There are also groups with controls, text styles, icons, text fields, dividers, and dynamic colours (this group includes colour blocks and content).
- State or unique style property (primary, hover, disable).
This structure makes it easy to navigate the design system and scale it. And for developers, the token's name is an instruction for use: if they see that the colour is called "Title," it is immediately apparent that the heading should be this colour.
Token Master. Why we created our token management plugin
Tokens solve many issues but also create new ones. For example, let's say there is a yellow button. This yellow colour can be used not only in buttons but also in icons, switchers, and text. Again, remember our naming approach — a token is created for each element, but they are all the same colour.
Colour duplicates are OK as long as there aren't too many. For example, imagine you are a designer whose brand colour is green. If you rebrand tomorrow and become red, you will have to find and edit 45 green tokens manually. Another example is the VK design system and its 150–200 styles. We knew that soon we would also come to such a state. Therefore, we solved the problem in advance.
This is how Token Master was born — our plugin for Figma that automates colour design tokens. It groups tokens with the same colour HEX value. Do you need to recolour 45 green tokens in red? The plugin will find and recolour them in a couple of clicks.
Essentially, Token Master is a global token. In web development, you can create a dependency between tokens: if you change the colour in the global token, it will also change in the rest. But in Figma, there is simply no such function, so we "added" it ourselves.
Token Master is an incredible time-saver for a designer. For example, you can create a new colour theme in ten minutes. Without the plugin, I would spend two days a week without tokens.
Future development of Token Master
We didn't stop at colour management. New features coming to Token Master soon:
- Switching between light and dark modes right in the plugin. So, you don't need to create different designs for different colour modes. Plugins with this feature already exist, but they require access to complete editing of all files. This doesn't suit us: we can't give access to style editing to all designers in the team.
- Fonts and shadows management. This function will work in the same way as colour management.
Stay tuned!
Token Master Team
Daniela Muntyan, Design Director Parimatch Tech
Vladislav Kozulya, Lead Software Engineer Parimatch Tech
Oleksandr Kharchuk, Frontend developer Parimatch Tech
