Conditional interactions in Figma - Step-by-Step Guide

Introduction

Conditional interactions let you create buttons or elements that behave differently based on what the user does or the current state. This helps make your dashboards or reports more interactive and user-friendly by showing or hiding information depending on choices.

When you want a button to show different charts depending on the selected filter

When you need to display extra details only if a user clicks a specific item

When your dashboard should change views based on user input without loading a new page

When you want to disable or enable controls depending on previous selections

When you want to guide users through steps that depend on their earlier choices

Steps

Step 1: Select the element you want to add a conditional interaction to

- Figma canvas

The element is highlighted and ready for interaction setup

Step 2: Click the Prototype tab in the right sidebar

- Right sidebar

Prototype options appear for the selected element

Step 3: Click the plus (+) icon next to Interactions to add a new interaction

- Prototype tab

A new interaction row appears with trigger and action options

Step 4: Set the trigger (e.g., On Click) and action (e.g., Navigate to) for the interaction

- Interaction row

Basic interaction is defined for the element

Step 5: Click the gear icon next to the interaction to open conditional settings

- Interaction row

Conditional logic panel opens where you can add rules

Step 6: Add a condition by selecting a property (like a component state or variable) and setting its value

- Conditional logic panel

The interaction will only happen if the condition is true

Step 7: Repeat to add multiple conditions or else actions if needed

- Conditional logic panel

Complex conditional interactions are set up to handle different user scenarios

Before vs After

Before

A button always navigates to the same screen regardless of user choices

After

The button navigates to different screens depending on the selected filter or state

Settings Reference

Trigger

📍 Prototype tab > Interaction row

Defines what user action starts the interaction

Default: On Click

Action

📍 Prototype tab > Interaction row

Defines what happens when the trigger occurs

Default: Navigate to

Condition

📍 Interaction row > Gear icon > Conditional logic panel

Sets rules to control when the interaction runs

Default: No condition

Common Mistakes

Not setting any condition, so the interaction always runs

This removes the benefit of conditional logic and can confuse users

Always add clear conditions to control when the interaction should happen

Using incorrect property names or values in conditions

The condition will never be true, so the interaction won't trigger

Double-check property names and values match exactly what is defined in your components or variables

Adding too many complex conditions without testing

It can make the prototype slow or behave unpredictably

Test each condition step-by-step and keep logic as simple as possible

Summary

Conditional interactions let you control what happens based on user actions or states.

They make dashboards and reports more interactive and personalized.

Always set clear conditions and test them to ensure correct behavior.

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