Apply variables to designs
🚧 Variables is currently in open beta. We’ll continue to add more features and polish the experience during this time. Find out what's coming next →
Before you Start
Who can use this feature
Anyone on any plan can use variables
Anyone with access to a file can use variables from that file
New to variables? Check out our guide to variables →
Apply variables to layer properties
Apply variables to layers by using different property sections in the right sidebar. You can apply variables to different properties, depending on what's supported by that variable type.Â
You can use any variables from your file’s local variables, or variables from any published team library to which you have access.
Apply a color variable
To apply a color variable to a selected object:
- Open the style picker:
- For fill or stroke: Click the color swatch in the Fill or Stroke section of the right sidebar
- For effects: Click Effect settings on any Inner shadow or Drop shadow effects, then click the color swatch
- From the style picker, choose a variable:
- Color variables display as squares while color styles are shown in circles
- Use the search bar to find the variable by name or open the dropdown to filter by library
- The style picker can be viewed as a list or grid
To apply multiple color variables to a selected object:
- Click the plus icon from the Fill or Stroke section to add another fill.
- Select a fill box to open the color picker.
- Select the Libraries tab and choose a color variable.
You can also apply color variables within a mixed selection.
Apply a number variable
To apply a number variable to a selected object, hover over the property field and do one of the following:
Property | Method |
|
Do one of the following:
|
|
Do one of the following:
|
|
Do one of the following:
|
From the Library picker, select a variable. Number variables are noted with a number icon.
Note: Layer opacity has a maximum value of 100. If you apply a number variable with a value that is greater than 100, the layer opacity value will automatically cap at 100.
Apply a number or string variable to a text layer
To apply a string variable to a selected text layer:
- From the Text section of the right sidebar, click Apply variable.
- Choose from either a number variable or a string variable.
Apply a boolean variable
To apply a boolean variable to a selected object:
- From the Layer section of the right sidebar, right-click the visible / hidden icon.
- Choose a variable from the picker. Boolean variables are noted with a toggle on or toggle off icon.
Apply variables to variant instances
Boolean, number, and string variables can be applied to instances with variant properties.
Learn how to create variable modes for variant instances →
Detach variables
To detach a variable from a layer, select the layer with the applied variable and do one of the following.
- For color, string, and boolean variables, hover over the variable in the relevant right sidebar section, and click the Detach variable icon
- For number variables, click into the property field and press Delete / Backspace twice
Note: Using on-canvas controls to change an auto layout frame’s padding or gap between items will detach any applied number variables.
Ready to continue your variables journey? Check out the following topics: