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.