Design tokens: what they are and how to work with them

What makes a designer different from an artist? While an artist can step away and enjoy themselves in satisfaction from having created a great visual piece, a designer would know that this is where the real hard work starts. Implementing the design into an actual final product across multiple independent platforms is fraught with a huge amount of work and pitfalls.

With multiple platforms, a complex project may be swamped by tons of code and design elements managed individually for each platform. This can create enough confusion for a single team or even for an individual designer. It can get even more confusing if your project involves different teams, all of which need to work together both on development and maintenance.

This changed with the introduction of design tokens by SalesForce. Today, we’ll talk about design tokens and how they can be used to make design development and implementation processes much easier and more consistent.

What are design tokens?

The idea behind the design token invention was to bring cross-platform design development to consistency by establishing a totally new data layer on top of the existing design elements. This layer would contain style values of UI elements (like color, spacing, typography, shadows, etc.) in a form that can be easily deployed on any platform.

Now, design token are individual blocks of UI data that make up such layer and they can be used multiple times without doing the same work over and over again. Think of them as of the smallest building blocks for your design system.

Design tokens vs. regular variables: the difference

If this is your first introduction to design tokens, you may be thinking how they are different from regular variables. The difference between design tokens and other variables is that tokens are platform-agnostic, or platform-independent. Let’s look at an example:

$ultra_blue-800 = #1364FF;

The $ultra_blue-800 variable can be used with a CSS pre-processor. This approach will aid you in getting your design options structured but it also has one significant drawback: variables might still leave the gap between naming and usage. Designers need to know exactly, which options should be applied for each particular context. This is where we can introduce a token:

$button_cta-background_color = $ultra_blue-800;

The token idea can be clearly seen from its name — $button_cta-background_color — the color $ultra_blue-800 is used as the background color for the call-to-action button.

How tokens can improve the design process

Now that we have a basic idea of what design tokens are, let’s look at how they can help. There are basically two approaches to working with style values: have them hard-coded in the design or use tokens. You might get away with the first approach on a smaller project that doesn’t need much maintenance. But hard-coding the values is a terrible practice when it comes to a more complex project: if you need to update a single element of the design, the hard-coded parameters will have to be updated manually each time when a design change is needed.

It doesn’t take much time to update a single instance of a value. But the reality is this value may be used in dozens of different places, each of which has to be updated by hand. Not only does it mean a lot of time consumed, but also a great possibility of forgetting to update certain the value for certain elements. This can create inconsistency that you don’t want to grow into chaos. The proper use of design tokens, on the other hand, can be of great benefit for the design process.

More flexible design

As opposed to hard-coded values, design tokens allow for a greater flexibility of the design and provide full control over the values to the designers. No longer do designers have to manually go through the entire code to make changes — with the use of design tokens, they can update the values from a single place. All changes will then be automatically applied for every platform.

Unified look across different platforms

This reason alone could be sufficient in advocating for design tokens. Today, making a digital product to be presented on all popular platforms (desktop, web, mobile) and having a unified visual style across these platforms is a must for a serious business. Tokens are a great aid to keep your design system values in sync across all platforms and projects. They can be formatted for each platform as required. For instance, you can use HEX value format for a web version of your product but use RGBA format instead for an iOS version.

Simplified development process

Finally, design tokens make the development process much simpler. Using design system software, designers have access to the most up-to-date design attributes and can introduce updates without changing the code — simply by using design tokens in code like npm package.

Token management tips and practice

Now you may start feeling tempted about implementing design tokens in your project. But first, let’s look at some tips and the guidelines for simplifying the token creation process. What you’re about to read further was built based on recommendations from Brad Frost and Nathan Curtis — two top design systems advocates.

Do interface inventory

If you want to create design tokens for a project under development, you need to break down your pages to their elementary level. And doing interface inventory will help you in doing so. After conducting your interface inventory you’ll end up with a number of all sorts of atomic elements that make up your entire design.

This seems like a lot of work, but you’ll definitely thank yourself later. You can also make it easier by turning to the CSS Stats tool — it will tell you, how many style properties you have in your stylesheets. This can point out areas requiring optimization. For example, after analyzing colors in your project you may see that some colors are very close to each other, and you may choose to replace them all with a single color.

Define the token creation criteria

How do you know that a style option has to become a token? Turning every single style option into a token is not the most optional solution as some of them are used a lot in your design, while some others may only be used once or twice. Therefore, having sound criteria for creating tokens is very useful. Even a simple criterion like ‘used N times’ can be very effective in deciding where you need to create your tokens.

Decide on the naming conventions

Not necessarily will you get an enormous amount of tokens, but having a well-defined naming convention will help eliminate potential future confusions and mistakes, especially when multiple teams work on the same project. The risk of using an incorrect token by another team that is used to different naming format cannot be underestimated. That’s why it is vital to establish clear cross-team naming standards.

A good approach is to follow the ‘from general to specific’ principle: [Category]-[Type]-[Item]-[State]. An example may look something like this: color–background–ctabutton–active

With clearly set naming conventions finding the right token from the collection is going to be easier.

Use sensible scales

For a fixed set of values, you can adopt appropriate scales to be used for token naming. You can take a numeric progression (2, 4, 8, 16, 32) and use it for your font size. Alternatively, you can apply a convenient clothing sizing scale (XS, S, M, L, XL, XXL) — with the default font size set to M, you can set options for both increasing and decreasing the size.

Make token data reusable using JSON format

JSON is perfect for pairing values. This will enable you to adjust design options for various pre-processors (SASS, LESS, Stylus). Instead of replicating values stored in a CSS file for every version of your product, you can use JSON file and convert it into any variable that might be needed.

Assign a token ‘keeper’

While design tokens are meant to be used by different teams and people, it is best to appoint a single person responsible for managing the tokens. It may seem Okay to lay this task upon all participating members but a shared task may get drowned and overlooked. We all know that it is in human nature to neglect, even if unintentionally, what we think can be done by others. A more reliable solution is to make token management an important task and give it to a designated person.

Other members will still be able to propose tokens, but the final word is going to be up to the ‘token keeper’, who should be able to approve or reject the proposed tokens and provide feedback to the team members.

Ensure accessibility

You need to remember that your designs must be accessible by all users. Hence, testing tokens for accessibility is very important. In fact, automated accessibility tests should be run on a regular basis. A great tool for automating such tests is a11y. It can be integrated into your design system.

One of the fundamental principles of design is contrast. Make sure to check with the WCAG 2.0 recommendations on that. The recommended threshold ratio is 4:5:1 for standard or small text and 3:1 for larger text.

It’s also worth pointing up contrast values right in the design documentation — being the single source of truth, this may be the only document that anyone working on the project addresses.

Level up your designs with design tokens

As you can see, design tokens are not an actual tool but rather an approach. They can be used with JSON, they have also been successfully used with Figma. Therefore, the real potential of it may not have been uncovered yet. But the main idea is this: as a reliable single source of truth for designers and developers, tokens can greatly simplify the development process and help nail consistency and scalability in collaboration.