Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Contact Us
  • Home
  • Figma Design – Figma Learn
  • Build design systems
  • Use libraries

Detach an instance from the component

Written by Figma Man

Updated at June 19th, 2025

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Administration – Figma Learn
    Manage files and projects Manage a team Manage your account Manage a Figma organization Manage Enterprise plan settings and permissions Billing Manage Figma in a school
  • Figma Design – Figma Learn
    Create prototypes Import and export Create designs Tour the interface Dev Mode Work together in files Build design systems Figma Draw
  • Get started – Figma Learn
    Set up your account Layers 101
  • FigJam – Figma Learn
    Import and export Run meetings Work on boards Tour the interface
  • Community – Figma Learn
    Explore the Community Creator tools and resources
  • Help – Figma Learn
    Troubleshoot Common questions Work with support
  • Work across Figma – Figma Learn
    Figma AI Work across Figma
  • Courses, tutorials, projects – Figma Learn
    Courses Projects
  • Figma Slides – Figma Learn
    Create and edit slides Present slide decks Tour the interface Import and export
  • Figma Buzz – Figma Learn
    Templates in Figma Buzz Create and edit assets in Figma Buzz Overview
  • Figma Make – Figma Learn
    Tour the interface Work with Figma Make
  • Figma Sites – Figma Learn
    Design a site Create webpages and breakpoints Make your site interactive Preview and publish a site Tour the interface
+ More

Table of Contents

Instance menu Right-click menu Keyboard shortcuts

Before you start

Who can use this feature

Available on any paid plan

Anyone with can edit access to a file can detach component instances

You can detach any instance from its main component. This is useful if you want to make changes to the component that aren't supported by overrides.

Or, if you want to create a variation of a component from your changes.

When you detach an instance, Figma will:

  • Make the instance a regular frame, while keeping the current layers and properties.
  • Remove the link to the original component.
  • No longer apply any changes made to the component, to that object.

Note: Figma Organizations can track how often instances are detached with Design System Analytics.

Instance menu

  1. Select the instance you wish to detach.
  2. Click on the instance menu in the Properties Panel.
  3. Select Detach instance from the menu.
    ui3-detach-instance-panel-menu.png

Right-click menu

  1. Right-click on the instance on the canvas or in the Layers Panel.
  2. Select Detach instance from the options: UI3-detach-instance-context-menu.png

Keyboard shortcuts

You can quickly detach instances using the keyboard shortcut:

  • Mac: ⌥ Option⌘ CommandB
  • Windows: ControlAltB

Tip: Accidentally created a component? You can turn this back into an instance.

This allows you to keep the object(s) you created, without having them as components.

  • If you just created the component you can undo it right away using the shortcut:
    • Mac: ⌘ CommandZ
    • Windows: ControlZ
  • If you want to revert something that's been a component for a while:
    1. Create an instance of the new component.
    2. Detach the instance from the component.
    3. Delete the original component.

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Start designing with UI kits
  • Get started with Apple's UI kit
  • Review and accept library updates
  • Create and insert component instances
  • Apply changes to instances
  • Blog
  • Best practices
  • QR code generator
  • Color wheel
  • Colors
  • Color picker
  • Color palettes
  • Color palette generator
  • Color contrast checker
  • Font Library
  • Templates
  • Developers
  • Integrations
  • Affiliate program
  • Resource library
  • Reports and insights
  • Support
  • Status
  • Legal and privacy
  • Modern slavery statement
  • Climate disclosure statement
  • COMPARE
  • Sketch
  • Adobe XD
  • Framer
  • Miro
  • COMPANY
  • Events
  • Customers
  • Careers
  • Newsroom
Expand