A Simple Guide to Design Tokens, Tokens Studio and Resolver Graph

Let us take a look at how some leading companies have defined design tokens:

Mozilla:

A design token is an abstraction of a visual property such as color, font, width, animation, etc. These raw values are language application agnostic and, once transformed and formatted, can be used on any platform.

Salesforce:

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.

Useful to mention here is that Salesforce was essentially the inventor of design tokens as a part of their design system.

Design tokens are becoming increasingly popular to improve the design process. They can help:

• Improve communication between designers and developers. When design tokens are used, designers and developers can share a single source of truth for the visual properties of a product. This can help to avoid misunderstandings and ensure that the design is implemented correctly.
• Increase consistency across platforms and devices. Design tokens can be used to ensure that the design of a product is consistent across all platforms and devices. This is important for creating a seamless user experience.
• Make the design more scalable. Design tokens can be used to create a design system that can be easily scaled to new products or features. This can save time and effort in the long run.
• Make designs more flexible. Design tokens can help you define your designs at an atomic level, allowing you to modify them at a smaller level.
• Allow brand integration. You can allow users/admins to configure their own brands on your design system.

Design tokens are typically stored in a JSON file. JSON files can be shared between designers and developers and used to generate code from design tokens.
Here is an example of a JSON file that could be used to store design tokens for a front-end application:

This JSON file defines three sets of design tokens: colors, fonts, and spacing. Each set of design tokens is a dictionary that maps a token name to a value. For example, the token name color.primary maps to the value #FF0000.

Tokens, when defined as hard-coded values, are often called base tokens or core tokens.

Semantic tokens are sometimes also referred to as component tokens.

They are used to make a decision on which base tokens to use; in other words, semantic tokens are a reference to a base token or another semantic token.

Here is an example:

The above example is essentially a basic one; you can introduce many more variations like themes, color modes, etc. Here is a basic example by Tokens Studio on their lion-example repo: https://github.com/tokens-studio/lion-example/tree/main/tokens

You can also head over to this link https://design-tokens.github.io/community-group/format/ , to check the format documented by the community.

How to Use it in Code?

There are different approaches; these tokens can be converted into SCSS variables and CSS variables; you can use a style dictionary if you wish to. How to implement tokens in your design system is up to the implementation.

Design is where Tokens Studio comes into the picture.

Tokens Studio is a platform that provides a way to generate and manage design tokens. It also offers tools that can be used to dynamically generate values for tokens, improving the flexibility and scalability of your design system.

The product of Tokens Studio is the Tokens Studio Figma Plugin; you can define your base tokens and semantic tokens and apply them directly to your Figma components. link: https://docs.tokens.studio/

Tokens Studio has also built a style dictionary transform for tokens to be used as a style dictionary. https://github.com/tokens-studio/sd-transforms

While the Tokens Studio Figma plugin is great for adding design tokens to your components, implementing tokens on the code is different. As you scale the design system, the tokens and the complexity increase, which might mean a lot of custom implementation of a lot of custom logic you define on tokens.

While addressing these challenges, inside Tokens Studio, semantic tokens have evolved from a collection of JSON files to a graph file stored as a JSON file.

Generators and Resolvers by Tokens Studio is a node-based editor that allows you to build design tokens as logic rather than static sets allowing for easier management and less token bloat, especially when handling multi-brand systems.

https://tokens.studio/tools/resolvers

Tokens Studio Resolver enables you to build a dynamic component logic and enables you to make semantic decisions; you can have token sets as nodes and choose between values by defining logical decisions. You can check out a basic example component on a resolver here: https://resolver.dev.tokens.studio/

You can watch an introduction to the interface by Marco here: https://www.youtube.com/watch?v=vAXMYdkkRlk

In the examples above, we output a CSS map, we can use them directly in our components. For that, we use the npm package @tokens-studio/graph-engine, it is the same engine used by Tokens Studio Resolver internally. Suppose we have a Card.json that outputs a button CSS map as a part of the output; the code would look something like this in React:  

Notice that the entire styling logic for the button component is dependent on the graph, and it should be able to take care of all the CSS properties that need to be applied to the component. This allows us to be flexible- we can define as many variations of our components at scale, and we can have the graph include brand configurations from the user as token sets for highly customizable and scalable design.

Tokens are the building blocks of a design system. They contain the most atomic definitions for the components and are flexible concerning the context. Tokens are represented in JSON format and can be integrated into component styles. Tokens Studio provides a Figma tool to apply tokens to a Figma component.

Tokens Studio has developed graph resolvers where a component's styling logic can be defined. The graph can be resolved on the component at runtime to generate dynamically styled components.