Component instances in Figma - Step-by-Step Guide

Introduction

Component instances let you reuse a design element many times without copying it. When you change the main component, all instances update automatically. This saves time and keeps your design consistent.

When you want to use the same button style on many pages but keep them linked

When you need to update a logo across multiple screens quickly

When creating repeated elements like icons or cards that share the same look

When you want to try different text or colors on a shared design without changing the original

When collaborating with a team to keep design elements uniform

Steps

Step 1: Open the Assets panel

- Left sidebar in Figma

You see a list of components available in your file

💡 If you don’t see Assets, click the left sidebar toggle

Step 2: Drag a component from the Assets panel onto the canvas

- Assets panel

An instance of the component appears on the canvas

Step 3: Select the instance on the canvas

- Canvas area

The right sidebar shows Instance properties

💡 You can override text or colors here without breaking the link to the main component

Step 4: Edit the main component

- Select the main component in the Assets panel or on the canvas and enter Edit mode

All instances update automatically with your changes

Step 5: Right-click the instance and choose Detach instance

- Instance on the canvas

The instance becomes a regular group of layers, no longer linked to the main component

Before vs After

Before

Canvas has no repeated elements; each button is separate and must be edited individually

After

Canvas has multiple instances of the same button component; editing the main button updates all instances

Settings Reference

Instance overrides

📍 Right sidebar when an instance is selected

Allows customizing each instance without changing the main component

Default: No overrides

Detach instance

📍 Right-click menu on an instance

Breaks the link to the main component to edit freely

Default: Linked instance

Swap instance

📍 Right sidebar under Instance section

Change the component used by the instance without deleting it

Default: Current component

Common Mistakes

Editing an instance directly expecting all instances to update

Changes to an instance only affect that instance, not the main component or others

Edit the main component to update all instances at once

Detaching instances too early

Detaching breaks the link and loses automatic updates

Only detach when you need to make unique changes that should not update globally

Summary

Component instances let you reuse and update design elements easily across your file

You can customize each instance without changing the main component using overrides

Editing the main component updates all linked instances automatically

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