0
0
Figmabi_tool~8 mins

Component instances in Figma - Dashboard Guide

Choose your learning style9 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash
Dashboard Mode - Component instances
Dashboard Goal

Understand how component instances in Figma help create consistent, reusable dashboard elements for business intelligence reports.

Sample Data
CategorySalesProfit
Electronics12000030000
Furniture8000015000
Clothing6000012000
Books400008000
Sports5000010000
Dashboard Components
  • KPI Card Component (Master): A reusable card showing a metric title, value, and icon. Used for Sales and Profit KPIs.
  • Sales KPI Instance: Instance of KPI Card with title 'Total Sales' and value '350000' (sum of Sales).
  • Profit KPI Instance: Instance of KPI Card with title 'Total Profit' and value '75000' (sum of Profit).
  • Bar Chart Component (Master): A reusable bar chart frame with axes and bars placeholder.
  • Sales by Category Chart Instance: Instance of Bar Chart showing Sales per Category from sample data.
  • Profit by Category Chart Instance: Instance of Bar Chart showing Profit per Category from sample data.
Dashboard Layout
+--------------------------------------------------+
| Total Sales KPI       | Total Profit KPI          |
| [KPI Card Instance]  | [KPI Card Instance]       |
+--------------------------------------------------+
| Sales by Category Chart (Bar Chart Instance)     |
|                                                  |
+--------------------------------------------------+
| Profit by Category Chart (Bar Chart Instance)    |
|                                                  |
+--------------------------------------------------+
Interactivity

Filters applied to the dashboard (like selecting a category) update both KPI cards and charts simultaneously because all component instances are linked to the same data source. Changing the master component style updates all instances automatically, ensuring consistency.

Self Check

If you add a filter to show only 'Electronics' category, which components update?

  • Sales KPI Instance updates to show sales for Electronics only (120000).
  • Profit KPI Instance updates to show profit for Electronics only (30000).
  • Sales by Category Chart updates to show only Electronics bar.
  • Profit by Category Chart updates to show only Electronics bar.
Key Result
Dashboard showing how Figma component instances create reusable KPI cards and charts for sales and profit data.