Use variables in prototypes
🚧 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
Available on any paid plan.
Anyone with can edit
access to a file can create prototypes.
Anyone with can view
or can view prototypes only
access to a file can view prototypes.
In Figma, variables are stored values that represent design attributes or saved states. They can be string, number, color, or boolean value types.
You can set and modify the values of variables with prototyping actions—allowing you to create immersive prototypes that dynamically change based on user selection, using only a few simple frames and interactions. This means you can use prototype actions to:
- Update text content with string variables
- Change object dimensions, corner radius, or auto layout properties with number variables
- Toggle layer visibility with boolean variables
To begin using variables in prototypes, set up your variables, then use the Set variable action to change or modify your variable values.
Once you’ve got the hang of using variables and prototypes together, try some more advanced features to extend their power even further:
- Expressions: Manipulate variables with basic operations, allowing you to build more advanced prototypes with flexible values
- Multiple actions and conditionals: Use if/else statements to check if a condition is met before performing actions, and stack an unlimited number of actions on a single trigger
New to variables? Learn more about variables in Figma →
Try it out
For more hands-on experience, check out the “Try it out” tutorials in each section. Use these simple examples to help deepen your understanding of how the feature works.
Want to get even more practice? Check out the advanced prototyping playground file →
Looking for more examples of how you can use variables in prototypes? Check out some more advanced prototyping examples →
Set up your variables
Before you can prototype with variables, you need to:
- Create your variables: Learn how to create and organize variable collections →
- Apply variables: Learn how to apply variables to text content, object dimensions, layer visibility, and more →
Set variable values
Once you’ve created and applied variables throughout your design, you can start using them with prototypes.
Each prototype interaction has a trigger (what causes the prototype to advance forward) and one or more multiple actions (what happens as a result of the trigger).
The Set variable action allows you to set or modify the value of a variable as a result of a prototype trigger.
To use the Set variable action on a prototype interaction:
- Create a prototype interaction.
- Navigate to the Interaction details panel and select a trigger from the dropdown menu.
- From the Actions dropdown menu, select Set variable.
- From the Pick target variable dropdown menu, select the variable you want to set a new value for.
- In the Write expression field, enter in a new value for the variable. The new value type must match the variable type you’re changing. For example, if you selected a number variable, the new value must also be a number.
- String values: Enter any text string literal (contained in quotations), or select any string variable from the selection panel
- Number values: Enter any number value, or select any number variable from the selection panel
-
Boolean values: Enter
true
orfalse
, or select any boolean variable from the selection panel - Color values: Enter any hex code, or select a hex code from the color picker
- Play your prototype to test the interaction.
Note:
Do your variables have multiple modes? Learn more about setting variable values to specific mode values →
Tip:
Use expressions to manipulate variables with operations. For example, you can perform basic math on number variables, combine multiple string variables together, or use boolean expressions.
Try it out
Let’s create a collection of variables titled “Shapes”. This collection will include one string variable that represents the name of the shape.
- Deselect all items on the canvas, then find the Local variables section in the right sidebar and click Open variables.
- Click Create variable, and select String.
- In the Name column, enter “shapeName”.
- In the Value column, enter “circle”.
Now, you can apply the shapeName
variable to your design. For this example, we’ve created a simple design that includes a frame with two shapes (a circle and a square) and two text layers. We want to bind the shapeName
variable to the bottom text layer so that it changes based on the selected shape.
- Recreate the design pictured below. Add an ellipse object, a rectangle object, and two text layers to a frame. Enter “You picked:” as the content of the first text layer.
- Click to select the bottom text layer on your frame.
- From the Design tab in the right sidebar, find the Text section and click Apply variable.
- Select the
shapeName
variable from the variable selection panel to apply it to the text content.
Now, let’s add an interaction with a Set variable action.
- Select the ellipse object.
- From the right sidebar, switch to the Prototype tab. In in Interactions section, click the plus sign to add a new interaction.
- In the Interaction details panel, create an interaction with an On tap/On click trigger and the Set variable action.
- Select the
shapeName
variable from the dropdown menu. In the to field, set the new value to “circle”. - Repeat steps 1-4 for the rectangle object. This time, set the
shapeName
variable to “square”.
Now, you’re ready to play your prototype to test it out. When you click each shape object, the text layer will automatically update based on the new variable value.
Prototyping with variables in practice
Once you’ve learned the basics, you can start using prototypes and variables in an assortment of ways.
Use variables with component variants
You can apply variables to component variants. This allows you to automatically update your component using the Set variable action.
- Create a component set with at least two variants. (For example, create a component set that has a “shape” variant property with “circle” and “square” values.)
- Place an instance of a variant on a frame.
- Assign a variable to the instance. The value of the variable must match a variant property value. (For example, assign a
shapeType
variable with a default “circle” value to the instance).- Click on the instance to select it.
- From the right sidebar, hover to the right of a variant property and click Assign variable.
- Select the variable you’d like to bind to the property.
- Create an interaction on any object within the frame that uses the Set variable action. Change the value of the variable to match the value of the unused variant property. (For example, set the
shapeType
variable value to “square”.) - Play your prototype to test the interaction. When the interaction is triggered and the variable is changed, the variant also updates.
Note:
Variables can only be applied to top-level instances, and are not available for nested variant instances.
Try it out
- Create a new local string variable, named
colorName
, and make the default value “blue”. -
Create a component set with two variants: one blue square and one yellow square. Name the variant property “color”, with “blue” and “yellow” value names.
- Place an instance of the blue variant in a frame.
- Apply the
colorName
variable to the instance by clicking Assign variable next to the “color” variant property. - Add two text layers to the frame, below the square. One text layer should say “blue” and the other “yellow”.
- Select the text layer that says “blue” and add a prototype interaction with an On click/On tap trigger and Set variable action. Set the value of the
colorName
variable to “blue”. - Select the text layer that says “yellow” and add a prototype interaction with an On click/On tap trigger and a Set variable action. Set the value of the
colorName
variable to “yellow”. - Play your prototype to test the interaction. When you click the “yellow” text, the component updates to the yellow square variant. When you click the “blue” text, the component updates to the blue square variant.
Use variables with interactive components
Similar to using variables with component variants, you can apply variables to interactive components.
Now, when you click an interactive component:
- The variant updates
- The variable updates, which in turn updates any other elements bound to that same variable
To use interactive components with variables:
- Create an interactive component set. (For example, create a button interactive component that has a “clicked” variant property with “true” and “false” values.)
- Place an instance of a variant from the interactive component set in a frame.
- Assign a variable to the interactive component instance. The value of the variable must match a variant property value. (For example, assign a boolean
circleVisibility
variable with a default “false” value to the instance).- Select the instance.
- From the right sidebar, select the dropdown menu for one of the variant properties.
- Select Assign variable.
- Click to select a variable to bind to the property.
- Play your prototype to test the interaction. When the interaction is triggered and the component is changed, the value of the variable also changes. This means that if you have that same variable bound to any other values, those will also update.
Note:
Variables can only be applied to top-level instances, and are not available for nested variant instances.
Try it out
- Create a local boolean variable. Name the variable
selected
, and set the starting value to “false”. - Create a component set with two variants: a selected state and an unselected state. Name the variant property “selected”, with “true” and “false” value names.
- Add prototype interactions between the variants in the component set. On tap, the false variant should Change to the true variant. On tap, the true variant should Change to the false variant.
- Place an instance of the false variant on the frame.
- Apply the
selected
variable to the instance by clicking Assign variable next to the “selected” variant property. - Add a star object to the frame.
- Apply the selected variable to the star object’s visibility:
- Select the star.
- Go to the Layer section of the right sidebar and right-click the visibility icon.
- Click the
selected
variable from the variable selection panel. Now, the star will only be visible if theselected
variable value is true.
- Play your prototype. When you click the button, the star object’s visibility toggles on and off.