0
0
Figmabi_tool~8 mins

Connection creation (click, hover) in Figma - Dashboard Guide

Choose your learning style9 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash
Dashboard Mode - Connection creation (click, hover)
Goal

Understand how to create interactive connections between dashboard elements using click and hover actions in Figma to simulate BI dashboard behavior.

Sample Data
ProductRegionSalesMonth
Widget ANorth100Jan
Widget BSouth150Jan
Widget ANorth120Feb
Widget BSouth130Feb
Widget ANorth140Mar
Widget BSouth160Mar
Dashboard Components
  • KPI Card - Total Sales: Displays sum of all sales.
    Formula: SUM(Sales) = 100+150+120+130+140+160 = 800
  • Bar Chart - Sales by Month: Shows sales totals per month.
    Data points: Jan=250, Feb=250, Mar=300
  • Table - Sales Details: Lists all rows from sample data.
  • Interaction - Click on Bar Chart Month: Filters Table and KPI Card to show only selected month sales.
  • Interaction - Hover on KPI Card: Highlights Bar Chart bars to emphasize total sales context.
Dashboard Layout
+----------------------+----------------------+
|      KPI Card        |    Bar Chart         |
|   (Total Sales)      |  (Sales by Month)    |
+----------------------+----------------------+
|                      Table (Sales Details)  |
|                                            |
+--------------------------------------------+
Interactivity

Click on Bar Chart Month: When user clicks a month bar, the KPI Card updates to show total sales for that month only. The Table filters to show only rows for that month.

Hover on KPI Card: When user hovers over the KPI Card, the Bar Chart highlights all bars with a subtle color change to emphasize total sales context.

Self Check

If you click the "Feb" bar in the Bar Chart, which components update and what do they show?

  • KPI Card updates to show total sales for February: 120 + 130 = 250
  • Table filters to show only rows with Month = Feb (2 rows)
  • Bar Chart remains but the clicked bar is highlighted to show selection
Key Result
Interactive dashboard in Figma showing total sales, sales by month, and detailed sales table with click and hover connections.