Creating components in Figma - Practice Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Components in Figma

What is the main benefit of using components in Figma when designing dashboards?

A They convert your design into SQL queries for data extraction.

B They automatically generate data visualizations from raw data.

C They allow you to reuse design elements consistently across multiple pages.

D They create interactive filters for dashboard users.

💡 Hint

Think about how components help keep designs uniform and save time.

Components let you reuse the same design parts, so if you update one, all copies update too. This keeps dashboards consistent and easy to maintain.

❓ visualization

intermediate

Component Variants for Dashboard Filters

You want to create a filter button with two states: active and inactive. Which Figma feature helps you manage these states efficiently within one component?

A Use component variants to define active and inactive states.

B Apply different color styles without components.

C Use auto-layout to stack buttons vertically.

D Create two separate components and switch manually.

💡 Hint

Think about how to keep related states organized inside one component.

Variants let you group related component states, like active/inactive, making it easy to switch between them without duplicating components.

❓ data_modeling

advanced

Nested Components for Complex Dashboard Elements

You have a card component showing sales data. Inside it, you want to reuse a smaller component that displays a trend icon. What is the best practice to organize these components?

A Create the trend icon as a separate component and nest it inside the card component.

B Duplicate the trend icon design inside each card component instance.

C Flatten the trend icon into the card component to reduce layers.

D Use a text layer instead of a component for the trend icon.

💡 Hint

Think about reusability and easy updates for repeated elements.

Nesting components allows you to reuse smaller parts inside bigger ones. Updating the nested component updates all cards automatically.

🔧 Formula Fix

advanced

Fixing Component Overrides Not Updating

You created a component for a KPI card and used it multiple times. When you update the main component's font size, some instances do not reflect the change. What is the most likely cause?

A The main component was deleted accidentally.

B Some instances have local overrides on font size that block updates.

C You used different component names for each instance.

D The font size property is not supported in components.

💡 Hint

Overrides let you change instance properties but can block updates from the main component.

If you change a property like font size locally on an instance, it overrides the main component's setting and won't update automatically.

🎯 Scenario

expert

Designing a Scalable Component System for a BI Dashboard

You are tasked with designing a component system for a large BI dashboard with many charts, filters, and KPI cards. Which approach best ensures easy maintenance and scalability?

A Design each dashboard page as a single large component without nesting.

B Duplicate components for each page to avoid dependencies.

C Use only text and shapes without components to keep it simple.

D Create atomic components for basic elements, then compose them into complex components with variants.

💡 Hint

Think about building blocks and how small parts combine into bigger ones.

Atomic design breaks UI into small reusable parts. Combining them with variants creates flexible, maintainable components for complex dashboards.

Practice

1. What is the main benefit of using components in Figma?

easy

A. It removes all unused colors from your design.

B. You can reuse design parts easily across your project.

C. It converts your design into code instantly.

D. It automatically creates animations for your design.

Solution

1. Step 1: Understand the purpose of components

   Components are reusable design elements that help maintain consistency.

2. Step 2: Identify the main benefit

   Reusing parts saves time and keeps designs uniform.

3. Final Answer:

   You can reuse design parts easily across your project. -> Option B

4. Quick Check:

   Components = Reuse design parts easily [OK]

Hint: Components help reuse design parts fast [OK]

Common Mistakes:

• Thinking components create animations automatically
• Believing components convert designs to code
• Assuming components clean unused colors

2. Which of the following is the correct way to create a component in Figma?

easy

A. Drag layers into the assets panel without selection.

B. Select layers and press Ctrl + G to group them.

C. Right-click and choose 'Export' to create a component.

D. Select layers and press Ctrl + Alt + K to create a component.

Solution

1. Step 1: Recall the shortcut for creating components

   In Figma, Ctrl + Alt + K (Cmd + Option + K on Mac) creates a component from selected layers.

2. Step 2: Eliminate incorrect options

   Grouping (Ctrl + G) groups layers but does not create components; exporting saves files; dragging without selection won't create components.

3. Final Answer:

   Select layers and press Ctrl + Alt + K to create a component. -> Option D

4. Quick Check:

   Create component shortcut = Ctrl + Alt + K [OK]

Hint: Use Ctrl+Alt+K to create components quickly [OK]

Common Mistakes:

• Confusing grouping with component creation
• Trying to export instead of creating components
• Dragging layers without selecting them

3. If you edit the main component's color from blue to red, what happens to its instances?

medium

A. All instances update to red automatically.

B. Only new instances will be red; old ones stay blue.

C. Instances keep blue unless manually changed.

D. Instances get deleted and replaced with red shapes.

Solution

1. Step 1: Understand component-instance relationship

   Instances inherit properties from the main component unless overridden.

2. Step 2: Apply the color change effect

   Changing the main component's color updates all instances automatically to keep consistency.

3. Final Answer:

   All instances update to red automatically. -> Option A

4. Quick Check:

   Main component edit updates all instances [OK]

Hint: Edit main component to update all instances [OK]

Common Mistakes:

• Thinking old instances stay unchanged
• Believing instances must be manually updated
• Assuming instances get deleted on edit

4. You created a component but instances do not update after editing the main component. What is the likely issue?

medium

A. You forgot to save the file after editing.

B. You created a group instead of a component.

C. You edited an instance instead of the main component.

D. You used the wrong shortcut to create the component.

Solution

1. Step 1: Identify difference between main component and instance

   Only editing the main component updates all instances; editing an instance changes only that one.

2. Step 2: Diagnose why instances don't update

   If instances don't update, likely the main component was not edited but an instance was.

3. Final Answer:

   You edited an instance instead of the main component. -> Option C

4. Quick Check:

   Edit main component, not instance, to update all [OK]

Hint: Always edit main component, not instances [OK]

Common Mistakes:

• Editing instances expecting all to update
• Assuming saving file triggers updates
• Confusing groups with components

5. You want to create a button component with two states: normal and hover. How should you organize components in Figma for easy reuse and switching?

hard

A. Create a main button component and use variants for normal and hover states.

B. Create two separate components named 'Button Normal' and 'Button Hover' without linking.

C. Group two buttons in a frame and use that as a component.

D. Create instances of the button and manually change colors for hover.

Solution

1. Step 1: Understand component variants in Figma

   Variants allow multiple states inside one component for easy switching.

2. Step 2: Apply variants to button states

   Create a main button component with variants for normal and hover to reuse and switch states efficiently.

3. Final Answer:

   Create a main button component and use variants for normal and hover states. -> Option A

4. Quick Check:

   Use variants for multiple component states [OK]

Hint: Use variants to manage component states easily [OK]

Common Mistakes:

• Creating separate unlinked components for states
• Grouping buttons instead of using variants
• Manually changing instances for hover state