Component instances in Figma - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a component instance in Figma?

A component instance is a copy of a main component that inherits its properties but can have some overrides like text or colors. It helps keep designs consistent and easy to update.

beginner

How do changes to the main component affect its instances?

When you update the main component, all its instances update automatically unless you have overridden specific properties in the instances.

beginner

Can you customize a component instance without affecting the main component?

Yes, you can override properties like text, colors, or visibility in an instance without changing the main component.

beginner

Why use component instances instead of duplicating frames in Figma?

Using instances keeps your design consistent and easier to update. If you duplicate frames, changes must be made manually in each copy.

intermediate

What happens if you detach an instance from its main component?

Detaching an instance breaks its link to the main component, turning it into a regular frame that no longer updates with the main component.

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

A They are completely independent copies

B They allow unlimited color changes without restrictions

C They update automatically when the main component changes

D They cannot be customized

Component instances update automatically when the main component changes, ensuring consistency.

If you override text in a component instance, what happens when the main component's text changes?

A The instance text changes to the main component's text

B The instance text stays as the override

C The instance is deleted

D The main component text is locked

Overrides in instances stay as they are, so text changes in the main component do not affect overridden text.

What does detaching an instance do?

A Links it to another main component

B Creates a new main component

C Deletes the instance

D Turns it into a regular frame with no link to the main component

Detaching breaks the link to the main component, making the instance a normal frame.

Which of these can you NOT do with a component instance?

A Add new layers inside the instance

B Change colors

C Override text

D Resize the instance

You cannot add new layers inside an instance; you can only override existing properties.

Why is it better to use instances instead of duplicating components?

A Instances automatically update with the main component

B Instances are smaller files

C Duplicated components are faster to edit

D Instances cannot be customized

Instances keep your design consistent by updating automatically when the main component changes.

Explain what a component instance is and how it helps in design consistency.

Think about copies that stay linked to the original but can look a bit different.

Describe what happens when you detach a component instance and why you might want to do it.

Consider when you want to make a unique change that should not update anymore.

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