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.
Want to swap instances in bulk? Use the Swap libraries feature to replace local instances with components from another library. Swap libraries →
Note: Figma will try to preserve any overrides when you select a different variant, or swap between instances in the Instance menu. Learn more about override preservation →
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
- 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.
Swap instances of components from your keyboard using quick insert. Quick insert opens a Components modal where you can find and view components from enabled libraries.
The Components modal mirrors what you'd see in the Assets panel. You can keep the modal open while you explore layers in the Layers panel. Select or hover over a layer or instance to replace it with another component.
- Select the layer or instance you want to swap.
- Use the keyboard shortcut Shift I to open quick insert.
- Use the search field to find a specific component. Use your mouse or arrow keys to navigate to the relevant component.
- Use the and icons to switch between grid and list view.
- Select from Recent components used across your files, or select from an enabled library. If a library isn't showing up here, you'll need to enable the library first.
- Hold down ⌥ Option (Mac) or Ctrl (Windows). Press Enter to replace the component.
- Click or press Shift I to close quick insert menu.
Tip! You can keep the quick insert modal open and move it around within the file, allowing you to quickly assess components when editing files. It's not possible to minimize the modal.
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.