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

New to 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.

To create an alias for a variable:

1. From the Variables modal, right-click a variable’s value and select Create alias.
2. 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.

A variable can reference other variables of the same type.

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

Scoping a variable allows you to limit which properties it can be applied to. This gives you better control over where the variable can be used and cuts out the guesswork when designing.

For example, if you scope a number variable to corner radius, you'll only be able to apply the variable to corner radius. The variable won't appear as an option for other supported properties.

Scoping is available for number and color variables.

For number variables, you can scope:

• Corner radius
• Width and height
• Gap between
• Text content

For color variables, you can scope:

• Frame fill
• Shape fill
• Text fill
• Stroke

To scope a variable, open the variable's Edit variable modal and find the Scoping section.

• By default, all boxes will be checked so that the variable can be used for all supported properties
• Uncheck any boxes for any properties you wish to limit
• Checking Show in all makes the variable available for all supported properties, and unchecking it makes the variable unavailable everywhere

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.