.png)
Table of contents
“I read a lot about design tokens, but I still don’t understand if it’s time for us to adapt our design system to them.”
Yesterday, we heard this from the lead designer of one of our clients. She and her team were unsure if they should change their newly created design system. And she’s not the only one. This dilemma reflects a common question among product designers: do we really need to introduce design tokens and Figma variables for our product?
So, we’re going to explore the pros and cons of tokens and help you identify if your product can benefit from them.
The ABCs of design tokens
Let’s cover a couple of essentials we need to agree on before discussing the pros and cons of design tokens.
What are design tokens?
Design tokens are the small, repeated ‘design decisions’ that make up the visual style of a design system. Tokens replace generic values (like hexadecimal color codes) with simple names that better describe the use of that value. They work for many design properties, such as color, spacing and typography, and act as a ‘source of truth’ for designers and developers to build experiences that feel coherent and clear.
Design tokens were not invented by Figma
Tokens have existed for years now and Figma just created a feature, variables, to use them in their software. Variables actually allow you to create advanced prototypes too (but we will get to this in another article). Basically, variables are more than just design tokens in Figma, but you need to learn tokens to use variables, and vice versa.
How we applied design tokens
We used tokens in most of the design systems we worked on. Here are two examples that clarify the benefits of adopting design tokens.
Switch in themes, for NeN
Tokens allow us to automatically switch from ‘Light’ theme to ‘Gas’ theme.
Switch in the component size, for NeN
Tokens allow us to manage responsiveness easily. By setting the right tokens, we have components that automatically switch to mobile or desktop mode.
Pros of tokens: why you’d love them
It’s easier to propagate design updates
With tokens, you can manage large changes in the interface with a simple click. Do you need to update only the background color on the design? Or the title color on every page? If you mapped tokens properly, you can do it by just updating a single value. Without tokens, you’d need to create a new style and assign manually every instance to the new style.
True alignment with devs
Tokens are also used by devs, so if you adopt them on Figma too, you’ll unlock a new level of alignment with the development team. Tokens are a JSON file that we can share: what you read in Figma and what the developers see are the same.
Tokens are self explanatory
Your team won’t mess up using ‘blue-500’, or ‘blue-300’ anymore, because you’ll have a color.background.primary token that describes its use. With a set naming convention, each token has a chosen name that shouts its intention and goal loud and clear.
All design properties are under control
Figma styles are not available for some design properties like spacing e sizing, while tokens are. With tokens, you have one language to rule them all.
Cons of tokens: why you’d hate them
Timing is everything
Implementing tokens at a very early stage of your design system project is not a good idea. If you have an early stage product or early stage library, you probably don’t know which types of alias or token you need. If you use tokens now, there’ll be an updating cost later. It’s not worth it, trust us.
Implementing tokens requires prep work
You cannot simply wake up one day and say “it’s time to have tokens in my design system.” To start, you’ve got to have a plan to implement tokens that actually solve your problems. And this work should be done before opening Figma to set them up.
You need to organize the token architecture for your product
Effective tokens require good architecture and organization – and there’s not an evergreen guide on how to do that, sorry! If tokens are not well organized, it is not possible to get those changes done.
It’s hard to balance ‘too generic’ and ‘too specific’ tokens
Since there’s no set rule for naming tokens or the overall quantity of token needed for a product, it’s easy to find yourself in a situation where you’ve created too many tokens… or too few.
So, do you need tokens?
Tokens are a good idea if…
You have a multi-platform product (web, mobile, desktop)
Tokens are awesome for automatically adjusting the interface when switching between mobile and desktop. This can include spacing, element size, typography and even switching to a specific component variant.
Your product requires themes
Dark-light, private-public, or other sub brands all count. With tokens, you could switch themes and instantly see the interface and component change too.
You’re addicted to prototypes
Figma variables help you a lot in designing advanced prototypes. Forget about duplicating screens to create a single animation; interactions can change variables and the interface accordingly in the same frame!
You already have a design system and you feel limited by styles
It’s time to take the next step: with variables you can create tokens that give you the unbridled power to control almost every aspect of your product interface.
Are tokens ever a bad idea? Well, if you have an early stage product, or if you’re just starting your design system journey, or if you don’t have changing themes in your product, you probably don’t need design tokens.
It’s as simple as that.
Want to know more about tokens?
- Join our webinar on how to automate tokens handoff
- Take part in our workshop specifically about design tokens. Only a few spots left!
- Download our Figma template on design tokens
