Create and manage variables and collections

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:

1. Variable collections
2. Variables
3. Modes for variables
4. Variable groups

To access the Variables modal:

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.

You can click Toggle sidebar to see additional options in the variables modal.

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.

Each collection can have up to 5,000 variables.

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 available libraries.

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

Copy and paste variables

You can copy and paste variables to any collection, including collections in a different file.

1. Open the desired collection from the variables modal.
2. Select one or more variables.
   • Hold ⌘ Command for Mac or ⌃ Control for Windows to select multiple variables.
   • Hold ⇧ Shift to select a range of variables.
3. Right-click the selection and select Copy.
4. From any collection, right-click and select Paste.

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 name of the variable.
2. Add a description to explain how the variable should be used.
3. Modify the values of the variable.
4. Add code syntax.
5. Hide the variable from publishing.
6. Scope a variable to limit which properties the variable can be applied to.

Scope a variable

Scope a variable to limit which properties the variable can be applied to. This reduces the guesswork when deciding which variables to use for your 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 Scope 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

Create and manage variable collections

A collection is a set of variables and modes. Collections can be used to organize related variables together. For example, use one collection to localize text in different languages, and another collection for spatial values.

Create a variable collection

To create a variable collection, go to the sidebar of the variables modal and click More options > Create collection.

If a variable has not been created in a file, you will need to create a variable first in order to create new variable collections.

Rename a variable collection

To rename a variable collection:

1. In the sidebar of the variables modal, open the collections dropdown and choose the collection you want to manage.
2. Click More options and select Rename collection.

Delete a variable collection

Deleting a variable collection also deletes all of its containing variables. Any properties that were using the variables will no longer be connected to the variable and any existing modes. The variables and collection can only be restored by immediately undo-ing the action or by restoring an earlier version of the file. 

To delete a variable collection:

1. In the sidebar of the variables modal, open the collections dropdown and choose the collection you want to manage.
2. Click More options and select Delete collection.

Reorder variable collections in a file

Reorder your variable collections to organize and find variables faster when applying them to designs. Changing the order of variable collections will affect the order in which they appear from the variable mode selector and variable selectors.

To reorder variable collections in a file:

1. In the sidebar of the variables modal, click More options and select Reorder collections.
2. From the Collections popup, you can:
   • Click and drag to reorder the collections
   • Or click Sort A to Z to order collections in alphanumerical order

Group a selection of variables

You can further organize variables by adding them to groups within a collection. For example, use one group for colors used for text, and another for colors used on strokes.

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. In the sidebar of the variables modal, double click the group name.
2. Type a new name for the variable group.

Manage a group

1. In the sidebar of the variables modal, right-click the group name in the sidebar.
2. From the menu, choose from the following:
   • Ungroup
   • Duplicate group
   • Delete group