Variables y Estilos en Figma

What are variables in Figma and why are they important?

Variables in design are often a crucial issue for the reusability and consistency of elements in an interface. With Figma, it is possible to assign values that appear recurrently, such as colors, numbers or texts, which facilitates the designer's work. Here we will explore the four types of variables that can be created in Figma and how they contribute to a more efficient and flexible interface.

What are the types of variables in Figma?

In Figma, we can define:

1. Color variables: Ideal for defining color palettes that are recurrently used in a project.
2. Numerical variables: Useful for parameters such as padding, margins, borders, etc.
3. Text variables (strings): Allow to assign specific recurring texts, such as a call to action.
4. Boolean variables: Indicate states such as "on" or "off" in interactive elements.

How are variables created?

To begin with, it is essential to have a professional license active (such as the Platzi license). In the design properties bar, you can access the local variables menu to create new variables. By selecting "create variable", Figma will allow you to choose between variable types: color, number, string or boolean.

For example, by creating a color variable and calling it "white", you can easily apply it to different interface elements. If you then decide to change the color value to a reddish tone, this change will be automatically applied to all elements that used the variable "white".

How are variables assigned to elements?

Once variables are created, it is easy to assign them to elements such as rectangles or buttons in the design. When you apply a variable, the affected elements will show a small border in the fill in the properties bar, indicating that they are using a particular variable. If you need to change the variable, this action will take you directly to the library where that value comes from.

How are variables integrated into different display modes?

Variables make it easy to manage different display settings, such as dark and light modes. In dark mode, the background could be a dark color and the typography a light color. In light mode, this is reversed. Thanks to the variables, switching from one mode to another is simply a matter of reassigning these variables, and the values are updated automatically.

What are styles and how are they created in Figma?

Styles in Figma are a way of grouping multiple variables in one place. This allows you to have a quick and consistent design reference throughout the interface. For example, you could create a gradient style that combines multiple colors from your palette.

To create a style:

1. Select the element you want to style.
2. Apply the corresponding variables.
3. In the "apply styles and variables" option, select "add new style".
4. Name the style and save it.

Styles are not within the same library as variables, but they are saved as local styles within the file and can be applied to new elements easily.

How do these tools promote consistency in design?

Figma variables and styles are essential to generate consistency in an interface. They facilitate the control and management of colors, fonts, and sizes, which ensures that each component looks uniform throughout the interface. This not only saves time, but also improves the quality of the design and its ability to adapt to future changes.

With this knowledge, you can now integrate variables and styles into your Figma projects to optimize and professionalize your design workflow. Continuing to explore these tools will help you create high-level prototypes and prepare the interface for future iterations and growth.