···

    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:

    1. Create your variables: Learn how to create and organize variable collections →
    2. 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:

    1. Create a prototype interaction.
    2. Navigate to the Interaction details panel and select a trigger from the dropdown menu.
    3. From the Actions dropdown menu, select Set variable.
    4. From the Pick target variable dropdown menu, select the variable you want to set a new value for.
    5. 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 or false, or select any boolean variable from the selection panel
      • Color values: Enter any hex code, or select a hex code from the color picker
    6. Play your prototype to test the interaction.

    Four examples of interactions. 1: A cake design, with a Set Variable action setting a boolean sprinkleVisibility variable to true. 2. A background color setting setting, with a Set Variable action setting a color variable bgColor to a new hex code. 3. A design of a square with a Round Corners button beaneath it, with a Set Variable action setting a number variable borderRadius to 20. A select profile design with two avatars, with a Set Variable action setting a string variable, sampleString, to Ernie.

    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.

    1. Deselect all items on the canvas, then find the Local variables section in the right sidebar and click Open variables.
    2. Click Create variable, and select String.
    3. In the Name column, enter “shapeName”.
    4. In the Value column, enter “circle”.The variables authoring panel, with a string variable named shapeName and a value of 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.

    1. 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.
    2. Click to select the bottom text layer on your frame.
    3. From the Design tab in the right sidebar, find the Text section and click Apply variable.
    4. Select the shapeName variable from the variable selection panel to apply it to the text content.

    A frame with an ellipse object, a square object, a text layer that says YOU PICKED and a selected text layer that says CIRCLE. With the second text layer selected, the mouse is hovering over the Apply variable icon from the Text section of the right sidebar.

    Now, let’s add an interaction with a Set variable action.

    1. Select the ellipse object.
    2. From the right sidebar, switch to the Prototype tab. In in Interactions section, click the plus sign to add a new interaction.
    3. In the Interaction details panel, create an interaction with an On tap/On click trigger and the Set variable action.
    4. Select the shapeName variable from the dropdown menu. In the to field, set the new value to “circle”.
    5. Repeat steps 1-4 for the rectangle object. This time, set the shapeName variable to “square”.

    try

    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.

    The ellipse object is selected. From the Prototype tab, and interaction has been created, with an On Tap trigger and a Set Variable action. The shapeName variable is being set to Circle.

    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.

    1. 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.)
    2. Place an instance of a variant on a frame.
    3. 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).
      1. Click on the instance to select it.
      2. From the right sidebar, hover to the right of a variant property and click Assign variable.
      3. Select the variable you’d like to bind to the property.
    4. 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”.)
    5. Play your prototype to test the interaction. When the interaction is triggered and the variable is changed, the variant also updates.

    Screenshot 1: The variable authoring panel, with a string variable ShapeType created, with a default value of Circle. Screenshot 2: A component set, with a Shape property with two values: square, circle. Screenshot 3: An instance of the circle variant on a frame, with the ShapeType variable applied to the component property. Screenshot 4: A button beneath the instance on the frame, with an interaction: Set variable ShapeType to Square.

    Note:

    Variables can only be applied to top-level instances, and are not available for nested variant instances.

    Try it out

    1. Create a new local string variable, named colorName, and make the default value “blue”.
    2. 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.A component set with two variants, a blue square and a yellow square. From the Properties section of the right sidebar, the variant property is named Color, and has two values: blue and yellow
    3. Place an instance of the blue variant in a frame.
    4. Apply the colorName variable to the instance by clicking Assign variable next to the “color” variant property.An istance of the blue variant is placed on a frame. With the instance selected, the mouse is hovering over the Apply Variable icon from the variant properties section of the right sidebar.
    5. Add two text layers to the frame, below the square. One text layer should say “blue” and the other “yellow”.
    6. 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”.try
    7. 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”.
    8. 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.The prototype is being played. When the blue text layer is clicked, the square changes to the blue variant. When the Yellow text layer is clicked, the square changes to the yellow 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:

    1. Create an interactive component set. (For example, create a button interactive component that has a “clicked” variant property with “true” and “false” values.)
    2. Place an instance of a variant from the interactive component set in a frame.
    3. 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).
      1. Select the instance.
      2. From the right sidebar, select the dropdown menu for one of the variant properties.
      3. Select Assign variable.
      4. Click to select a variable to bind to the property.
    4. 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.

    Screenshot 1: An interactive component of a button, with a Clicked variant property with true and false values. Screenshot 2: A circle placed on a frame, with the layer visibility bound to a circleVisibility boolean variable. Screenshot 3: An instance of the button on the same frame, with the circleVisibility boolean variable bound to the variant property. Screenshot 4: A GIF of the prototype in action. When the button is clicked, the circle's visibility toggles on and off.

    Note:

    Variables can only be applied to top-level instances, and are not available for nested variant instances.

    Try it out

    1. Create a local boolean variable. Name the variable selected, and set the starting value to “false”.
    2. 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.A component set with two variants of a button. The variant property is named SELECTED, and has true and false values.
    3. 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.
    4. Place an instance of the false variant on the frame.
    5. Apply the selected variable to the instance by clicking Assign variable next to the “selected” variant property.An instance of the false variant is placed on a frame. With the instance selected, the mouse is hovering over the Apply Variable icon from the variant properties section of the right sidebar.
    6. Add a star object to the frame.
    7. Apply the selected variable to the star object’s visibility:
      1. Select the star.
      2. Go to the Layer section of the right sidebar and right-click the visibility icon.
      3. Click the selected variable from the variable selection panel. Now, the star will only be visible if the selected variable value is true.A star object is placed on the frame. With the star selected, the mouse is hovering over the visibility icon from the Layer section of the right sidebar.
    8. Play your prototype. When you click the button, the star object’s visibility toggles on and off.The prototype is being played. When the button is clicked, it switches to the true variant, and the star becomes visible.
    Was this article helpful?

    Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

    Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

    Thank you for helping us improve Figma’s Help Center!

    Return to top