Swap between Components in a File

Who can use this feature?

đź”’Users on  StudentProfessional and Figma Organization Plans
👤Anyone with Can Edit permissions can insert Components into a File

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.

  1. Right-click on the Instance in the canvas.
  2. Hover over the Swap Instance option.
  3. 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 more in our Name and  Organize Components article.

Instance Menu

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:

  1. Select the Instance you want to replace.
  2. In the Properties Panel, click the field in the Instance section.

    <Image: Instance menu in the Properties Panel>

  3. Components are arranged in the Instance menu based on the File, Page and Frame they live in.
  4. 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*.*

    <Image: Annotated Instance menu in the Properties Panel>

    Learn more about Enabled Libraries in our  Enable and Disable Team Libraries article.

  5. 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.

  1. Open the Assets Panel and find the Component
  2. Hold down the modifier key:

    If the Component  is not nested within another Frame or Component

    • MacOS: Option
    • Windows: Alt

    If the Component  is nested within another Frame or Component

    • MacOS: Option-Command 
    • Windows: Alt + Control
  3. Drag the Component above the Instance you want to swap in the canvas.
  4. Release the mouse before releasing the modifier key. Otherwise, we will just add a new Component to the canvas.

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 Change  Instances with Overrides article.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.