How to Detach a Component in Figma — Unlinking Instances vs. Deleting
“I want to break this instance away from its component and edit it freely.” “How do I make something not a component anymore?” “What’s the difference between detaching and deleting?” — components can be confusing until you get used to them. The good news: detaching an instance from its component is a built-in Figma feature, so you can do it with a single right-click or keyboard shortcut, no plugin required.
This article walks through detaching an instance → how it differs from deleting → swapping and replacing without detaching → re-componentizing afterwards. At the end, there are tips for tidying up components migrated from Adobe XD.
The quickest entry point
Select the instance you want to detach and press Option + Command + B (Mac) / Ctrl + Alt + B (Windows) to unlink it from its main component. Right-click → “Detach instance” does the same thing. Once detached, it’s a regular frame you can edit however you like.
What you’ll learn
- How to detach an instance from its main component
- The difference between detaching and deleting
- When you don’t need to detach (swapping instances and replacing images)
- How to re-componentize after detaching
- Tips for tidying up components migrated from XD
🧩 Two things people mean by “detach a component”
It helps to separate two different actions that both get described as “detaching a component”:
- ① Detach an instance — break the link between a copy (instance) and its main component, turning that copy into an independent frame. This is the most common meaning, and the focus of this article.
- ② Delete the main component itself — remove the component definition entirely. That’s not “detaching,” it’s deleting, and it has a much wider impact (more on this below).
Mixing these up can lead to “I meant to detach it, but it disappeared” moments. Let’s start with detaching an instance.
✂️ Detach an instance from its component
To break an instance (a placed copy of a component) away from its main component, use any of the following:
- Right-click — select the instance on the canvas or in the Layers panel, then right-click → “Detach instance”.
- Shortcut — with the instance selected, press Option + Command + B (Mac) / Ctrl + Alt + B (Windows).
- Right panel — in the Instance section of the right sidebar, open the ”…” (three-dots) menu → “Detach instance”.
After detaching, the instance:
- Becomes a regular frame — its current layers and properties (any applied overrides) are kept as-is.
- Loses the link to the main component — changes made to the original component will no longer flow into this frame.
Detaching keeps the contents, just cuts the link
Detaching doesn’t erase the design or its layers. Only the connection to the component is removed, leaving you with a standalone frame — so you can rearrange its contents freely.
🗑️ Detaching vs. deleting
“Detach” and “delete” are completely different actions that are easy to confuse:
- Detach instance — unlink an instance from its main component. The visuals and layers stay, and the main component is untouched.
- Delete an instance — remove a single placed copy with the
Deletekey. The main component is unaffected. - Delete the main component — remove the component definition itself. This has a much wider impact, so be careful — if it’s shared in a team library, check where it’s used before deleting.
Deleting the main component deserves caution
“I deleted a component I thought was unused, but it was used on another page” is a common mishap. Before deleting a main component, make sure nothing references it. If you only want to break one copy away from the component, you want Detach instance, not delete.
🔁 When you don’t need to detach (swap & replace)
Even when you feel like detaching, depending on your goal it’s often better not to. If you can change the contents while keeping the component link, that’s usually easier to maintain.
- Swap instance — in the Instance section of the right panel, open the component-name dropdown to swap in a different component. If you want to replace a button or icon with a different kind of component, this beats detaching.
- Replace an image — select the image layer inside the instance and replace its fill image. You can change a photo or icon while keeping the component intact.
First ask whether swap or replace is enough
If you only need to change the contents a little, check whether “swap” or “replace image” gets you there before detaching. Once detached, updates from the main component no longer reach it — so keep the link when you can.
🔧 Re-componentize after detaching
After you’ve detached something and reworked it, you can turn it back into a component:
- Select the frame/layers and press Option + Command + K (Mac) / Ctrl + Alt + K (Windows).
- Or right-click → “Create component”.
The selection becomes a new main component, and from there you can place instances and reuse it. “Detach → edit → re-componentize” is a common way to build a new part based on an existing component.
🔄 Tidying up components migrated from XD
Files migrated from Adobe XD often need some component cleanup. XD symbols and Figma components work differently, so after migration it’s common to detach and rebuild, or re-componentize, certain elements.
- Right after migrating, it’s safer to figure out which elements are instances and which are main components before you start tidying.
- Use Detach instance to cut links you no longer need, and re-componentize the parts you want to reuse, to keep your library clean.
How XD symbols and states translate into Figma components — including how overrides and variants are handled — is covered in detail in the complete guide to migrating XD components and symbols to Figma (the “component migration guide” below). When choosing a migration method, picking one that preserves component structure keeps post-migration cleanup to a minimum.
💬 FAQ
Q: How do I make something not a component in Figma?
Select the instance you want to unlink and press Option + Command + B (Mac) / Ctrl + Alt + B (Windows), or right-click → “Detach instance”. Detaching cuts the link to the main component and turns the instance into a regular frame while keeping its current layers and properties.
Q: Will detaching delete my design?
No. Detaching only cuts the link to the component — the visuals and layers stay exactly as they are. The only change is that updates from the original component no longer apply.
Q: What’s the difference between detaching and deleting?
Detaching (Detach instance) unlinks an instance from its main component while keeping the contents. Deleting removes the instance — or the main component itself. Deleting the main component in particular has a wide impact, so check where it’s used first.
Q: Can I change the contents without detaching?
Yes. To replace it with a different component, use “Swap instance” from the Instance section of the right panel. To change only an image, replace the fill of the image layer inside the instance — both keep the component link intact.
Q: Can I turn it back into a component after detaching?
Yes. Select it and press Option + Command + K (Mac) / Ctrl + Alt + K (Windows), or right-click → “Create component”, to make it a new main component.
Q: I migrated from XD and components are hard to work with.
Because XD symbols and Figma components work differently, you may need to detach or re-componentize after migrating. Choosing a migration method that preserves component structure reduces the cleanup. See the component migration guide for details.
🎯 Wrap-up
Detaching a component is handled by the native Detach instance feature. The four key takeaways:
| # | Goal | Feature |
|---|---|---|
| 1 | Detach an instance | Right-click → Detach instance / Opt+Cmd+B · Ctrl+Alt+B |
| 2 | Detach vs. delete | Detach = cut the link / Delete = remove it |
| 3 | Change without detaching | Swap instance / replace image |
| 4 | Re-componentize | Opt+Cmd+K / Ctrl+Alt+K |
Detach an instance with Opt+Cmd+B / Ctrl+Alt+B, keep the link when you only need to swap or replace an image, and re-componentize once you’ve reworked it. Get this flow down and components stop being confusing. And if your file started life in Adobe XD, migrating while preserving component structure is the surest way to cut down on detaching and rebuilding later.
One-click install from Figma Community
Related pages
- The complete guide to migrating XD components and symbols to Figma — XD symbols → Figma components
- XD → Figma migration playbook — the full migration workflow
- How to bulk rename layers in Figma — tidy up layer names after detaching