Design Tokens (2024)

What are design tokens?

Imagine you’re building a new website. You want to make sure that the colors, fonts, and spacing are all consistent throughout the website. But what if you want to change the colors later? You’d have to go back and change all the code. That would be a lot of work!

Design tokens are a way to store the visual elements of a design system in a central location. This means that you can change the colors once, and it will be reflected in all the code that uses them. This makes it much easier to maintain a consistent UI.

Styles vs Tokens

Styles and tokens are both ways to store and manage design elements in Figma. However, they have different strengths and weaknesses.

Styles are more flexible and can be used to store a wider variety of values. For example, you can use styles to store colors, fonts, spacing, and even animations. Styles are also easy to use and can be applied to any object in your design.

However, styles can be difficult to manage and can quickly become cluttered. If you have a lot of styles, it can be difficult to keep track of them all. Additionally, changes to a style can affect all of the objects that use it, which can be a problem if you only want to change the style for one object.

Tokens are more structured and easier to manage than styles. Tokens are stored in a central location, making them easy to find and update. Additionally, changes to a token only affect the objects that explicitly use it, which can help to prevent cascading changes.

Ultimately, the best way to use styles and tokens in Figma depends on your specific needs. If you need a flexible way to store a wide variety of values, then styles are a good option. If you need a structured and easy-to-manage way to store colors, fonts, and spacing, then tokens are a good option.

Design Token Types

There are a few different types of design tokens, each with its own purpose.

Color tokens represent the colors used in a design system. They are typically stored as hexadecimal values, but they can also be stored as RGB, CMYK, or HSL values.
Font tokens represent the fonts used in a design system. They are typically stored as font family names, font sizes, and font weights.
Spacing tokens represent the spacing used in a design system. They are typically stored as values for margins, padding, and border-radius.
Other tokens can represent other visual elements of a design system, such as icons, animations, and images.

Design Token Architecture

Design token architecture is the way that design tokens are organized and stored. There are a few different ways to architect design tokens, and the best approach will vary depending on the specific needs of your team and project.

One common approach to design token architecture is to use a hierarchical structure. In this approach, design tokens are organized into different levels, such as root, component, and property.

Root tokens are the most general tokens, and they represent the overall look and feel of your design system. For example, you might have a root token for the primary color, the secondary color, and the font family.
Component tokens are more specific tokens, and they represent the properties of individual components in your design system. For example, you might have a component token for the button color, the button font size, and the button border radius.
Property tokens are the most specific tokens, and they represent the individual properties of your design system. For example, you might have a property token for the margin-top, the padding-left, and the border-radius.

Another common approach to design token architecture is to use a thematic structure. In this approach, design tokens are organized by theme, such as light mode and dark mode.

Light mode tokens represent the design tokens for your light mode theme.
Dark mode tokens represent the design tokens for your dark mode theme.

The thematic structure is a good choice if you want to create different versions of your design system for different themes.

Finally, you can also use a combination of hierarchical and thematic structures. This approach allows you to create a more flexible and scalable design token architecture.

The best way to architect design tokens is to choose an approach that meets the specific needs of your team and project. There is no one-size-fits-all solution.

Challenges of using design tokens

Using design tokens can be tough because dealing with lots of tokens needs a good system to store, update, and share them. It’s also important to keep them the same in all your projects.

Using tokens might be hard if you’re new to them. Make sure they’re explained well, so your team knows how to use them.

Remember, it could cost you. Tools to manage tokens can be pricey, and you might need help from pros to set things up.

Even with these issues, design tokens help teams make things look and work the same. Think well before you decide to use them.

Conclusion

Start with a small step. Instead of overwhelming yourself, begin by using a few design tokens in your projects. Gradually introduce more as you become comfortable.

Get your team on board. Make sure your fellow designers understand the perks of design tokens and are excited to use them correctly.

Embrace a design token tool. These tools simplify storing, updating, and sharing your design tokens. They make teamwork smoother and design management more efficient.

Detail your design tokens. Write clear explanations for each token’s purpose and usage. This ensures everyone’s on the same page and design consistency is maintained.

Remember, taking it slow, having team support, using the right tools, and documenting well are your key allies as you explore the world of design tokens.