···

    Use variables in prototypes

    Starting on April 30, 2025, Figma’s previous UI will no longer be available. Try out Figma’s redesign, available to everyone, where you’ll get access to the latest features and product updates.

    This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign.

    Before you start

    Who can use this feature

    Available on any paid plan.

    Anyone with can edit access to a file can create 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

    Learn more about variables in Figma.

    Try it out

    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 modal and select a trigger from the dropdown menu.
    3. From the Action dropdown menu, select Set variable.
    4. From the Target dropdown menu, select the variable you want to set a new value for.
    5. In the Value 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.

    A design with two frames. A prototype action is set on an image on the first frame. When the image is clicked, the profileName variable will update it's value, and the prototype will navigate to the next frame.

    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 modal is open. A string variable with the name shapeName has 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 modal, create an interaction with an On tap/On click trigger and the Set variable action.
    4. Select the shapeName variable from the Target dropdown menu. In the Value field, set the new value to “circle”.
    5. Repeat steps 1-4 for the rectangle object. This time, set the shapeName variable to “square”.

    A circle object is selected on the frame, with the Interaction modal open. An interaction is set: Trigger is On tap, Action is Set variable, Target is shapeName, and Value is circle.

    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 prototype is being played. When the ellipse object is selected, the bottom text layer updates to circle. When the square object is selected, the bottom text layer updates to square.

    Prototype with variables and components

    Once you’ve learned the basics, you can start using variables and components together in your prototypes.

    Apply variables to components to automatically update your component when you change the value of a variable in a prototype. Any change in variable value also updates any other elements bound to that same variable.

    The value of a variable can be changed by:

    • Using the Set variable action
    • Using the Change to action in an interactive component
    • Using the Set variable mode action

    Example

    An interactive button component set has a default and a hover state. The component uses the Change to action, so that when you hover over the default variant, it switches to the hover variant (and vice versa).

    A boolean hoverState variable is applied to both an instance of the variant and the visibility of a separate, overlay layer.

    When you hover over the default variant in your prototype:

    • The instance updates to the hover variant
    • The hoverState boolean variable updates from false to true
    • The image layer is made visible

    Want to practice with a similar example? Check out the “Try it out” section below.

    The location where you apply the variable determines the scope of changes in the prototype.

    Apply variable to: When prototyping:
    Variant properties of component instances Change the value of the variable to update the variant of the instance.
    Component properties Change the value of the variable to update all instances of the component.

    Learn more about applying variables to component and variant properties.

    Note: A nested instance does not transfer changes if its variant is changed due to an attached variable changing values.

    Try it out: Example 1

    1. Create an interactive component set.
      1. Create a button component that has a “clicked” variant property with “true” and “false” values.
      2. Add a prototype interaction on the “false” variant, using the On click trigger and the Change to action. Now, when the false variant is clicked, it will switch to the true variant.A component set of a button. One variant is blue, the other variant is grayed out. The component set has a variant property with true and false values.
    2. Place an instance of a variant from the interactive component set in a frame.
      1. Add the false variant to a frame.
    3. Assign a variable to the interactive component instance. The value of the variable must match a variant property value.
      1. Create a boolean circleVisibility variable with a default false value.
      2. Select the instance of the button.
      3. From the right sidebar, hover over the clicked variant property.
      4. Select Apply variable.
      5. Click to select the circleVisibility variable to bind to the property.An instance of the false button variant is on the frame. The instance is selected, and the user is hovering over the Apply variable button, where they see a list of variables they can apply.
    4. Assign the same variable to another layer in your design.
      1. Add an ellipse object to the frame.
      2. From the Appearance section of the right sidebar, right-click the Hide icon.
      3. Select the circleVisibility variable to apply the boolean variable to the visibility of the ellipse layer.An ellipse object is selected on the frame. From the Appearance section of the right sidebar, a mouse is hovering over the Hide icon.
    5. 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.A prototype plays. When a button is clicked, the button changes to a grayed out variant, and an ellipse appears.

    Try it out: Example 2

    1. Create a component set with at least two variants.
      1. Create a component set that has a “shape” variant property with “circle” and “square” values.A component set with circle and square variants.
    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.
      1. Create a shapeType string variable with a default “circle” value.
      2. Click on the instance to select it.
      3. From the right sidebar, hover to the right of a variant property and click  Assign variable.
      4. Select the variable you’d like to bind to the property.An instance of the circle variant is on a frame. From the right sidebar, in the component section, a mouse hovers over the Apply variable icon.
    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.
      1. Add a prototype interaction on an object, using the On click/On tap trigger and the Set variable action. Set the shapeType variable value to “square”.A button object that says Square is on the frame. On the button, there is a prototype interaction. The Interaction modal is open, with a On click trigger, a Set variable action, a shapeType target, and a value of square (in quotation marks).
    5. Play your prototype to test the interaction. When the interaction is triggered and the variable is changed, the variant also updates.A prototype plays. When a button that says square is pressed, the object becomes a square.

    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.

    Note: A nested instance does not transfer overrides if its variant is changed due to an attached variable changing values.

    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.

    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.

    Note: A nested instance does not transfer overrides if its variant is changed due to an attached variable changing values.

    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.

    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