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.