Design sprint workflow in Figma - Dashboard Guide

Dashboard Mode - Design sprint workflow in Figma

Goal

Understand the step-by-step design sprint workflow visualized in Figma to track progress and collaboration.

Sample Data

Task	Owner	Status	Day	Time Spent (hrs)
Understand Problem	Alice	Complete	Day 1	3
Sketch Solutions	Bob	Complete	Day 2	4
Decide on Solution	Carol	In Progress	Day 3	2
Prototype	Dave	Pending	Day 4	0
Test with Users	Eve	Pending	Day 5	0

Dashboard Components

• KPI Card: Total Hours Spent
  Formula: SUM of 'Time Spent (hrs)' column = 3 + 4 + 2 + 0 + 0 = 9 hours
• KPI Card: Tasks Completed
  Formula: COUNT of rows where Status = 'Complete' = 2
• Bar Chart: Hours Spent per Day
  X-axis: Day (Day 1 to Day 5)
  Y-axis: Time Spent (hrs)
  Bars: 3, 4, 2, 0, 0 hours respectively
• Status Table: Shows Task, Owner, and Status columns for quick status overview

Dashboard Layout

+----------------------+----------------------+
|  KPI: Total Hours    |  KPI: Tasks Completed |
|       9 hrs          |          2           |
+----------------------+----------------------+
|                      Bar Chart: Hours Spent per Day                      |
| Day 1 | Day 2 | Day 3 | Day 4 | Day 5                                   |
|  3    |  4    |  2    |  0    |  0                                     |
+-------------------------------------------------------------------------+
|                            Status Table                                 |
| Task            | Owner | Status                                         |
| Understand Problem | Alice | Complete                                       |
| Sketch Solutions  | Bob   | Complete                                       |
| Decide on Solution | Carol | In Progress                                    |
| Prototype        | Dave  | Pending                                        |
| Test with Users  | Eve   | Pending                                        |
+-------------------------------------------------------------------------+

Interactivity

Filter by Status: Selecting a status (e.g., 'Complete') updates the Status Table to show only tasks with that status. The KPI cards update to reflect totals for filtered tasks. The Bar Chart updates to show hours spent only for filtered tasks.

Filter by Day: Selecting a specific day filters the Status Table and KPIs to tasks scheduled on that day. The Bar Chart highlights the selected day's bar.

Self Check

If you add a filter for Status = 'Complete', which components update?

• Status Table shows only 'Understand Problem' and 'Sketch Solutions' tasks.
• KPI Cards update: Total Hours Spent = 7 (3 + 4), Tasks Completed = 2.
• Bar Chart shows hours only for Day 1 and Day 2 bars (3 and 4 hours), other days show zero or are hidden.

Key Result

A Figma-based dashboard visualizing design sprint tasks, hours spent, and status with interactive filters.