Variables in prototypes in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable in a Figma prototype.

Figma

let [1] = 10;

Drag options to blanks, or click blank then click option'

Acount

Bvar

Cscore

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using reserved keywords as variable names

Starting variable names with numbers

In Figma prototypes, you declare variables with let followed by the variable name. Here, score is a valid variable name.

2fill in blank

medium

Complete the code to update a variable value in a Figma prototype.

Figma

[1] = 20;

Drag options to blanks, or click blank then click option'

Ascore

Bconst score

Cvar score

Dlet score

Attempts:

3 left

💡 Hint

Common Mistakes

Redeclaring the variable with let when updating

Using const which prevents reassignment

To update a variable's value, just use the variable name followed by the assignment operator. No need to redeclare with let or const.

3fill in blank

hard

Fix the error in the variable declaration for a Figma prototype.

Figma

let [1] = 'blue';

Drag options to blanks, or click blank then click option'

A1color

Bcolor1

Cvar

Dlet

Attempts:

3 left

💡 Hint

Common Mistakes

Starting variable names with numbers

Using reserved keywords as variable names

Variable names cannot start with a number. color1 is valid because it starts with a letter.

4fill in blank

hard

Fill both blanks to create and update a variable in a Figma prototype.

Figma

[1] color = 'red';
color [2] 'blue';

Drag options to blanks, or click blank then click option'

Alet

B=

C==

Dconst

Attempts:

3 left

💡 Hint

Common Mistakes

Using == for assignment instead of comparison

Using const when the variable needs to be updated

Use let to declare a variable and = to assign or update its value.

5fill in blank

hard

Fill all three blanks to declare a variable, update it, and log it in a Figma prototype.

Figma

[1] count [2] 5;
count [3] 10;
console.log(count);

Drag options to blanks, or click blank then click option'

Alet

B=

C+=

Dconst

Attempts:

3 left

💡 Hint

Common Mistakes

Using const when variable needs to change

Using += instead of = when replacing value

Declare with let, assign with =, and update with = for a new value. Here, count = 10; replaces the old value.

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