Design tokens in the work of a UX/UI designer. How to use and implement?
Alyona Kulish, UX/UI designer at Revend Group, spoke about using variables and design tokens in Figma at a recent presentation. In this article, we want to share with you the key conclusions and knowledge we gained during the presentation.
What is a design token in simple terms
In the world of design and technology, we are surrounded by new tools that revolutionize our perception of aesthetics and functionality. Among these innovations is the use of tokens, which open up new opportunities for better control and adaptation of design.
Tokens (variables) are not just styles, but reusable definitions that target different design attributes, such as colors, numbers, and lines. Your design can now be more flexible and responsive, not only by being able to create styles for colors, but also for details such as rounding of module corners, height and width, as well as internal padding and text inside buttons.
However, the difference from conventional styles is that tokens can change their definition depending on the chosen theme. This opens up new horizons for designers to be creative and adaptable, allowing them to create unique and engaging design elements for any context.
In the world of design, there is something atomic when we move from the smaller to the larger. That is, our design is made up of atoms — small constituent elements such as colors, buttons, etc.
The Revend Group designer also emphasizes that these atoms are the basic building blocks from which the entire design is formed and contain information that we can use regardless of the platform. An atom can have an outline, a gradient fill, a font, a font size, but a design token does not. This is the simplest meaning of the design system, and these are the variables that work with tokens, not with atoms, i.e. with the fill color, with the outline color.
What is the correct name for design tokens?
A token can contain five values:
- Category — this can be a color or a font.
- Type — text, background, border.
- Item — what element this token belongs to (Input, button, table).
- Subitem — the type of element (Primary / Secondary).
- State — Hover / Default.
The structure depends on each specific element and can change.
Using these five values makes it possible to systematize and easily identify design tokens across your project.
Token names are not just a string of characters, but a system that helps you and your team organize and understand your design. By adopting this approach, you create consistent and easily manageable design systems, which is key to successful design work and collaboration.
When and to whom to use design tokens?
Figma has styles. These are for small projects and beginners, while tokens are for experienced designers and large projects. However, everything is not as simple as it seems. Professional designers also need styles for large projects, because there is one big difference: we can’t add a gradient to tokens (variables). Styles store not only single values (a certain color or number). Therefore, if we are talking about shadows, gradients, we will still use styles.
Variables are the smallest particle in our design system. Styles are something a little bigger. Therefore, we will first develop design variables, and then we will add something to the styles. Variables can reference other variables, which makes them more flexible. Styles are not capable of this.
At Revend Group, the UX/UI team uses either styles or variables in their projects, and depending on the complexity or client request, they decide which one to choose. Although both approaches can provide similar results, variables turn out to be a more advanced feature. Thus, if you are working on a design system or frequently prototype, variables may be your best bet.
But what about in practice?
And design tokens open up a lot of opportunities for practitioners:
- Quickly create light and dark modes or different themes.
- Variables can also be used in prototypes. To do this, Figma has added support for if else conditions, as well as addition, subtraction, division, and multiplication. This feature can significantly reduce the number of separate states for prototypes that you need to render. Now you can create styles not only for colors, but also for rounding the corners of modules, their height and width, indents inside Auto layout, and text inside buttons.
- Use variables as tokens to manage design systems.
- Define element properties for different control points.
- Create layouts in multiple languages.
These practical applications make variables a key tool for fast and efficient design. They make it easy to adapt your designs to different conditions and requirements, providing a high level of flexibility and productivity in Figma.
Using variable types for colors
At the presentation, the UX/UI team shares their experience and experiments with creating the first variable for the button background color. Color variables can be effectively used to customize the fill or outline of an object in a design.
So let’s create our first background color variable for this button.
- Open the Variables panel, click Create Variable, and then select Color.
- Change the name of your variable to Purple and the value to #C7B9FF.
- Create another variable for the text and button outline.
How to apply variables to objects
We can apply variables by selecting layers or objects on the canvas and using the right-hand panel. Depending on the type of variable you use, it will be applied from different parts of the panel.
So what is better to use: variables or styles?
While both variables and styles can be used to define elements such as color, they differ in that a variable is a single value, while a style can be made up of multiple values.
The best example of this is a color style with multiple fills. You can define each fill as a variable, but if you want to reuse the same set of fills, you should save it as a style.
We hope that our presentation was of interest to you and helped you better understand the importance of design tokens in the creative process.
If you have any further questions or need any advice, don’t hesitate to contact us.
We strive to be not only a source of information, but also your reliable partner in the world of design and technology. Our team is ready to help you realize your ideas, develop your projects, and achieve great success together.
Thank you for your attention and see you soon!
