Conditional interactions in Figma - Dashboard Guide

Dashboard Mode - Conditional interactions

Dashboard Goal

Understand how sales performance changes by product category and region using interactive filters that show or hide details based on selections.

Sample Data

Order ID	Product Category	Region	Sales Amount	Order Date
1001	Electronics	North	250	2024-01-15
1002	Furniture	South	450	2024-02-10
1003	Electronics	East	300	2024-01-20
1004	Clothing	West	150	2024-03-05
1005	Furniture	North	500	2024-02-25
1006	Clothing	South	200	2024-03-15
1007	Electronics	West	350	2024-01-30

Dashboard Components

• KPI Card: Total Sales
  Formula: SUM of Sales Amount for filtered data.
  Example: If no filter, total sales = 2200.
• Bar Chart: Sales by Product Category
  Shows total sales per category.
  Formula: SUM(Sales Amount) grouped by Product Category.
  Updates based on Region filter.
• Pie Chart: Sales by Region
  Shows sales distribution by region.
  Formula: SUM(Sales Amount) grouped by Region.
  Visible only if a Product Category is selected.
• Table: Detailed Orders
  Shows all orders filtered by selected Product Category and Region.
  Columns: Order ID, Product Category, Region, Sales Amount, Order Date.
• Filter: Product Category
  Dropdown to select one or multiple categories.
  Controls visibility of Pie Chart and filters other components.
• Filter: Region
  Dropdown to select one or multiple regions.
  Filters Bar Chart and Table.

Dashboard Layout

+----------------------+----------------------+
|      KPI Card        |   Filter: Category    |
|   (Total Sales)      |   [Dropdown]          |
+----------------------+----------------------+
|  Bar Chart: Sales by |   Filter: Region      |
|  Product Category    |   [Dropdown]          |
+----------------------+----------------------+
|       Pie Chart      |                      |
|   Sales by Region    |                      |
|  (Visible if Category|                      |
|   filter active)     |                      |
+----------------------+----------------------+
|               Table: Detailed Orders           |
+------------------------------------------------+
    

Interactivity

Product Category Filter: Selecting one or more categories filters the Bar Chart, Table, and shows the Pie Chart. If no category is selected, the Pie Chart is hidden.

Region Filter: Selecting regions filters the Bar Chart and Table to show only sales from those regions. It does not affect the Pie Chart visibility.

Conditional Interaction: The Pie Chart only appears when the Product Category filter has a selection. This helps focus on regional sales distribution for chosen categories.

Self Check

Try selecting the Product Category filter to "Electronics" only. Which components update and how?

• The KPI Card updates to show total sales for Electronics only.
• The Bar Chart updates to show sales by category but filtered to Electronics (so only Electronics bar visible).
• The Pie Chart appears and shows sales distribution by region for Electronics.
• The Table updates to list only orders with Electronics category.
• The Region filter remains active and further filters Bar Chart and Table.

Key Result

Interactive sales dashboard showing total sales, sales by category and region, with conditional pie chart visibility based on product category selection.

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