The production question
Halfway through building the Cloud Recovery dashboard, a button instance on one screen needs to look slightly different from every other button in the file — a different corner treatment, an extra bit of padding, a color that doesn't exist as a state yet. You have three real options: override the instance, add a variant or property to the main component, or detach it and hand-edit the layer. Picking wrong doesn't break anything today. It breaks quietly three weeks later, when someone edits the main component and this one button doesn't move, or when a teammate finds a value in the file nobody can explain. The actual decision isn't “does this look right” — it's “does this instance still belong to the system, or has it quietly become its own thing that just happens to resemble the rest?”
How to decide
- Ask whether the change is to content (this instance's label, which icon it uses, which state it's in) or to structure (padding, radius, layout — a rule that should hold everywhere). Content differences are what overrides and properties exist for.
- If it's content and a property already exists for it, set it on the instance and stop there. Detaching to make a change the component already supports just throws away the update path for nothing.
- If it's structural and should be true for every instance, make the edit on the main component, not the instance. A button's radius shouldn't get fixed one screen at a time.
- If it's structural but feels like a one-off, ask whether it's actually a missing variant or property before touching anything. A ‘Critical’ badge that doesn't exist yet is a gap in the component's API, not a reason to detach.
- Only detach when the honest answer to that question is ‘no, this instance has genuinely left the system’ — a one-time exploration, static marketing art, something that will never receive an update. Detaching is a decision to stop maintaining that instance, not a shortcut around an inconvenient gap.
- Before moving on, test the main component: open it, make one real edit — padding, radius, or default copy — and confirm every instance you expect to update actually does. Anything that doesn't move is either detached or overriding something it shouldn't be.
Correct vs. incorrect
The recovery interface's button main component exposes label as a text property and leading icon as a Boolean. On the “Recovery review” screen, the primary button needs to read “Confirm and start recovery” instead of the default “Continue” — set through the text property, nothing else touched. Two weeks later the team decides every primary button needs more horizontal padding for touch targets. That edit happens once, on the main component. Every instance in the dashboard, including the recovery-review button with its custom label, picks up the new padding automatically, because the label override never disconnected the instance from the rest of the component.
A designer placing the status badge on a workload card needs a “Critical” state that doesn't exist yet — only default, warning, and error variants were built. Instead of adding a fourth variant, they detach the instance on that one card and hand-paint it a red that isn't in the palette. It ships. Three weeks later the team runs an accessibility pass and fixes the error-red contrast ratio by updating the main component. Every badge in the file updates except this one, because it's no longer an instance — it's a plain shape wearing the badge's old look, and nothing in the properties panel will tell anyone it's there.
Practice it, then try to break it
Build one status-badge main component (colored dot plus label) and place six instances across a mock screen. Override only the label text on three of them. Detach one and manually recolor its dot to a shade outside your palette. Leave two completely untouched. Now open the main component and change its corner radius. Count how many of the six instances updated — it should be five. Write one sentence explaining why the sixth didn't, and what that instance will cost the system three months from now.
Stress test: Take your button's instance-swap icon property and replace the default icon with one that has a visibly different aspect ratio — tall and narrow instead of square. Drop that swapped instance next to a dozen ordinary ones on a busy screen. If the odd icon throws off the button's alignment, padding, or label spacing instead of just swapping cleanly into the same slot, the component's internal layout is bound to the specific icon shape rather than genuinely flexible — the instance-swap property is cosmetic, not structural.
Common mistakes
- Detaching to make a text or icon change that an exposed property already covers, losing the update path for no reason.
- Building a separate ‘Button Disabled’ component instead of a disabled state variant, so a padding fix now has to be applied in two places instead of one.
- Leaving an optional element like a leading icon with no Boolean property, which forces every instance owner who wants to hide it to detach instead.
- Making the same visual fix by hand on five different instances instead of noticing the pattern and editing the main component once.
Accessibility and handoff
A detached instance carries none of the main component's name, properties, or update history forward, so a developer inspecting it sees an anonymous layer instead of a reference to the reusable button, badge, or input the rest of the interface already uses — they either rebuild it as one-off code or silently diverge from the design system without knowing it.
FAQ
- If I override text or swap an icon on an instance, does that count as detaching?
- No. Overrides are the intended way to customize an instance and it stays connected to the main component; detaching specifically severs that connection and turns the instance into an independent set of layers.
- What happens to my overrides when I update the main component?
- Figma preserves the properties you've deliberately changed, like a custom label, while still applying structural updates from the main component, like new padding or radius — that combination is exactly the propagation the system is built to give you.
- I keep detaching the same kind of instance for the same reason. What does that mean?
- It means the component is missing a variant or property for a case that isn't actually rare. Treat repeated detaching as a signal to add the missing option to the main component, not as a normal workflow to accept.
- How can I tell which instances in a file have already been detached?
- A detached layer no longer shows the instance's link-back indicator or appears in the component's list of instances, and its layer icon changes from the instance diamond to an ordinary frame or group icon — that's the tell during a file audit.
Take this skill into a connected project.
The full Mission 3 lesson includes guided steps, a timer, quiz, pass criteria, and saved progress.