When building interfaces, we often switch between different icons. Or, Components that represent different states.
To speed up the process, you can swap one Instance for another. There are a few ways you replace or swap instances in Figma.
Swap Related Components
Switch between Related Components using the Right-click menu.
- Right-click on the Instance in the canvas.
- Hover over the Swap Instance option.
- Select the Instance from the list of Related Components.
We determine Related Components by Name and Location.
- Components using the slash naming structure. e.g. We treat UI/Button/Active, UI/Button/Hover and UI/Button/Inactive as Related Components
- We treat Components in the same file / page / frame structure as Related Components
Learn how to name and organize Components.
The Instance menu allows you to find replacements from any of your Component libraries.
We order Components in the Instance menu based on the file/page and Frame they live in. You can use the menu to find Components nested within files, pages and frames.
To swap an Instance using the Instance menu:
Select the Instance you want to replace.
In the Properties Panel, click the field in the Instance section:
Components are arranged in the Instance menu based on the file, page and frame they live in.
You can use the menu to navigate through Components nested within files, pages and frames.
- Select a Component from the Related Components section.
- Use the explorer to select a Component from This file.
- Find a Component from any of your Enabled Libraries.
Learn how to Enable and Disable Team Libraries.
Select to swap the current selection with an Instance of that Component:
Swap Instances from the Assets Panel
The Assets Panel in the left sidebar allows you to search for Components to add to your file(s). You can find Components from any Libraries you have access to.
You can drag Components from the Assets Panel into an existing design.
If you use a modifier key when dragging, you can replace an existing Instance with the one from the Assets Panel.
Open the Assets Panel and find the Component
Hold down the modifier key:
If the Component is not nested within another frame or component
- Mac: Option
- Windows: Alt
If the Component is nested within another Frame or Component
- Mac: Option - Command
- Windows: Alt + Control
Drag the Component above the Instance you want to swap in the canvas.
Release the mouse before releasing the modifier key. Otherwise, we will just add a new Component to the canvas.
Note: Have overrides applied? Figma only preserves Text overrides. To preserve Text overrides, you will need to change the name of any text layer(s) so they're unique.
If you swap a Component with other overrides applied, we won't apply these to the new Component. Learn more about Overrides in our Override Properties of a Component Instance article.