How to Use Component Instance in Figma: Simple Guide

In Figma, a component instance is a copy of a main component that you can place in your designs. You use it by dragging the component from the Assets panel or by copying an existing instance, allowing you to reuse and update designs easily while keeping consistency.

Syntax

To use a component instance in Figma, you follow this pattern:

• Main Component: The original design element you create and save as a component.
• Instance: A copy of the main component placed in your design.
• Assets Panel: Where you find and drag components to create instances.

Each instance inherits properties from the main component but can have some overrides like text or colors.

text

Main Component -> Drag from Assets Panel -> Instance in Design

Example

This example shows how to create and use a component instance in Figma:

1. Create a button design and convert it to a component (Right-click > Create Component).
2. Open the Assets panel on the left side.
3. Drag the button component from Assets onto your canvas to create an instance.
4. You can change the button text on the instance without affecting the main component.

text

1. Design a button rectangle with text.
2. Select both and right-click > Create Component.
3. Open Assets panel.
4. Drag the button component onto the canvas.
5. Select the instance and edit the text directly.

Output

You see the button instance on your canvas with editable text that does not change the original component.

Common Pitfalls

Common mistakes when using component instances include:

• Editing the main component instead of the instance when you want local changes.
• Trying to move or resize parts inside an instance that are locked by the main component.
• Not using instances and duplicating elements manually, which causes inconsistency.

Remember, to customize an instance, use overrides like text or color changes, but structural changes must be done on the main component.

text

Wrong: Editing instance structure directly (not allowed).
Right: Edit main component to change structure, then instances update automatically.

Quick Reference

Action	Description
Create Component	Select elements > Right-click > Create Component
Insert Instance	Drag component from Assets panel to canvas
Edit Instance Text	Select instance > Change text directly
Update Structure	Edit main component to affect all instances
Override Colors	Select instance > Change fill color locally

Key Takeaways

Use component instances to reuse design elements and keep consistency.

Drag components from the Assets panel to create instances easily.

Edit text and colors on instances without changing the main component.

Make structural changes only on the main component to update all instances.

Avoid duplicating elements manually to prevent design inconsistencies.