Variables

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

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

• Font family

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 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:

1. Use the arrow keys to select the drag handle next to the variable (or variable group) you want to move
2. Press Enter or Space to pick up the variable
3. Use the up and down arrow keys to drag the variable to your preferred location
4. 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

How to create variable modes

Variable modes let you to set multiple values on individual variables. You can then apply these new value sets:

• automatically – to your entire site design on a specific breakpoint
• manually – to any class

You can use variable modes to quickly achieve responsive designs or theme areas of your site.

How to set automatically responsive variable values

You can set automatically responsive variable values which target tablet, mobile landscape, and mobile portrait breakpoints. Then, you’ll only have to link styles to your variables once – not on every breakpoint. When you update a variable, all variable values are updated globally in your modes' breakpoints.

To set automatically responsive variable values:

1. Go to the Variables panel
2. Click the New mode dropdown arrow
3. Name your mode (e.g., “Tablet typography”)
4. Choose the breakpoint for which you want to set variable values (e.g., Tablet) in the Responsive dropdown
5. Click Create. Values will automatically default to the values from the Base mode
6. Click a variable in the mode’s column to update or alias variable values as needed

Now, when a site visitor views the site in the selected breakpoint (e.g., on the tablet breakpoint), styles linked to these variables will receive the values from this mode (e.g., “Tablet typography” mode). Additionally, modes follow the same inheritance rules as breakpoints. That is, values set on larger breakpoints cascade down to smaller breakpoints unless you set values on the smaller breakpoints.

To adjust a mode’s settings such as it’s name or breakpoint, go to the Variables panel, hover over the mode’s name, click the “more options” icon, and click Settings.

To duplicate a mode, go to the Variables panel, hover over the mode’s name, click the “more options” icon, and click Duplicate. The Responsive dropdown is automatically cleared because you can only have one mode set per breakpoint in a collection.

How to create a theme using modes

To streamline your design process, you can create “themes” in your site using variable modes. For instance, if you want a main theme for your site you can create a “Brand” theme. Then, if you want your site to be focused on a secondary product, you can set a “Secondary product” theme and change a few variable colors to match your other product, for instance.

To set a theme mode:

1. Go to the Variables panel
2. Click the New mode dropdown arrow
3. Name your mode (e.g., “Tablet typography”)
4. Choose No in the Responsive dropdown
5. Click Create
6. Click a variable in the mode’s column to update or alias variable values as needed

Then, you can change styles using the style selector dropdown on your site page(s):

1. Go to the page for which you want to change the theme on your site
2. Select the element to which you want to add the theme (e.g., the Body, a hero section, etc.)
3. Go to the Style panel
4. Click the Selector field dropdown
5. Choose your theme mode to apply it to the selected element

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.

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. Any variable collections, groups, and modes you create in a Library can also be shared to other sites in your Workspace. This can accelerate your workflow and enhance your design system by providing a single place to update variables that are used across multiple sites in your Workspace.

How to manage variables and modes in collections

To keep your variables organized and compiled for your teammates, you can add variables and variable modes to a collection.

1. Go to the Variables panel
2. Click the “plus” icon next to Site variables
3. Name your variable collection
4. Click Create

Now you can create variables and variable modes in this collection.

To move variables and variable modes across collections:

1. Go to the Variables panel
2. Bulk-select the variables you want to move
3. Click Move
4. Choose your Target collection from the dropdown or create a new collection
5. Choose the mode(s) you want to move
6. Click Move 

When you move modes across collections, modes may be renamed and any automatic modes will be converted to manual modes.

You can alias variables across collections but be aware that you can only alias to the base mode value in the chosen collection. For example, say you have a “Palette” collection with the variable “Main Color”. The “Main Color’s” base mode value is #000, and the Dark mode value is #fff. In the “Typography” collection, if you alias a variable named “Body Copy Color” to “Main Color,” “Body Copy Color” will always receive a value of #000, even if it’s aliased from the Dark mode.