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.