Master Variables in Figma to create advanced models

Figma continues to set itself apart as an ever-evolving design tool. At the Figma Config 2023a brand new feature was unveiled: Variables in Figma. Among many others, Variables stood out as a powerful tool offering designers a new approach to design and prototyping. In this article, we take a look at the main aspects of Variables in Figma and explain how they are revolutionizing the way we design models.

What are Variables in Figma?

Variables represent a new approach to defining project properties in Figma. They enable designers to store reusable values, applied to all kinds of design properties and/or prototyping actions. You'll save time and effort when creating mock-ups, managing design systems and creating prototyping workflows in Figma.

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, establishing relationships and defining more complex properties at multiple levels.

Variables are organized in a brand-new, table-like interface in Figma, allowing you to create and assign values to your variables in a structured way. This approach is akin to a real database or CMS integrated into Figma, making it easy to organize and manage the various properties of your project.

Benefits of Variables in design

Variables offer many advantages, including :

1. Flexibility and consistency: Variables allow you tostandardize the elements of your design and facilitate subsequent updates by simply modifying the value of a variable. For example, by defining variables for all the colors in your project, such as Grey-900, Grey-800, Grey-700, etc., you can quickly modify a color and see the changes propagate to all the elements of the layout linked to that color.
2. Collection management : Variables can be organized into Collections, making it easier to manage different project properties, such as colors, spaces, fonts, etc. In addition to creating simple styles, collections allow you to 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, such as assigning a color to each type of text (primary, secondary, etc.).
3. Modes for Variants: Modes let you create variants for your variables, such as Dark Mode and Light Mode, allowing you to test different appearances at the click of a button. This gives you the flexibility to explore different themes and design contexts without having to recreate separate elements.
4. Improved productivity: By using Variables, you can make changes more quickly and avoid having to manually modify every element in your design. Variables offer you a more efficient approach to managing and updating your design, saving you time and allowing you to concentrate more on creativity and innovation.

With Variables in Figma, you have a powerful tool that optimizes your design workflow, enabling you to create consistent, flexible and efficient designs.

How to use Variables

Variables introduce an exciting new way of designing web layouts. Although this feature may seem complex at first, we encourage you to watch our next YouTube video scheduled for 07/30 (👉 Subscribe to stay tuned) to fully understand how to create, edit and organize variables in Figma.

The main stages in the creation process:

1.1 Creating variables

To begin with, you can create a variable by clicking on "Create Variable" in the design properties panel. You can then choose from various options to create the variable that best suits your needs:

1. Color: This option lets you define colors for your elements. You can create solid fills for background colors, text colors and stroke colors.
2. Number: This option lets you define numerical values for your elements. You can use numerical variables for Frames, corner radius, minimum and maximum widths/heights, autolayout, as well as to manage margins and gaps between elements (padding and gap).
3. String: This option lets you define text blocks and word variants. For example, you can use String variables to create a variant of a layout in another language.
4. Boolean: This option lets you define Boolean (true/false) values for your elements. Boolean variables are useful for managing the conditional visibility of elements, as well as for instances of variants with true/false values.

1.2 Creating groups and collections

Once you've created your variables, you can organize them into Groups and Collections for easier management. For example, you can create a group for colors, another for fonts, etc.

By creating Groups, you can bring together similar variables, making navigation and editing easier and more intuitive.

Collections allow you to group together elements with the same function, enabling you to create correspondences between your Figma variants.

1.3 Using Modes

Modes let you create Figma variants for your variables. You can easily switch between different versions of your model, such as Dark Mode and Light Mode, to test different appearances with a single click.

Modes give you greater flexibility to explore different design themes and contexts without having to recreate separate elements. They are a powerful tool to help you quickly and efficiently visualize your designs in different states and situations. With Modes, you can make informed decisions about the final look of your project while optimizing your design process.

2. Variables for design and design systems

The use of Figma variables goes beyond simple styles. Variables help you to standardize your layouts, by defining specific values for each element of your project. This is the case, for example, for the spacings of your layouts. By creating variables for your horizontal padding, vertical padding and gap, you'll be sure to use fixed values throughout your project. Your design will thus be more consistent, and you'll be able to make it evolve with just a few clicks from your variables.

They also play a key role in setting up a design system by enabling the implementation of design tokens. This approach, known as tokenization, consists in coding the various variables of a project to define precisely in which situation they should be used. By integrating variables into your design system, you facilitate the management of project properties and contribute to its scalability. Thanks to this methodology, you can create consistent, scalable designs while saving time and effort.

3. Advanced prototyping with Variables

Variables open up new possibilities for advanced prototyping with fewer Frames. You can take advantage of Expressions and Visible Conditionals to create advanced interactions in your prototypes. By combining variables with other advanced Figma features, you can develop highly interactive and realistic prototypes, while maintaining a simplified approach to managing the different states of your design. The possibilities are vast, allowing you to explore dynamic and complex interactions, while remaining efficient in your prototyping process.

4. Variables in Figma APIs

The power of Figma variables also extends to thedeveloper ecosystem through integration with the Figma API. This feature lets you build custom plugins and widgets that take advantage of variables. Whether you want to import or export variables, convert styles to variables, or simply interact with design properties, Figma's API offers a wealth of possibilities for integrating variables into your development workflow.

Variables in Figma represent a major advance in design process efficiency and prototyping capabilities. Whether you're managing design systems, creating interactive prototypes or building custom plugins, variables enable designers to do more with less effort. We strongly encourage you to get to grips with this feature in Figma and integrate it into your future design processes to take them to the next level.