Creating components in Figma - Business Scenario Walkthrough

Scenario Mode

👤 Your Role: You are a BI designer working on a sales dashboard

📋 Request: Your manager wants you to create reusable visual components in Figma to speed up dashboard design

📊 Data: You have sample sales charts and KPI cards designed in Figma

🎯 Deliverable: Create components for KPI cards and sales charts that can be reused and updated easily

Sample Data

Component Name	Type	Description
Sales KPI Card	Card	Shows total sales, sales growth, and target
Monthly Sales Chart	Chart	Line chart showing sales over months
Region Filter	Dropdown	Filter data by sales region
Product Filter	Dropdown	Filter data by product category

1

Step 1: Select the Sales KPI Card design in Figma

Right-click the selected frame and choose 'Create Component' or press Ctrl+Alt+K (Cmd+Option+K on Mac)

Expected Result

Sales KPI Card becomes a reusable component with a purple outline

2

Step 2: Select the Monthly Sales Chart design

Create a component using the same method: right-click and 'Create Component'

Expected Result

Monthly Sales Chart is now a reusable component

3

Step 3: Create components for Region Filter and Product Filter dropdowns

Select each dropdown and create components individually

Expected Result

Both filters become reusable components

4

Step 4: Organize all components into a new page named 'Components Library'

Drag components to the new page and arrange them neatly

Expected Result

All components are stored in one place for easy access

5

Step 5: Use instances of the Sales KPI Card component on a new dashboard page

Drag component from Assets panel onto the dashboard frame

Expected Result

Multiple KPI cards appear as instances linked to the main component

6

Step 6: Edit the main Sales KPI Card component to update the color scheme

Change fill color in the main component; observe changes in all instances

Expected Result

All KPI card instances update automatically with new colors

Final Result

Sales KPI Card

↓

Monthly Sales Chart

↓

Region Filter

↓

Product Filter

✓Creating components saves time by reusing designs

✓Editing the main component updates all instances automatically

✓Organizing components in a library page improves workflow

Bonus Challenge

Create variants of the Sales KPI Card component for different sales regions with color coding

Show Hint

Use Figma's Variants feature to group related components and add properties for region

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