Components let you create and reuse elements of your designs to speed up the process and keep things consistent.
When building interfaces, we often switch between instances of these components for objects like icons, buttons, and cards.
The Instance menu lets you quickly search, preview, and swap one component for another. There are a few ways you replace or swap instances in Figma.
The Instance menu allows you to find component replacements from the current file and any of your enabled team libraries.
Access the Instance menu from the properties panel in the right sidebar, when you have a component selected.
Figma orders components in the Instance menu based on the component's Name and Location.
Related components are components that share the same hierarchy. This includes components in the same file, page, and frame.
For example: you can have a file containing your app's UI design system, a page for each operating system, and frames within each page where your components are grouped by type.
Figma also groups related components organized using the slash naming structure.
For example: Figma considers
UI/Button/Inactiveas related components.
To swap an instance using the Instance menu:
- Select the instance you want to replace. Figma will display the name of the component in the Instance section of the right sidebar.
- Click the name of the component to open the Instance menu.
- Use the menu to navigate through components:
- Select from the group of related components for your selection.
- Use the field to search a component by name.
- Click to switch between enabled libraries.
- Click to navigate to a different group of components.
- Use the and to switch between grid and list view.
- Select an instance to replace the current selection.
The Assets panel in the left sidebar allows you to search for components to add to your file. You can find components from any libraries you have access to.
You can drag a component onto the canvas to create an instance of that component. If you use the modifier key while dragging a component from the Assets panel, you can replace the existing component.
Open the Assets panel and find the component.
Hold down the modifier key:
If the component isn't 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, then release the modifier key. If you release the modifier key first, Figma will only add the new component, not replace.
You can also use the right-click menu to switch between related components. This will only allow you to select components in the same frame or hierarchy.
- Right-click on the instance in the canvas.
- Hover over the Swap Instance option.
- Select an instance from the list of related components.