Base component architecture in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer using Figma to create reusable components.

📋 Request: Your manager wants a clean, consistent dashboard design that can be easily updated and scaled. They ask you to build a base component architecture in Figma for common dashboard elements.

📊 Data: You have a list of common dashboard elements: cards, buttons, charts, filters, and headers. Each element needs to be designed as a base component with variants for different states (e.g., active, disabled).

🎯 Deliverable: Create a Figma file with base components for cards, buttons, charts, filters, and headers. Include variants for each component to handle different states and sizes. Organize components in a clear structure for easy reuse.

Sample Data

Component	Variant	Description
Card	Default	Standard card with title and content area
Card	Selected	Card with highlighted border
Button	Primary	Blue button for main actions
Button	Disabled	Greyed out button, not clickable
Chart	Bar	Bar chart placeholder with axis
Chart	Line	Line chart placeholder with axis
Filter	Dropdown	Dropdown filter with label
Filter	Checkbox	Checkbox filter option
Header	Title	Dashboard title header
Header	Subtitle	Smaller subtitle text

1

Step 1: Create a new Figma file and set up pages for components and documentation.

Open Figma, create a new file named 'Dashboard Base Components'. Add two pages: 'Components' and 'Documentation'.

Expected Result

A clean Figma file with two pages ready for component creation.

2

Step 2: Design the base Card component with default and selected variants.

Draw a rectangle 300x200 px with a title text at top and content area. Create a variant with a highlighted border for 'Selected' state.

Expected Result

A Card component with two variants: Default (normal border) and Selected (highlighted border).

3

Step 3: Design the base Button component with primary and disabled variants.

Create a button shape 120x40 px with text 'Primary'. Create variants: Primary (blue background) and Disabled (grey background, no interaction).

Expected Result

Button component with two variants showing active and disabled states.

4

Step 4: Create Chart components with bar and line chart variants.

Design placeholders for bar and line charts with axes and labels. Create variants named 'Bar' and 'Line'.

Expected Result

Chart component with two variants representing bar and line charts.

5

Step 5: Build Filter components with dropdown and checkbox variants.

Design a dropdown filter with label and a checkbox filter option. Create variants 'Dropdown' and 'Checkbox'.

Expected Result

Filter component with two variants for different filter types.

6

Step 6: Create Header components with title and subtitle variants.

Design text styles for dashboard title and subtitle. Create variants 'Title' and 'Subtitle'.

Expected Result

Header component with two text style variants for consistent headings.

7

Step 7: Organize all components into a clear structure with naming conventions.

Group components by type (Card, Button, Chart, Filter, Header). Use variant naming for states and sizes. Add descriptions in Documentation page.

Expected Result

Well-organized components easy to find and reuse with clear variant names.

8

Step 8: Test component reuse by building a sample dashboard layout using the base components.

Drag instances of Card, Button, Chart, Filter, and Header components onto a new frame. Arrange them to simulate a dashboard.

Expected Result

A sample dashboard layout demonstrating consistent design and easy updates via base components.

Final Result

Header: Title

↓

Filter: Dropdown

↓

Card: Selected

↓

Chart: Bar

↓

Button: Primary

✓Base components with variants ensure consistent design across dashboards.

✓Organized components speed up dashboard creation and updates.

✓Using variants reduces duplication and errors in design.

✓Sample dashboard layout shows how components fit together seamlessly.

Bonus Challenge

Add responsive variants to the Card and Button components for mobile and desktop sizes.

Show Hint

Create new variants with different widths and heights. Use Figma's auto-layout to adapt content inside components.

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