Apply variables to designs

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:

1. Click the Style icon in the Fill or Stroke section of the right sidebar.
2. 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:

1. Click the plus icon from the Fill or Stroke section to add another fill.
2. Select a fill box to open the color picker.
3. 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:

1. 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
2. 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:

1. From the Text section of the right sidebar, click Apply variable.
2. Choose from either a number variable or a string variable.

Apply a boolean variable

To apply a boolean variable to a selected object:

1. From the Layer section of the right sidebar, right-click the visible / hidden icon.
2. 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