Base component architecture in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Base Components in BI Dashboards

In building BI dashboards, why is it important to use base components like buttons, filters, and charts as reusable elements?

A They ensure consistency and make updates easier across the dashboard.

B They increase the file size and slow down dashboard performance.

C They limit the customization options for each dashboard page.

D They make the dashboard harder to maintain and debug.

💡 Hint

Think about how changing one element affects the whole dashboard.

Base components allow you to keep a consistent look and feel. When you update a base component, all instances update automatically, saving time and reducing errors.

❓ data_modeling

intermediate

Component Hierarchy in BI Visualization

Which of the following best describes the correct hierarchy when designing base components for a BI dashboard?

A Dashboard pages contain atomic elements, and base components contain dashboard pages.

B Atomic elements contain dashboard pages, which contain base components.

C Dashboard pages contain base components, which contain dashboard pages.

D Base components contain atomic elements, and dashboard pages contain base components.

💡 Hint

Think about building blocks from smallest to largest.

Atomic elements are the smallest parts like buttons or icons. Base components group these atomic elements. Dashboard pages then use base components to build the full page.

❓ visualization

advanced

Best Practice for Responsive Base Components

You want your base components in a BI dashboard to adapt well on different screen sizes. Which approach is best?

A Use relative sizing and constraints so components resize and reposition automatically.

B Use fixed pixel sizes for all components to keep exact layout.

C Create separate base components for each screen size manually.

D Avoid resizing components and let users scroll horizontally.

💡 Hint

Think about how websites adjust on phones vs desktops.

Using relative sizing and constraints allows components to resize and reposition automatically, making dashboards responsive and user-friendly on all devices.

🔧 Formula Fix

advanced

Fixing a Broken Base Component Instance

You notice that when you update a base component, some instances on dashboard pages do not reflect the changes. What is the most likely cause?

A The dashboard pages are not linked to the data source.

B The base component was deleted accidentally.

C The instances were detached from the base component and are now independent.

D The base component uses fixed pixel sizes.

💡 Hint

Think about what happens if you copy and paste a component but break the link.

If instances are detached, they become independent copies and no longer update when the base component changes.

🎯 Scenario

expert

Designing a Scalable Base Component Architecture

You are tasked with designing a BI dashboard system that will grow over time with many pages and users. Which strategy best supports scalability and maintainability?

A Use only atomic elements without grouping to keep things simple.

B Build small, focused base components that can be combined and nested as needed.

C Avoid using base components and design each page independently for flexibility.

D Create a single large base component with all possible elements included.

💡 Hint

Think about how Lego blocks can be combined to build complex structures.

Small, focused base components can be reused and combined in many ways, making the system easier to maintain and scale as it grows.

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