How to Swap Component Instance in Figma Quickly

To swap a component instance in Figma, select the instance on your canvas, then use the right sidebar's Instance section to click the component thumbnail and choose a new component from the dropdown. This replaces the instance while preserving any overrides like text or colors.

Syntax

In Figma, swapping a component instance involves these steps:

• Select the component instance on the canvas.
• Go to the Instance section in the right sidebar.
• Click the component thumbnail or name to open the component list.
• Choose the new component to swap with.

This action replaces the instance's base component but keeps any custom changes you made.

figma

Select instance → Right sidebar → Instance section → Click component thumbnail → Select new component

Example

This example shows how to swap a button component instance with another button variant:

text

1. Select the button instance on your Figma canvas.
2. In the right sidebar, find the <code>Instance</code> section.
3. Click the current button component thumbnail.
4. From the dropdown, select the alternate button variant.
5. The instance updates to the new button but keeps your text and color overrides.

Output

The button instance changes to the new variant while keeping your custom text and colors.

Common Pitfalls

Common mistakes when swapping component instances include:

• Trying to drag and drop components directly onto instances, which does not work.
• Not selecting the instance first, so the swap option is unavailable.
• Swapping to a component with incompatible properties, causing overrides to reset.
• Confusing swapping with detaching instances, which removes the link to the main component.

Always use the right sidebar's Instance section to swap components properly.

text

Wrong way:
- Dragging a component from assets onto an instance.

Right way:
- Select instance → Right sidebar → Click component thumbnail → Choose new component

Quick Reference

Action	Description
Select instance	Click the component instance on the canvas to activate swap options.
Open Instance section	Find the component thumbnail in the right sidebar.
Click component thumbnail	Shows a dropdown of available components to swap.
Choose new component	Select the desired component to replace the current instance.
Overrides preserved	Custom text, colors, and other overrides remain intact.

Key Takeaways

Select the component instance before swapping to access the swap options.

Use the right sidebar's Instance section to swap components safely.

Swapping keeps your custom overrides like text and colors intact.

Dragging components onto instances does not swap them; use the sidebar.

Avoid detaching instances if you want to keep the link to the main component.