Base component architecture in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a base component in Figma.

Figma

const BaseComponent = () => {
  return <div className=[1]>Base Component</div>;
};

Drag options to blanks, or click blank then click option'

Awrapper

Bcontainer

Cbase-style

Dcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic class names like 'container' or 'wrapper' instead of 'base-style'.

The base component should use the class base-style to apply the foundational styles.

2fill in blank

medium

Complete the code to extend the base component with additional styles.

Figma

const ExtendedComponent = () => {
  return <div className=[1]>Extended Component</div>;
};

Drag options to blanks, or click blank then click option'

Aextended-style

Bbase-style extended-style

Cbase-style

Dcomponent-style

Attempts:

3 left

💡 Hint

Common Mistakes

Using only 'extended-style' without the base styles.

The extended component combines base-style and extended-style to build upon the base styles.

3fill in blank

hard

Fix the error in the component to correctly apply the base styles.

Figma

const Component = () => {
  return <div className=[1]>Component</div>;
};

Drag options to blanks, or click blank then click option'

Abase-style

BbaseStyle

CBaseStyle

Dbase_style

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase or underscores instead of hyphenated lowercase.

CSS class names should use hyphenated lowercase format like base-style to match the CSS definition.

4fill in blank

hard

Fill both blanks to create a reusable base component with props.

Figma

const BaseComponent = ({ children, className }) => {
  return <div className=[1] + ' ' + [2]>{children}</div>;
};

Drag options to blanks, or click blank then click option'

A'base-style'

BclassName

C'extended-style'

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'children' or 'extended-style' in the className concatenation.

The base component uses the fixed class 'base-style' combined with the dynamic className prop for flexibility.

5fill in blank

hard

Fill all three blanks to create a styled base component with conditional class names.

Figma

const BaseComponent = ({ isActive, children }) => {
  const baseClass = [1];
  const activeClass = isActive ? [2] : '';
  return <div className={`${baseClass} ${activeClass} [3]`}>{children}</div>;
};

Drag options to blanks, or click blank then click option'

A'base-style'

B'active-style'

C'custom-style'

D'inactive-style'

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up active and inactive class names or missing the custom style.

The base class is 'base-style', the active class is 'active-style' when isActive is true, and 'custom-style' is added for extra styling.

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