Variables in prototypes in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Variable Scope in Figma Prototypes

In Figma prototypes, variables can be used to store values that change during interactions. Which statement best describes the scope of a variable defined in a prototype?

A Variables are local to the frame where they are defined and cannot be accessed outside it.

B Variables are global and accessible across all frames and components in the prototype.

C Variables are shared only between components nested inside the same parent frame.

D Variables exist only during a single interaction and reset after it completes.

💡 Hint

Think about how variables help maintain state across different screens in a prototype.

In Figma prototypes, variables are global by default, meaning they can be accessed and updated across all frames and components, allowing consistent state management throughout the prototype.

❓ dax_lod_result

intermediate

Using Variables to Control Prototype Flow

Consider a Figma prototype where a variable step controls which screen is shown. Initially, step = 1. After clicking a button, step increments by 1. What is the value of step after clicking the button twice?

Figma

Initial step = 1
On button click: step = step + 1

A 1

B 2

C 4

D 3

💡 Hint

Each click increases step by 1 starting from 1.

Starting at 1, the first click sets step to 2, the second click sets it to 3.

🔧 Formula Fix

advanced

Fixing Variable Reset Issue in Prototype

A designer notices that a variable score resets to 0 every time the user navigates to a new frame, losing the accumulated value. What is the most likely cause?

A The variable <code>score</code> is defined as a local variable inside each frame instead of a global variable.

B The variable <code>score</code> is not initialized before use.

C The prototype does not have any interactions updating the <code>score</code> variable.

D The variable <code>score</code> is set to reset on every frame load by default.

💡 Hint

Consider how variable scope affects persistence across frames.

If score is defined locally in each frame, it resets when navigating to a new frame. Defining it globally preserves its value across frames.

❓ visualization

advanced

Visualizing Variable Changes in a Prototype Dashboard

You want to create a dashboard in your Figma prototype that shows the current value of a variable progress as a percentage bar. Which visualization approach is best practice?

A Use multiple fixed rectangles stacked vertically to represent progress steps, without linking to the variable.

B Display the <code>progress</code> value as plain text only, without any graphical element.

C Use a rectangle shape with width dynamically linked to the <code>progress</code> variable value, ranging from 0% to 100%.

D Change the background color of the entire frame based on the <code>progress</code> variable.

💡 Hint

Think about how to visually represent a percentage value clearly and intuitively.

Linking the width of a rectangle to the progress variable creates a clear, intuitive progress bar that updates dynamically.

🎯 Scenario

expert

Designing a Multi-User Prototype with Shared Variables

You are designing a Figma prototype simulating a multi-user environment where users can update a shared variable status. Which limitation must you consider?

A Figma prototype variables are local to each user session and cannot be shared in real-time across multiple users.

B Variables in Figma prototypes automatically sync across all users in real-time without extra setup.

C Variables can be shared only if users are collaborating in the same frame simultaneously.

D Figma prototypes support server-side variables for multi-user synchronization.

💡 Hint

Consider how Figma prototypes handle variable state in multi-user scenarios.

Figma prototype variables exist only in the current user session and do not sync across users in real-time, limiting multi-user shared state simulation.

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