Apply variables to designs

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

Looking for more resources on variables? Check out our guide to variables →

Apply variables to various layer properties in the right sidebar. You can also apply variables to properties in text styles and color styles. Learn about which properties each variable type supports →

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

Color variables can be found in the Libraries picker and display as squares, while color styles display as circles. You can use the search bar to find the variable by name or variable group, or open the dropdown to filter by library.

Solid colors 

For a selected layer:

1. Click styles and variables in the Fill or Stroke section of the right sidebar.
2. Select a variable from the picker to apply.

For new or existing color styles:

1. Edit or create a new color style.
2. From the window, click a color swatch from the Properties section.
3. Open the Libraries tab and select a variable to apply.

You can also apply color variables within a mixed selection.

Learn more about fill and stroke properties →

Gradient stops

1. Open the color picker:
   • For a selected layer: Select the color swatch in the Fill or Stroke section of the right sidebar.
   • For a new or existing color style: Edit or create a new color style. From the window, click a color swatch from the Properties section.
2. From the color picker, select the Gradient icon.
3. Select a color swatch from the list of colors in the gradient.
4. Open the Libraries tab and select a variable to apply to the gradient stop.

Learn more about using color variables on gradients →

Effects

Apply color variables to the color property of an effect.

1. Open the color picker:
   • For a selected layer: Select the color swatch in the Fill or Stroke section of the right sidebar.
   • For a new or existing color style: Edit or create a new color style. From the window, click a color swatch from the Properties section.
2. Click Effect settings on any Inner shadow or Drop shadow effects
3. Click the color swatch.
4. Open the Libraries tab and select a variable to apply.

Learn more about shadow effects →

Apply a number variable

To apply a number variable to a selected object, click into the property field and press =. You can also choose one of the following:

Property	Additional methods
Font size Gap between Layout grid count Width and height Maximum width and height	Open the dropdown menu and select Apply variable
Corner radius Effects Layout grid width, height, margin, offset, and gutter Padding	Click Apply variable Hold Shift and click into the field
Layer opacity Stroke weight	Hold Shift and click into the field Right-click and select Apply variable
Letter spacing Line height Paragraph indent Paragraph spacing	Click Apply variable Hold Shift and click into the field Right-click and select Apply variable (desktop only)

From the Library picker, select a variable. Number variables are noted with a number icon.

Apply a string variable

Text content

String variables can be applied to the text content of any text layer. That means if the string variable has the value Figma, then the text layer will say Figma. 

1. From the right sidebar, click Apply variable.
   
   • For standard text layers, the Apply variable button is in the bottom right corner of the Text section.
   • For text layers with a text style applied, the Apply variable button is to the right of the style's label.
2. Select a variable from the picker to apply.

Font properties

String variables can be applied to font family or font weight and style.

For a selected text layer:

1. Open the dropdown for font family or font weight.
2. Select Apply variable.
3. Select a variable from the picker. 

For new or existing text styles:

1. Edit or create a new text style.
2. From the window, open the dropdown for font family or font weight.
3. Select Apply variable.
4. Select a variable from the picker.

 

Apply a boolean variable

Boolean variables can be applied to layer visibility.

If the value of the boolean variable is true then the layer will be visible. If the value of the boolean variable is false then the layer will be hidden.

1. From the Layer section of the right sidebar, right-click the visible / hidden icon.
2. Select a variable from the picker.

Apply variables to variant instances

Boolean, number, and string variables can be applied to instances with variant properties to switch between variants of a component set. This can help you switch between variants depending on the mode of the parent frame.

Learn how to create variable modes for variant instances →

Detach a variable

To detach a variable from a property, text content, or style:

• 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. For certain properties, you can also click the Detach variable icon.

Paste unpublished variables across files

When you copy and paste an object from one file to another, you may want to duplicate the object's unpublished variables to the second file to continue editing variables on the pasted object—such as when you are building a prototype. 

This is possible for objects that have:

• Unpublished variables directly applied to their properties (such as fill color).
• Or, unpublished styles directly applied to their properties, where the styles use unpublished variables. In this case, the pasted object will lose its connection to the unpublished style when opting to copy variables over.

Once you paste these objects to a different file, a toast notification is triggered at the bottom of the file. If you opt to copy the variables over, they’ll be copied into a new collection and the pasted objects will remap to the new variables.

If the object you copied is a published component and the destination file has access to it, then no remapping will occur.