Variables in prototypes in Figma - Step-by-Step Guide

Introduction

Variables in prototypes let you store and reuse information like user choices or input. This helps make your prototype interactive and realistic without extra screens.

When you want to remember a user’s name and show it on different screens.

When you need to track if a toggle is on or off and change the design accordingly.

When you want to create a quiz that shows different results based on answers.

When you want to simulate a shopping cart that updates as items are added.

When you want to change text or colors dynamically based on user actions.

Steps

Step 1: Open your prototype file

- Figma desktop app or web

Your design file is ready for editing

Step 2: Click the Prototype tab

- Right sidebar

Prototype settings panel appears

Step 3: Click the Variables icon

- Prototype tab toolbar

Variables panel opens showing existing variables or empty if none

Step 4: Click New Variable

- Variables panel

A new variable is created with default name and type

Step 5: Name the variable and choose its type (Text, Number, Boolean)

- Variables panel input fields

Variable is ready to store data of chosen type

Step 6: Add an interaction to a frame or component

- Prototype tab > Interaction section

Interaction options appear

Step 7: Select Set Variable action

- Interaction action dropdown

Variable value can be assigned or changed on interaction

Step 8: Choose the variable and set its new value

- Set Variable action settings

Variable updates when user triggers the interaction

Step 9: Use the variable in text layers or component properties

- Text layer content or component property fields

Prototype shows dynamic content based on variable value

Before vs After

Before

Prototype shows static text and no user data is remembered between screens

After

Prototype displays user input or choices dynamically using variables, making it interactive and personalized

Settings Reference

Variable Type

📍 Variables panel when creating or editing a variable

Defines what kind of data the variable can store

Default: Text

Set Variable Action

📍 Prototype tab > Interaction action dropdown

Assigns or changes the value of a variable during an interaction

Default: None

Variable Usage in Text

📍 Text layer content editing

Displays the current value of a variable inside text

Default: No variable

Common Mistakes

Trying to use a variable without setting its initial value

The variable will be empty or undefined, so the prototype shows blank or default text

Always set an initial value for variables before using them in the prototype

Using the wrong variable type for the data

For example, using a Boolean variable to store text will cause errors or unexpected results

Choose the correct variable type that matches the data you want to store

Not linking the Set Variable action to a user interaction

Variables won’t update automatically and the prototype won’t respond to user actions

Add Set Variable actions to buttons or other interactive elements to update variables

Summary

Variables store and reuse data inside Figma prototypes to make them interactive.

You create variables in the Prototype tab and set their values with interactions.

Remember to set initial values and use the correct variable types for best results.

Practice

1. What is the main purpose of using variables in Figma prototypes?

easy

A. To store information that makes prototypes interactive

B. To change the color of shapes automatically

C. To export images faster

D. To create new pages in the file

Solution

1. Step 1: Understand what variables do in prototypes

   Variables hold data like numbers or text to change prototype behavior dynamically.

2. Step 2: Identify the correct purpose

   Among the options, only storing information for interactivity matches variables' role.

3. Final Answer:

   To store information that makes prototypes interactive -> Option A

4. Quick Check:

   Variables = store info for interactivity [OK]

Hint: Variables store data to make prototypes respond [OK]

Common Mistakes:

• Thinking variables change colors automatically
• Confusing variables with exporting features
• Assuming variables create new pages

2. Which of the following is the correct syntax to set a variable named score to 10 in a Figma prototype?

easy

A. Set(score, 10)

B. Set(score = 10)

C. Set("score", 10)

D. Set('score' = 10)

Solution

1. Step 1: Recall the syntax for setting variables

   Variables require the name as a string in quotes and the value separated by a comma.

2. Step 2: Compare options

   Only Set("score", 10) uses quotes around the variable name and a comma to separate name and value.

3. Final Answer:

   Set("score", 10) -> Option C

4. Quick Check:

   Set("name", value) syntax [OK]

Hint: Variable names need quotes in Set() function [OK]

Common Mistakes:

• Omitting quotes around variable name
• Using equals sign instead of comma
• Using single quotes incorrectly

3. Given the variable count is set to 3, what will be displayed if the text element contains: You clicked {{count}} times?

medium

A. You clicked 0 times

B. You clicked {{count}} times

C. You clicked times 3

D. You clicked 3 times

Solution

1. Step 1: Understand variable usage in text

   The syntax {{count}} replaces with the current value of the variable count.

2. Step 2: Substitute the value

   Since count = 3, the text becomes "You clicked 3 times".

3. Final Answer:

   You clicked 3 times -> Option D

4. Quick Check:

   {{count}} = 3 substitution [OK]

Hint: {{variable}} shows current variable value in text [OK]

Common Mistakes:

• Leaving {{count}} as is without substitution
• Mixing order of words
• Assuming variable is zero if not set

4. You wrote Set(count 5) to set a variable but it doesn't work. What is the error?

medium

A. Missing comma between variable name and value

B. Variable name should not be in quotes

C. Value must be a string, not a number

D. Set function cannot set numbers

Solution

1. Step 1: Check the Set() function syntax

   Set() requires two arguments separated by a comma: name and value.

2. Step 2: Identify the missing comma

   The code misses the comma between count and 5, causing syntax error.

3. Final Answer:

   Missing comma between variable name and value -> Option A

4. Quick Check:

   Set(name, value) needs comma [OK]

Hint: Remember comma separates name and value in Set() [OK]

Common Mistakes:

• Forgetting the comma
• Using wrong quotes around variable name
• Thinking numbers can't be set

5. You want to create a prototype that counts how many times a button is clicked. Which sequence correctly updates and shows the count using variables?

hard

A. Set("count", 1) on start; on click: Set("count", 1); display text: "Clicked {{count}} times"

B. Set("count", 0) on start; on click: Set("count", {{count}} + 1); display text: "Clicked {{count}} times"

C. Set(count, 0) on start; on click: Set(count, count + 1); display text: "Clicked count times"

D. Set("count", 0) on start; on click: Set("count", count + 1); display text: "Clicked {{count}} times"

Solution

1. Step 1: Initialize the count variable correctly

   Use Set("count", 0) with quotes around name to start at zero.

2. Step 2: Update count on click using current value plus one

   Use Set("count", {{count}} + 1) to add one to current count value.

3. Step 3: Display the count using {{count}} syntax

   Text must use "Clicked {{count}} times" to show updated count.

4. Final Answer:

   Set("count", 0) on start; on click: Set("count", {{count}} + 1); display text: "Clicked {{count}} times" -> Option B

5. Quick Check:

   Initialize, increment with {{count}}, display with {{count}} [OK]

Hint: Initialize zero, increment with {{count}} + 1, display with {{count}} [OK]

Common Mistakes:

• Not using quotes around variable name
• Not referencing variable with {{}} when updating
• Displaying variable name without {{}} in text