Create and manage variables

Before you Start

Who can use this feature

Anyone on any plan

Anyone with can edit access to a file can create and edit variables

Looking for more resources on variables? Check out our guide to variables →

Access the Variables modal

Use the Variables modal to create and manage variables, modes, groups, and collections.

1. Deselect everything on the canvas by pressing esc or clicking the canvas.
2. From the right sidebar, find the Local variables section.
3. Click Open variables.

Create a variable

1. From any collection, click + Create variable.
2. Select a variable type from the dropdown.
3. Give the variable a name in the first column, and a value in the second column.

To duplicate a variable, select one or more variables and press ⇧ Shift Enter.

To delete a variable, right click the variable and select Delete variable.

Create an alias

Create an alias for a variable to link its value to an existing variable. This allows you to implement design tokens and makes managing updates to your designs more efficient.

For example, say you have multiple color variables that reference the same color variable. If that color needs updating, you would only need to update the source instead of manually updating every instance of the color.

A variable can reference other variables of the same type.

To create an alias for a variable:

1. Open the Variables modal.
2. Right-click a variable’s value and select Create alias.
3. From the Libraries tab, choose a variable to set an alias. You can use the search bar to find a variable by name or browse through enabled libraries.

To detach an alias, hover over the value field and click Detach alias.

Edit a variable

Hover over a variable’s row and click the Edit variable icon to open its editing modal.

From there, you can:

1. Change the variable’s name
2. Add a description to explain how a variable should be used
3. Modify the variable’s value
4. Use the checkboxes to scope a variable ↓
5. Add code syntax ↓
6. Hide the variable from publishing →

Scope a variable

Scope a variable to limit which properties the variable can be applied to. This reduces the guesswork when choosing variables for designs. 

For example, if you scope a number variable to corner radius, the variable can only be applied to corner radius and won't appear as an option for any other supported properties.

Scoping is available for number, color, and string variables.

To scope a variable:

1. Right-click on a variable, or multiple variables, and select Edit variable. You can also click Edit variable, located to the right of any single variable.
2. Open the Scoping tab.
3. Use the checkboxes to toggle the variable’s availability in that property. Check Show in all to make the variable available for all supported properties.

Add code syntax

Code syntax allows you to represent variables in code using valid variable names to support a seamless handoff experience. A variable’s code syntax will appear in code snippets in Dev Mode when inspecting elements using the variable. Currently, code snippets for variables are supported in CSS, SwiftUI, and Compose. 

You can create one name per platform, including Web, Android, and iOS. This allows for up to three code syntaxes per variable. 

To add code syntax to a variable:

1. From the Code syntax section of the the Edit variable modal, click Add code syntax.
2. From the dropdown, choose Web, Android, or iOS.
3. Use the input box to enter a variable name. A preview shows how the variable name appears in code snippets.

Edit variables in bulk

To edit multiple variables at once:

1. Open any collection from the Variables modal.
2. Select multiple variables by using keyboard shortcuts:
   • Hold ⌘ Command / Control and click to select individual variables
   • Hold Shift and click to select a range of variables
3. Right-click a selected variable and click Edit variables.
4. From the Edit variables modal, you can:
   • Scope variables, if supported by the variable type
   • Hide variables from publishing

Group a selection of variables

To organize variables into a group:

1. From the Variables modal, select multiple variables:
   • Hold ⌘ Command / Control to select multiple variables
   • Hold ⇧ Shift to select a range of variables
2. Right-click the selection and select New group with selection.

Click and drag groups in the sidebar of the Variables modal to reorder groups. You can also click and drag groups into other groups to nest them. 

Rename a group

1. From the Variables modal, click Toggle sidebar so that it’s visible.
2. Double click the group name.
3. Type a new name for the variable group.

Manage a group

1. From the Variables modal, click Toggle sidebar so that it’s visible.
2. Right-click the group name in the sidebar.
3. From the menu, choose from the following:
   • Ungroup
   • Duplicate group
   • Delete group

Create and manage variable collections

To create a variable collection:

1. From the Variables modal, click Toggle sidebar so that it’s visible.
2. Open the collection dropdown and select Create collection.

To rename or delete a collection of variables:

1. From the Variables modal, click Toggle sidebar so that it’s visible.
2. Open the collections dropdown and choose the collection you want to manage.
3. Open the collections dropdown again and select Rename collection or Delete collection.