Component instances in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer using Figma to create interactive reports.

📋 Request: Your manager wants you to create a consistent sales dashboard using reusable design elements to speed up updates and maintain style.

📊 Data: You have a set of design components like buttons, charts, and cards created as master components in Figma.

🎯 Deliverable: Create multiple instances of these components on the dashboard page, customize their content without changing the master, and organize them for easy updates.

Sample Data

Component Name	Type	Master Properties	Instance Customizations
Button Primary	Button	Color: Blue, Text: 'Click'	Text changed to 'View Report'
Sales Chart	Chart	Type: Bar, Colors: Green	Data filtered to Q1 Sales
Info Card	Card	Background: White, Border: Gray	Title changed to 'Total Revenue'

1

Step 1: Open Figma and locate the master components for Button Primary, Sales Chart, and Info Card.

Use the Assets panel to find and select each master component.

Expected Result

You see the master components ready to be used as instances.

2

Step 2: Drag instances of each master component onto your dashboard frame.

From the Assets panel, drag Button Primary, Sales Chart, and Info Card onto the canvas.

Expected Result

Three component instances appear on the dashboard.

3

Step 3: Customize the Button Primary instance text to 'View Report' without detaching it from the master.

Select the button instance, double-click the text, and type 'View Report'.

Expected Result

Button instance text updates to 'View Report' but remains linked to the master.

4

Step 4: Filter the Sales Chart instance data to show only Q1 sales.

Select the chart instance and apply the Q1 sales filter in the properties panel or linked data source.

Expected Result

Sales Chart instance displays only Q1 sales data.

5

Step 5: Change the Info Card instance title to 'Total Revenue' without altering the master card.

Select the Info Card instance, edit the title text to 'Total Revenue'.

Expected Result

Info Card instance shows 'Total Revenue' title, master remains unchanged.

6

Step 6: Organize all component instances neatly on the dashboard frame with consistent spacing.

Use Figma's alignment and distribution tools to space components evenly.

Expected Result

Dashboard looks clean and components are evenly spaced.

7

Step 7: Save your Figma file and share the dashboard link with your manager for review.

Click Share, set permissions, and copy the link.

Expected Result

Manager can view the dashboard with consistent component instances.

Final Result

┌───────────────────────────────┐
│        Sales Dashboard         │
├───────────────┬───────────────┤
│ [View Report] │  Sales Chart  │
│  (Button)     │  (Q1 Data)    │
├───────────────┴───────────────┤
│        Total Revenue (Card)    │
└───────────────────────────────┘

✓Using component instances keeps design consistent across the dashboard.

✓Customizing instances allows flexibility without breaking the master design.

✓Organized layout improves readability and user experience.

Bonus Challenge

Create a variant of the Button Primary component for a disabled state and use its instance on the dashboard.

Show Hint

Use Figma's Variants feature to add a 'Disabled' state with gray color and update the instance property.

Practice

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

easy

A. They create completely independent copies that do not update.

B. They allow you to reuse and customize design elements easily.

C. They automatically generate code for your design.

D. They replace the need for any design system.

Solution

1. Step 1: Understand what component instances do

   Component instances let you reuse design elements while allowing customization.

2. Step 2: Compare options to the definition

   The option 'They allow you to reuse and customize design elements easily.' correctly describes this benefit; others are incorrect or unrelated.

3. Final Answer:

   They allow you to reuse and customize design elements easily. -> Option B

4. Quick Check:

   Component instances = reuse + customize [OK]

Hint: Remember: instances = reusable + customizable elements [OK]

Common Mistakes:

• Thinking instances are independent copies
• Confusing instances with code generation
• Assuming instances replace design systems

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

easy

A. Use the 'Duplicate' option on the component.

B. Drag the component while holding the Option key.

C. Right-click the component and select 'Create Instance'.

D. Convert the component to a frame.

Solution

1. Step 1: Identify how to create an instance

   In Figma, you create an instance by right-clicking the component and choosing 'Create Instance'.

2. Step 2: Evaluate other options

   Dragging with Option key or duplicate creates independent copies, not instances; converting to frame is unrelated.

3. Final Answer:

   Right-click the component and select 'Create Instance'. -> Option C

4. Quick Check:

   Create instance = right-click + 'Create Instance' [OK]

Hint: Right-click component > Create Instance to reuse [OK]

Common Mistakes:

• Dragging with Option key instead of creating instance
• Using duplicate which breaks link to main component
• Confusing frames with components

3. Given a main component with a blue button, what happens if you change the button color in the main component?

medium

A. Instances change color only if manually updated.

B. Only the main component changes; instances keep the old color.

C. Instances are deleted automatically.

D. All instances of the button update to the new color automatically.

Solution

1. Step 1: Understand instance behavior on main component update

   Instances reflect changes made to their main component automatically.

2. Step 2: Analyze options

   All instances of the button update to the new color automatically. correctly states that all instances update color; others contradict Figma's behavior.

3. Final Answer:

   All instances of the button update to the new color automatically. -> Option D

4. Quick Check:

   Main component update = instance update [OK]

Hint: Change main component, all instances update automatically [OK]

Common Mistakes:

• Thinking instances stay unchanged after main update
• Believing manual update is needed for instances
• Assuming instances get deleted on main change

4. You created an instance but changes to the main component are not reflecting in the instance. What is the most likely cause?

medium

A. The instance was detached from the main component.

B. The main component was deleted.

C. The instance is locked on the canvas.

D. The instance is inside a hidden frame.

Solution

1. Step 1: Identify why instance doesn't update

   If an instance is detached, it loses connection to the main component and won't update.

2. Step 2: Evaluate other options

   Deleting main component removes it entirely; locking or hiding doesn't stop updates.

3. Final Answer:

   The instance was detached from the main component. -> Option A

4. Quick Check:

   Detached instance = no updates [OK]

Hint: Check if instance is detached to fix update issues [OK]

Common Mistakes:

• Assuming locking prevents updates
• Thinking hidden frames block updates
• Confusing deletion with update failure

5. You have a main component for a card with text and image. You want to create instances that have different text but keep the same image and style. How should you do this?

hard

A. Create instances and override the text content in each instance while keeping the image unchanged.

B. Duplicate the main component and edit text in each duplicate separately.

C. Detach instances and edit text and image freely.

D. Create separate components for each text variation.

Solution

1. Step 1: Understand instance overrides

   Instances allow overriding text while keeping other elements like images linked to the main component.

2. Step 2: Compare options

   Create instances and override the text content in each instance while keeping the image unchanged. uses overrides correctly; duplicating or detaching breaks consistency; separate components increase maintenance.

3. Final Answer:

   Create instances and override the text content in each instance while keeping the image unchanged. -> Option A

4. Quick Check:

   Instance overrides = customize text, keep style [OK]

Hint: Override text in instances, keep images linked [OK]

Common Mistakes:

• Duplicating instead of using instances
• Detaching instances losing updates
• Creating many components for small text changes