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:
- Click the Style icon in the Fill or Stroke section of the right sidebar.
- 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:
- For independent corner radius and all properties: click into the field and press =
- For width, height, minimum and maximum width/height, and gap-between: open the dropdown and select Apply variable
- For padding and uniform corner radius: click Apply variable
- From the Library picker, select a variable. Number variables are noted with a number icon.
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: