Use variables to store and manage frequently used styles.
Variables let you store size, color, and font styles so you can reuse them for a consistent design experience. When someone updates a variable value, that change will update everywhere it’s used on the site. And they’re available in a central location for more visibility into your site’s styles.
In this lesson, you’ll learn:
- What are variables?
- How to create, update, and delete variables
- How to use variables on the canvas
- How to unlink a variable from an element
- How to manage variables in groups
- How to use aliases
- How to use variables in interactions
What are variables?
There are 3 types of variables:
- Size variables
- Color variables
- Font variables
You can set size variables for:
- Margin and padding — top, bottom, left, right
- Position — top, bottom, left, right
- Column and row gaps for display settings and Quick Stack
- Height and width dimensions (including min and max)
- Grid column and row sizes
- Typography — font size, line height, letter spacing
- Border radius and width
- Filter and backdrop filter blur radius
You can set color variables for:
- Text colors
- Background colors
- Border and text stroke colors
- Gradient color stops
Note: Swatches have been migrated to color variables. You can access your previously-created swatches in the Variables panel.
- Font family
How to create, update, and delete variables
To create a variable, go to the Variables panel, click New variable, and choose the type of variable you want to create (i.e., Color, Size, or Font Family).
To change the default variable name, hover over the variable name and click the settings “cog” icon.
You can change the variable value by clicking on the value. Color variables let you choose a color from the color picker. Size variables let you choose a numerical value and unit. Font variables let you choose a font family from the dropdown. Any custom fonts (including Google and Adobe fonts) uploaded to your site or Workspace are available when choosing a font family variable.
When you change the value of a variable in the Variables panel, any elements linked to those variables will update automatically.
Note: You can also update variable names and values directly in the Style panel. Hover over a field currently connected to a variable, then click the “pencil” icon to open the variable editing modal.
When you change the value of a variable in the Variables panel or the Style panel, any elements linked to those variables will update automatically.
You can delete variables by going to the Variables panel, hovering over the variable name, and clicking the settings “cog” icon. Then, click Delete.
How to use variables on the canvas
Once you create your variables in the Variables panel, you can use those variables when designing. Variables are available for use in the Style panel and the Interactions panel.
- To use color variables — click the purple dot on the upper-left corner of a swatch
- To use size variables — click the purple dot on the upper-left corner of a size input field
- To use font variables — click the purple dot on the upper-left corner of the Font field in the Typography section
Note: When you use a variable in the Style panel, that variable value will be highlighted in purple.
Pro tip: You can also add variables directly from the Style panel. Select an element, click the purple dot on the upper-left corner of a variable input field (i.e., swatch, size input field, font field), click the “plus” icon, create your variable with a name and value, then click Save. If you want to link the value to an existing variable, click the purple dot on the upper-left corner of the value field and select an existing variable to link.
How to unlink a variable from an element
To unlink a color or font variable from an element, click the value in the Style panel that is currently linked to a variable (e.g., background color, font, etc.). Then, click Unlink.
To unlink a size variable from an element, click the value in the Style panel that is currently linked to a variable, click the variable name in the menu, and click Unlink.
How to manage variables in groups
You can organize variables in groups. This allows more visibility into your team’s design decisions and systems.
To group variables, name them with this format: group name/variable name. For instance, if you want a group named “Colors,” you could create 2 variables named “Colors/Red” and “Colors/Blue.” They’ll appear grouped in a “Colors” section in the Variables panel.
To remove a variable from a group, delete the group name (e.g., “Colors”) from the variable’s name.
How to use aliases
Aliases let you create new variables that reference the values of existing variables. Then, when you update 1 of the linked variables, all aliases will automatically update. To create an alias, click the “dot” icon to the right of your new variable. A dropdown will appear with existing variables that you can choose to reference.
Note: You can only create aliases of variables with the same type (i.e., you can create color variables that reference color variables, but not color variables that reference size variables).
To unlink aliases, click the variable value you want to unlink, then click Unlink.
How to use variables in interactions
Color, size, and font variables are available for use in custom animations. When selecting an action for your custom animation, you can choose to Set variable value. This allows you to change element colors, sizes, or fonts in an interaction using existing variables.
To set a variable value in your animation, go to Set variable value > Variable and choose your variable value from the dropdown.