How to variables in Figma

Pay special attention to the “Scope” are very important to export the variables from Figma to Bricks builder.

What are local variables?

Local variables are reusable values that help you maintain consistency and organization in your projects. You can define variables for colors, fonts, spacing, and more. Once applied, any change to a variable is automatically updated throughout your project, saving you time and effort.

How to create variables

1. Open the Variables panel: Go to the right panel and select the “Variables” tab.
2. Create a collection: Click the “…” icon, name your collection, and organize your variables inside it.
3. Add variables: Inside the collection, click the “+” button to create new variables.

Types of variables

Figma allows different types of variables for specific uses:

• Color: For backgrounds, borders, text, shadows, etc.
• Number: Perfect for sizes, spacing, margins, paddings, and more.
• Text: Useful for fixed values like font names or export options.
• Boolean: For toggle options like “on/off” (less commonly used but still helpful).

When creating a variable, select the type to make sure it works properly in the right context.

Variable settings

1. Access settings: Hover over a variable and click the settings icon.
2. “Details” tab: Here, you can edit:
   • Name: The name of the variable.
   • Description: Add notes about the variable’s purpose or calculations.
   • Value: The assigned value. In the free version of Figma, only one mode (Mode 1) is available, but it’s enough for most cases.
3. “Scope” tab:
   • Assign where the variable will appear (e.g., fill, text, size).
   • This is important to keep variables organized and easy to find.
   • Practical example: Without a scope, variables can show up in the wrong properties, making them hard to use. For instance, a “font-weight” variable shouldn’t appear when selecting font size.

Organizing variables

1. Group your variables:
   • Select multiple variables using “CMD” (Mac) or “CTRL” (Windows).
   • Right-click and choose “New group with selection.”
   • Rename the group by double-clicking its name.
2. Create subgroups:
   • Example: Inside a “Color Palette” group, you can create subgroups like “Primary” and “Secondary.”
3. Reorganize easily:
   • Drag variables or groups to reorganize them as needed.

Organizing variables makes your workflow faster, and when you export to Bricks Builder with the FancyFW plugin, the top-level folders will be preserved as categories.