Conditional interactions in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Conditional Interactions in Figma Prototypes

In Figma, conditional interactions allow you to create prototypes that respond differently based on user actions or variable states. Which of the following best describes how conditional interactions work?

A They create animations that loop infinitely without user input.

B They automatically generate data visualizations from your design layers.

C They let you trigger different prototype flows based on variable values or user inputs.

D They export your prototype as a static image for presentations.

💡 Hint

Think about how prototypes can change behavior depending on what the user does or what data is present.

Conditional interactions in Figma prototypes allow designers to create dynamic flows that change based on variables or user actions, making prototypes more realistic and interactive.

❓ dax_lod_result

intermediate

DAX Expression for Conditional Interaction Result

You have a sales table with columns: Region, SalesAmount, and IsActive (TRUE/FALSE). You want a measure that sums SalesAmount only for active regions. Which DAX measure correctly implements this conditional sum?

A Active Sales = SUMX(FILTER(Sales, Sales[IsActive] = TRUE()), Sales[SalesAmount])

B Active Sales = CALCULATE(SUM(Sales[SalesAmount]), FILTER(Sales, Sales[IsActive] = TRUE()))

C Active Sales = SUM(Sales[SalesAmount]) WHERE Sales[IsActive] = TRUE()

D Active Sales = IF(Sales[IsActive] = TRUE(), SUM(Sales[SalesAmount]), 0)

💡 Hint

Remember that CALCULATE needs a filter expression wrapped properly, and SUMX can iterate over filtered rows.

Option A uses FILTER to select only active rows and then sums SalesAmount over those rows. Option A is invalid syntax because the filter condition is not wrapped in FILTER or a proper filter expression. Option A is invalid syntax. Option A tries to use IF on a column, which is not valid for aggregation.

❓ visualization

advanced

Designing a Conditional Interaction Dashboard in Figma

You want to design a dashboard prototype in Figma that shows different charts based on a user-selected filter (e.g., region). Which approach best uses conditional interactions to achieve this?

A Export charts as separate PNGs and link them externally.

B Create multiple frames with different charts and use conditional interactions to show the correct frame based on the filter variable.

C Use a single static image of all charts combined without interaction.

D Place all charts on one frame and hide/show them manually without using variables.

💡 Hint

Think about how prototypes can switch views dynamically based on user choices.

Using multiple frames with conditional interactions based on variables allows the prototype to display only the relevant chart depending on user selection, making the dashboard interactive and realistic.

🔧 Formula Fix

advanced

Debugging a Conditional Interaction in Figma Prototype

You set up a conditional interaction in Figma to show a success message only if a variable isFormValid is TRUE. However, the message always shows regardless of the variable's value. What is the most likely cause?

A The variable <code>isFormValid</code> is never updated and remains TRUE by default.

B The condition is set incorrectly, using assignment (=) instead of comparison (==).

C The interaction trigger is set to 'On Click' instead of 'On Hover'.

D The success message layer is hidden by default.

💡 Hint

Check if the variable controlling the condition changes as expected.

If the variable isFormValid never updates and stays TRUE, the condition will always pass, showing the message regardless of actual form validity.

🎯 Scenario

expert

Implementing Complex Conditional Interactions with Multiple Variables

You are designing a Figma prototype for a sales dashboard. You want to show a special alert only when Region = 'North' AND Sales > 100000. Which conditional interaction setup correctly implements this logic?

A Trigger the alert unconditionally without any condition.

B Create two separate interactions: one for <code>Region == 'North'</code> and one for <code>Sales > 100000</code>, both showing the alert independently.

C Use an OR condition: <code>Region == 'North' || Sales > 100000</code> to show the alert.

D Set the interaction condition to: <code>Region == 'North' && Sales > 100000</code>

💡 Hint

Think about how to combine multiple conditions so both must be true.

Using the AND operator (&&) ensures the alert shows only when both conditions are true. Option D triggers the alert if either condition is true, which is incorrect. Option D uses OR, which is also incorrect. Option D ignores conditions.

Practice

1. What is the main purpose of conditional interactions in Figma prototypes?

easy

A. To make prototypes respond differently based on user actions

B. To change the color of all elements automatically

C. To export designs as images

D. To add comments to the design

Solution

