Dashboard Mode - Why advanced components reduce design debt
Goal
Understand how using advanced components in design tools like Figma helps reduce design debt and improves project efficiency.
0
0
Why advanced components reduce design debt in Figma - Dashboard Impact
Sample Data
| Project | Component Type | Number of Components | Design Debt Score | Time to Update (hours) |
|---|---|---|---|---|
| App Redesign | Basic Components | 50 | 75 | 20 |
| App Redesign | Advanced Components | 30 | 30 | 8 |
| Website Refresh | Basic Components | 40 | 65 | 18 |
| Website Refresh | Advanced Components | 25 | 25 | 7 |
| Marketing Campaign | Basic Components | 35 | 70 | 15 |
| Marketing Campaign | Advanced Components | 20 | 20 | 5 |
Dashboard Components
- KPI Card: Average Design Debt Score
Formula: Average of 'Design Debt Score' grouped by Component Type.
Result: Basic Components = 70, Advanced Components = 25 - KPI Card: Average Time to Update (hours)
Formula: Average of 'Time to Update' grouped by Component Type.
Result: Basic Components = 17.7, Advanced Components = 6.7 - Bar Chart: Number of Components by Project and Type
X-axis: Project
Y-axis: Number of Components
Bars grouped by Component Type (Basic vs Advanced) - Line Chart: Design Debt Score vs Time to Update
X-axis: Design Debt Score
Y-axis: Time to Update
Lines for Basic and Advanced Components showing correlation - Data Table
Shows all sample data for detailed view
Dashboard Layout
+----------------------+----------------------+ | KPI: Avg Design Debt | KPI: Avg Time Update | | Score | (hours) | +----------------------+----------------------+ | | | Bar Chart: Number of Components | | | +----------------------------------------------+ | | | Line Chart: Design Debt vs Time to Update | | | +----------------------------------------------+ | | | Data Table | | | +----------------------------------------------+
Interactivity
A filter for Component Type (Basic or Advanced) updates all components: KPI cards, charts, and table. Selecting 'Advanced Components' shows lower design debt and update times. Selecting 'Basic Components' highlights higher design debt and longer update times.
A project filter lets users focus on one project, updating all visuals accordingly.
Self Check
If you add a filter for Project = "Website Refresh", which components update?
- Both KPI cards update to show averages for Website Refresh only.
- Bar chart shows number of components for Website Refresh projects only.
- Line chart updates to show Design Debt vs Time to Update for Website Refresh.
- Data table filters to Website Refresh rows.
Key Result
Dashboard shows how advanced components reduce design debt and update time across projects.