How to Detach Instance in Figma: Simple Steps Explained

To detach an instance in Figma, select the instance on your canvas and press Ctrl + Alt + B (Windows) or Cmd + Option + B (Mac). This breaks the link to the main component, allowing you to edit the instance freely.

Syntax

Detaching an instance in Figma uses a simple keyboard shortcut or menu option.

• Keyboard shortcut: Ctrl + Alt + B on Windows or Cmd + Option + B on Mac.
• Menu option: Right-click the instance and select Detach Instance from the context menu.

Detaching removes the connection between the instance and its main component, turning it into a regular group of layers.

text

Select instance → Press Ctrl + Alt + B (Windows) or Cmd + Option + B (Mac)

Output

Instance becomes a regular group, editable independently

Example

This example shows how to detach a button instance to customize its text and colors independently from the main button component.

text

1. Select the button instance on your Figma canvas.
2. Press <code>Ctrl + Alt + B</code> (Windows) or <code>Cmd + Option + B</code> (Mac).
3. The instance detaches and becomes a group.
4. Edit the text or colors freely without affecting the original component.

Output

The button instance is now a group; changes do not affect the main component.

Common Pitfalls

Some common mistakes when detaching instances include:

• Trying to edit the instance without detaching, which only changes that instance temporarily.
• Detaching by mistake and losing the ability to sync updates from the main component.
• Not realizing that detaching converts the instance into a group, so you lose component benefits like overrides and easy updates.

Always confirm you want to break the link before detaching.

text

Wrong way:
Select instance → Edit directly (changes may not persist or sync)

Right way:
Select instance → Detach instance → Edit freely

Quick Reference

Action	Shortcut (Windows)	Shortcut (Mac)	Menu Path
Detach Instance	Ctrl + Alt + B	Cmd + Option + B	Right-click → Detach Instance
Edit Instance Text	N/A	N/A	Double-click text layer after detaching
Revert to Component	N/A	N/A	Delete detached group and add new instance

Key Takeaways

Use Ctrl + Alt + B (Windows) or Cmd + Option + B (Mac) to detach an instance quickly.

Detaching breaks the link to the main component, allowing independent edits.

Be careful when detaching as you lose automatic updates from the main component.

You can also detach by right-clicking the instance and selecting 'Detach Instance'.

After detaching, the instance becomes a regular group editable like any other layers.