1. Step 1: Understand conditional interactions

   Conditional interactions let prototypes react differently depending on what the user does.

2. Step 2: Identify the main purpose

   This helps make the prototype smarter and more interactive, not just static.

3. Final Answer:

   To make prototypes respond differently based on user actions -> Option A

4. Quick Check:

   Conditional interactions = user-driven responses [OK]

Hint: Think: 'How does prototype change with user input?' [OK]

Common Mistakes:

• Confusing conditional interactions with styling changes
• Thinking it exports designs
• Assuming it adds comments

2. Which of the following is the correct way to set a conditional interaction in Figma?

easy

A. Select an element, add an interaction, then set a condition like 'If click, then show overlay'

B. Right-click and choose 'Export as conditional'

C. Draw a rectangle and name it 'Condition'

D. Use the text tool to write 'If user clicks'

Solution

1. Step 1: Recall how to add conditional interactions

   You select an element, add an interaction, and then specify a condition for that interaction.

2. Step 2: Match the correct method

   Select an element, add an interaction, then set a condition like 'If click, then show overlay' describes this process correctly, while others describe unrelated actions.

3. Final Answer:

   Select an element, add an interaction, then set a condition like 'If click, then show overlay' -> Option A

4. Quick Check:

   Correct setup = Select an element, add an interaction, then set a condition like 'If click, then show overlay' [OK]

Hint: Remember: Add interaction, then add condition [OK]

Common Mistakes:

• Thinking conditional interactions are export options
• Confusing naming elements with setting conditions
• Using text tool to create logic

3. Given a prototype with a button that has a conditional interaction: If click AND toggle is ON, then navigate to Screen B. What happens if the toggle is OFF and the button is clicked?

medium

A. The prototype navigates to Screen B anyway

B. Nothing happens; no navigation occurs

C. The prototype shows an error message

D. The toggle automatically turns ON

Solution

1. Step 1: Analyze the condition

   The interaction requires both click and toggle ON to navigate to Screen B.

2. Step 2: Evaluate toggle OFF case

   If toggle is OFF, the condition is false, so the navigation does not happen.

3. Final Answer:

   Nothing happens; no navigation occurs -> Option B

4. Quick Check:

   Condition false = no action [OK]

Hint: Both conditions must be true for action [OK]

Common Mistakes:

• Assuming navigation happens regardless
• Expecting error messages in prototype
• Thinking toggle changes automatically

4. You set a conditional interaction: If user clicks button, then show overlay. But clicking the button does nothing. What is the most likely error?

medium

A. The user did not save the file

B. The button is not visible on the screen

C. The prototype is in design mode, not prototype mode

D. The overlay is not created or linked properly

Solution

1. Step 1: Check the interaction setup

   If clicking does nothing, the overlay might not exist or is not linked correctly.

2. Step 2: Consider other causes

   Button visibility or mode issues are less likely if the button is clickable; saving file doesn't affect interaction.

3. Final Answer:

   The overlay is not created or linked properly -> Option D

4. Quick Check:

   Missing overlay = no action [OK]

Hint: Verify overlay exists and is linked [OK]

Common Mistakes:

• Ignoring missing overlay setup
• Confusing design mode with prototype mode
• Assuming saving affects interaction

5. You want to create a prototype where clicking a button shows a menu only if the user is logged in. Which conditional interaction setup achieves this best?

hard

A. Set interaction: If userLoggedIn = false, then show menu overlay

B. Set interaction: If click, then show menu overlay regardless of login

C. Set interaction: If click AND userLoggedIn = true, then show menu overlay

D. Set interaction: If click OR userLoggedIn = true, then show menu overlay

Solution

1. Step 1: Understand the requirement

   The menu should show only when the user clicks AND is logged in.

2. Step 2: Evaluate options

   Using 'If click AND userLoggedIn = true, then show menu overlay' requires both conditions correctly. Showing when userLoggedIn = false is the opposite of the requirement. Showing regardless of login ignores the login status. Using OR shows the menu too often.

3. Final Answer:

   Set interaction: If click AND userLoggedIn = true, then show menu overlay -> Option C

4. Quick Check:

   AND condition matches requirement [OK]

Hint: Use AND to combine click and login status [OK]

Common Mistakes:

• Using OR instead of AND
• Ignoring login condition
• Showing menu when user is not logged in