Use variables to store and manage frequently used styles.
Variables let you store style values that can be reused for a consistent design experience across your site. They’re available in a central location, giving you more visibility of your site’s styles. When you update a variable value, that change is updated everywhere it’s used on your site.
What are variables?
There are several types of variables:
- Color variables
- Size variables
- Percentage variables
- Number variables
- Font variables
Color variables
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.
Size variables
You can set size variables for:
- Layout — grid columns and rows, gap sizes
- Spacing (margin and padding) — top, bottom, left, right
- Position — top, bottom, left, right
- Column and row gaps for display settings and Quick Stack
- Size — height and width dimensions (including min and max)
- Typography — font size, line height, letter spacing, column gap
- Border radius and width
- Filter and backdrop filter blur radius
- Drop shadows
Percentage variables
You can set percentage variables for:
- Layout — gap sizes
- Flex child properties — basis
- Spacing (margin and padding) — top, bottom, left, right
- Size — height and width dimensions (including min and max)
- Position — top, bottom, left, right
- Typography — font size, line height, text indent, column gap
- Borders — border radius
- Effects — opacity, various filters and backdrop filters (i.e., blur, brightness, contrast, saturation, grayscale, invert, sepia), translation
Number variables
You can set number variables for:
- Flex child properties — grow and shrink
- Position — z-index (integer values only)
- Typography — font weight, line height, variations (for variable fonts)
- Effects — opacity
Number variables accept both decimals and integers (whole numbers), but some CSS properties have specific value requirements. For example:
- Font weight accepts only positive integer values between 1 and 1000, typically multiples of 100 (e.g., 400 or 600), unless you’re using variable fonts
- Z-index only accepts integers, which can be positive or negative
Font variables
How to create, update, reorder, and delete variables
Create 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, Percentage, Number, or Font Family).
To change the default variable name, hover over the variable name and click the settings “cog” icon.
Update variables
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. Percentage and number variables let you choose a numerical value. 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.
Reorder variables
To reorder variables in the Variables panel, hover over a variable name (or a variable group name), click the drag handle that appears, and drag the variable or group to your preferred location.
You can also reorder variables with your keyboard:
- Use the arrow keys to select the drag handle next to the variable (or variable group) you want to move
- Press Enter or Space to pick up the variable
- Use the up and down arrow keys to drag the variable to your preferred location
- Press Enter or Space again to drop the variable, or press Esc to cancel
Delete variables
You can delete variables by going to the Variables panel, hovering over the variable name, and clicking the settings “cog” icon. Then, click Delete.
Bulk update and delete variables
You can select and update multiple variables at once in the Variables panel by clicking Select or hovering over individual variable names and checking the checkboxes that appear. You can also check a variable’s checkbox, hold Shift, and check another variable’s checkbox to select all variables in that range. Choose the variables you want to update or delete using their checkboxes — the checkbox in the header selects all variables in the list and the checkbox next to each group name selects all variables in the group. Once you’ve selected multiple variables, you can group or delete them, or use the drag handles to reorder all the selected variables.
You can also bulk update and delete variables using your keyboard. Hold Shift and press Spacebar or Enter to select a range of variables. To leave selection mode without closing the Variables panel, press Esc.
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 percentage variables — click the purple dot on the upper-left corner of a percentage input field
- To use number variables — click the purple dot on the upper-left corner of a numeric 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 variable from an element, click the value in the Style panel that’s currently linked to the 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, hover over the variable name and click the settings “cog” icon. Then, delete the group name (e.g., “Colors”) from the variable’s name and click Save.
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, percentages, numbers, 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.
Sharing variables across sites with Libraries
You can share variables across sites in a Workspace with Libraries. This can accelerate your workflow and enhance your design system by providing a single place to update variables that are used across multiples sites in your Workspace.