Base component architecture in Figma - Dashboard Guide

Dashboard Mode - Base component architecture

Dashboard Goal

Understand the basic building blocks of a dashboard by exploring the base component architecture. This helps you see how simple parts like cards, charts, and tables come together to create a clear and useful dashboard.

Sample Data

Month	Sales	Profit	Region
January	1000	200	North
February	1500	300	South
March	1200	250	East
April	1700	400	West
May	1600	350	North
June	1800	450	South

Dashboard Components

• KPI Card: Total Sales
  Formula: SUM(Sales) = 1000+1500+1200+1700+1600+1800 = 8800
• KPI Card: Total Profit
  Formula: SUM(Profit) = 200+300+250+400+350+450 = 1950
• Bar Chart: Sales by Month
  Shows sales values for each month from January to June.
• Pie Chart: Sales by Region
  Shows sales distribution across North, South, East, and West regions.
• Table: Detailed Sales Data
  Displays all rows from the sample data for detailed view.

Dashboard Layout

+----------------------+----------------------+
|  Total Sales (KPI)   |  Total Profit (KPI)  |
+----------------------+----------------------+
|                      Bar Chart: Sales by Month                      |
+--------------------------------------------------------------------+
| Pie Chart: Sales by Region |          Table: Detailed Sales Data          |
+----------------------------+---------------------------------------------+
  

Interactivity

Adding a filter for Region will update:

• Total Sales and Total Profit KPI cards to show sums only for the selected region.
• Bar Chart to show sales by month only for the selected region.
• Pie Chart to highlight or adjust based on the filtered region.
• Table to display only rows matching the selected region.

This helps focus the dashboard on specific areas easily.

Self Check

If you add a filter for Region = South, which components update and what changes happen?

• KPI Cards: Total Sales becomes 1500 + 1800 = 3300; Total Profit becomes 300 + 450 = 750.
• Bar Chart: Shows sales only for February and June.
• Pie Chart: Highlights South region or shows 100% if filtered strictly.
• Table: Shows only rows for February and June.

Key Result

A simple dashboard showing total sales and profit KPIs, sales trends by month, sales distribution by region, and detailed sales data with interactive region filtering.

Practice

1. What is the main benefit of using a base component in Figma for Business Intelligence dashboards?

easy

A. It allows reusing design parts to save time and keep consistency.

B. It automatically generates data insights without manual input.

C. It creates new data sources for reports.

D. It replaces the need for calculated measures in reports.

Solution

1. Step 1: Understand base component purpose

   Base components are reusable design parts that help keep designs consistent.

2. Step 2: Connect to BI dashboard benefits

   Reusing parts saves time and ensures uniform look across reports.

3. Final Answer:

   It allows reusing design parts to save time and keep consistency. -> Option A

4. Quick Check:

   Base components = reuse + consistency [OK]

Hint: Think: base components save time by reusing parts [OK]

Common Mistakes:

• Confusing base components with data sources
• Thinking base components generate data
• Assuming base components replace calculations

2. Which syntax correctly describes creating an instance of a base component in Figma?

easy

A. Instance = BaseComponent.create()

B. Instance = BaseComponent.instantiate()

C. Instance = BaseComponent.clone()

D. Instance = new BaseComponent()

Solution

1. Step 1: Recall Figma instance creation method

   Figma uses instantiate() to create instances from base components.

2. Step 2: Compare options

   Only BaseComponent.instantiate() matches Figma's correct method.

3. Final Answer:

   Instance = BaseComponent.instantiate() -> Option B

4. Quick Check:

   Instance creation = instantiate() [OK]

Hint: Remember: 'instantiate' creates instances in Figma [OK]

Common Mistakes:

• Using 'new' keyword which is not Figma syntax
• Using 'create()' which is incorrect here
• Confusing 'clone()' with instance creation

3. Given a base component with a text label "Sales" and an instance where the label is overridden to "Revenue", what will happen if the base component's font size is changed from 12 to 14?

medium

A. The instance will break and lose all overrides.

B. The instance label font size remains 12 regardless of base changes.

C. The instance label text will revert to "Sales" automatically.

D. The instance label font size will update to 14 unless specifically overridden.

Solution

1. Step 1: Understand override behavior in instances

   Overrides apply only to changed properties; others inherit from base.

2. Step 2: Apply to font size change

   Since font size was not overridden, it updates to new base size 14.

3. Final Answer:

   The instance label font size will update to 14 unless specifically overridden. -> Option D

4. Quick Check:

   Overrides keep text but inherit font size [OK]

Hint: Overrides affect only changed properties; others update [OK]

Common Mistakes:

• Assuming all instance properties freeze after override
• Thinking text override resets on base change
• Believing instance breaks on base updates

4. You created a base component but when you update it, the instances do not reflect the changes. What is the most likely cause?

medium

A. Instances have local overrides blocking updates.

B. The base component was deleted accidentally.

C. You forgot to publish the updated base component.

D. Instances were created from a different base component.

Solution

1. Step 1: Check update propagation process

   In Figma, base component updates must be published to propagate to instances.

2. Step 2: Identify common mistake

   Not publishing changes is a frequent cause for instances not updating.

3. Final Answer:

   You forgot to publish the updated base component. -> Option C

4. Quick Check:

   Publish updates to sync instances [OK]

Hint: Always publish base updates to reflect in instances [OK]

Common Mistakes:

• Assuming local overrides block all updates
• Not checking if base component still exists
• Confusing base components with unrelated instances

5. You want to create a dashboard with multiple charts sharing the same style but different data. How should you use base components to achieve this efficiently?

hard

A. Create a base chart component with style, then create instances overriding only the data source.

B. Create separate full charts for each data set without base components.

C. Use base components only for text labels, not charts.

D. Duplicate charts manually and change styles individually.

Solution

1. Step 1: Identify reuse strategy for style and data

   Base components let you reuse style and override data per instance.

2. Step 2: Apply to dashboard charts

   Create one styled base chart, then override data source in each instance.

3. Final Answer:

   Create a base chart component with style, then create instances overriding only the data source. -> Option A

4. Quick Check:

   Base components reuse style, override data [OK]

Hint: Reuse style in base, override data per instance [OK]

Common Mistakes:

• Duplicating charts wastes time and breaks consistency
• Ignoring base components for complex visuals
• Overriding style instead of data in instances