Designing UI Using Design Token with Figma Variables

Recently, Figma has released a major update that makes it easier for designers to create more flexible designs. If you are already familiar with it, the most talked-about feature is Variables.

In the summer of 2023, Figma announced its latest feature, Figma Variables, which is similar to the function of design tokens and can be used directly in Figma. Figma Variables is currently in the Beta testing phase and is only available if you are on an educational or paid plan.

This article will discuss how we use Variables and design tokens to make color usage more effective in design.

Let’s go!

Context & Problem

We have a multi-brand design system that we use to design mobile applications. All styles from the brands are incorporated into one design called Timedoor Design System.

When we initially created this design system, we did not consider making a flexible color system for different brands. However, after studying several famous design systems such as Material, IBM, and Ant Design System, we discovered that one of the fundamental elements to start a design system is to have a strong foundation, one of which is Design Tokens.

Therefore, we have decided to create design tokens for the Timedoor Design System to simplify its usage, starting with Design Token Color.

Color Token Structure

In the migration towards variables in Figma, we start by defining the color structure that will be used for all brands designed using the design system.

1. Primitive Tokens

Primitive tokens are a collection of raw colors that will later be incorporated into semantic tokens. Examples of primitive tokens in colors are blue, purple, or green. We select several colors to be used as examples based on their function and brand colors.

We create a primitives token structure with a shades structure as shown below, where a single raw color will be transformed into 11 derivative colors to facilitate the use of colors in the semantic scheme to be created.

2. Semantic Tokens

Semantic tokens are a collection of variables that provide functionality to primitive tokens. Primitive tokens will reference each semantic token as needed. Examples of semantic tokens include primary color, secondary color, success color, and others.

In the Timedoor Design System, we group semantic colors according to their functions, such as primary color, secondary color, background color, text color, and so on, as shown in the example below.

As can be seen, primitive colors will be reused in semantic colors to maintain color consistency in design. In these semantic tokens, we also directly define themes, namely light and dark themes, both of which still use the same primitive color sources.

3. Contextual Tokens (Optional)

Contextual tokens are usually used directly in the UI components being created. However, in the Timedoor Design System, we have decided to only use them up to semantic tokens, considering time and the number of people in the team.

Contextual tokens will reuse the previously defined semantic colors. Examples of using contextual tokens include button-primary-default, button-primary-hover, and others.

How variables work in our design system

Let’s see how to apply color variables in the multi-brand design system that our team has created.

1. We separate the color file from the component file

Separating files in the design system is useful for improving the efficiency of using colors, making it easier to update if there are any required updates to color variables or the components themselves.

After separating the files, the color files will be published so that they can be used independently by the component files later.

2. Using color variables in components

Example of using color token variables in a button component. The button container uses the color primary/main and the content inside uses the color primary/content.

Example using color token in button component

3. Components that already use semantic color tokens can utilize modes

In semantic token, we have set it up so that designs that use color variables can change color according to the created modes, namely light and dark. Here is an example of using a color theme on a button component.

Button component on light mode

Button component on dark mode

In both of the above modes, the button component still uses the same semantic tokens, which are primary/main and primary/content. However, due to the different modes, the primitive token changes, making the design more flexible in terms of color usage.

Example using color token variables on our project

One of the use cases of variables in our project is where we have 3 themes that already use primitive tokens and semantic tokens.

Conclusion

Building a well-structured design system takes time and continuous iteration. Therefore, we try to establish a strong foundation in the design system we are building by applying design tokens through the variables feature in Figma. So don’t be afraid to experiment so that we can learn from those experiments that have already happened in our design system.

Thank you for reading. If you have any more questions or want to go deeper into this topic, just reach us via our website or another social links.

Happy designing!