What are Figma variables?
Variables, as a new feature in leading collaborative design tool, represent a new approach to defining properties. They are reusable values that can be applied to all kind of design properties and prototyping actions. They are also great tool for saving your time and effort when building designs, managing design systems, and creating complex prototyping flows.
For now, there are 4 types of variables:
- Color - apply to any colors, like fill and strokes.
- String - apply to text layers, including the nested instances
- Number - assign any numerical values to variable. It can be used for corner radius, min or max width and height, spacing, padding or gap, and font size.
- Boolean - assign the values of “True” and “False”. It allows you to hide or show the component just like the component properties.
The difference between variables and styles
First, there are some similarities between variables and styles. They both can be applied to fill and stroke color properties, both can support efficient design system management because updates and variable or style will prompt updates for design system using them. Also, both can be published to team libraries and reused throughout designs. At first glance, variables can be compared to styles in Figma, but they go much further. Unlike styles, which let you define uniform styles for design elements, variables let you create interconnected collections of data.
You may be wondering when to use styles and when to use variables. Whether you choose to use variables or styles depends largely on your goals. For example, if you want reusable colors that respond to different modes, you will need to create variables. But, if you need reusable gradients, use blend modes, or stack multiple fills together, stick with styles. Finally, variables may reference other variables, which makes them much more configurable.
Pros and cons
With variables in Figma, you have a powerful tool that optimizes your design workflow. It enables you to create consistent, flexible, and efficient designs.
Variables offer many advantages, including:
- Flexibility and consistency: Variables help you standardize the elements of your design and make it easier to update them later by simply changing the value of a variable.
- Collection management : Collections can be used to manage different project properties, such as colors, spaces, fonts, etc. This makes it easier to organize and assign additional properties to each variable by associating them with each other. For example, you can use “Semantic naming” for color variables to define use cases for each of them.
- Modes for Variants: Modes allow you to create different versions of your variables, such as Dark Mode and Light Mode, so you can easily test different appearances. This gives you the flexibility to explore various themes and design contexts without the need to recreate separate elements.
- Improved productivity: With variables, you can make changes super quickly and avoid having to manually modify every single element in your design. Variables give you a more efficient way to manage and update your design, saving you time and allowing you to focus more on being creative and innovative.
The only downside of using variables is that it requires more time initially to understand them and watch a few tutorials to learn how to use them properly. Also, it takes some time to set them up, but at the end it’s worth it.
How we use them?
As variables are a relatively new feature, we are experimenting with them in our projects and increasingly utilizing them. We’ve recognized many of their advantages and are certainly striving to leverage them to save time and streamline our work. One aspect we immediately embraced in our work is using variables for colors, creating tokens and multiple modes such as dark and light modes. Additionally, creating number variables for spacing, padding, margin, and radius has proven useful. Similar to colors, various modes can be set, representing different devices for which the design is intended. In this way, once it’s set up, with just a few clicks, we can switch between devices and modes.
It’s best to set up variables at the beginning of the project and modify as needed throughout. For this reason, we are looking forward to start many more new projects where we can further explore the possibilities of this new feature.
