Breaking the Link: Detaching Figma Instances

WHY IT EXISTS Design systems thrive on consistency, which components enforce. But sometimes, a design requires a one-off variation so different that simple overrides aren't enough. Detaching provides a controlled way to break that consistency for a specific element without having to rebuild it from scratch.

THE MENTAL MODEL Think of a main component as a recipe and its instances as cakes baked from it. Detaching an instance is like taking one of those cakes and saying, "I'm going to add a completely new layer and different frosting." It's no longer following the original recipe and won't change if you update that recipe later. It is now its own unique creation.

HOW IT WORKS When you detach an instance, Figma converts it into a regular frame. It preserves all the layers, styling, and any overrides you had applied up to that point. The crucial change is that the link to the main component is severed. Any future updates to the main component will not propagate to the detached object. You can detach via the right-click menu, the instance menu in the properties panel, or with the keyboard shortcut (Option-Command-B on Mac, Ctrl-Alt-B on Windows).

WHEN TO USE IT Use detaching sparingly for two main reasons. First, when you need to make fundamental structural changes to an instance that are not supported by the component's defined properties, like reordering internal layers or adding unique new elements. Second, when you want to create a new, distinct component based on an existing instance's design. You detach it, make your modifications, and then turn the resulting frame into a new main component.

WHEN NOT TO USE IT Avoid detaching for simple cosmetic changes that could be handled with overrides, like changing text content or colors. Overusing detach leads to design system decay, where your file is full of one-off elements that are difficult to maintain and update. This creates inconsistencies and defeats the purpose of using a component library.

ONE CANONICAL EXAMPLE A designer uses a standard "User Profile" card component. For a special "Admin" view, they need to add a "Permissions Level" badge inside the card, a structural change not supported by overrides. They select the instance of the card, detach it, add the new badge element, and can then either use it as a one-off frame or create a new "Admin Card" component from it.