May 12, 2021 • Knowledge, Business
November 23, 2023 • Knowledge, Figma • by Juliarta Arya
Designing UI Using Design Token with Figma Variables
Table of Contents
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.
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.
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.
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.
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.
some other blog posts you might be interested in