html
Deleting something in Figma is one keystroke. The tricky part is being sure the thing you clicked is the main component and not an instance of it, or one variant pulled out of a set, or a component quietly sitting inside another component. On the canvas they look almost identical.
Figma’s own documentation lists Option+Command+B as the shortcut for detaching an instance, which is a completely different action from pressing Delete on a main component (Figma Help Center). And whether the component is local to your file or published through a team library changes what the removal actually does downstream.
What Is a Component in Figma
One master definition, plus copies that keep pointing back at it. Edit the master and every copy updates. That link is the entire value proposition, and it’s the thing a plain shape, group, or frame never gives you once it lands on the canvas.
UX Tools surveyed 2,220 designers for its 2024 Design Tools Survey and put Figma at an 82.3 percent share of UI design tool usage. Which is a roundabout way of saying that decisions about component structure inside Figma end up shaping how a large slice of product design work gets done.
Before you remove anything, know what the file is actually holding. The component itself sits in the Layers panel and shows up in the Assets panel once you create it. Every copy on the canvas stays tethered to that original, and killing the original cuts all of those tethers at once.
Naming conventions matter more than they sound like they should. A crowded Assets panel is miserable to search through, and you notice that most when you’re hunting for one specific thing to delete. Anyone still getting oriented should look at how components function across a shared design system before deciding what stays.
Write something in the component description field, too. A teammate opening the file in two months has no idea why a component exists unless someone bothered to say so. That’s the same category of housekeeping as the component organization habits that make a library prunable in the first place.
Component, Instance, and Variant – How They Differ
The main component is the source. An instance is a linked copy of it. A variant is a single state grouped inside a set, and a nested component is just a component that happens to live inside another one.
Delete a variant and you lose that one state. Delete the component set and every variant inside it goes at the same time. Delete the main component and every instance connected to it breaks, no matter which page it’s sitting on.
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →Forrester’s commissioned study found teams designing up to 60 percent faster once shared component libraries and instance syncing were running (Forrester, 2023), and a separate Forrester study credited Dev Mode with a further $10 million in developer efficiency gains over three years (Forrester, 2025). All of that speed comes from the main-component-to-instance link. A deletion severs exactly that. It’s a heavier decision than the one keystroke makes it feel.
| Element | Definition | Deletable Directly | Effect When Deleted |
|---|---|---|---|
| Main component | Source definition of the design | Yes | Breaks every linked instance |
| Instance | Linked copy placed on canvas | Yes, without affecting others | Removes only that copy |
| Variant | One state inside a component set | Yes, within its set | Removes that state only |
| Nested component | Component placed inside another component | Only from within the parent | Alters every instance of the parent |
Main Component, Instance, and Variant
Every default lives in the main component. Fill, text, spacing, and any component properties you’ve set up, like boolean toggles or text swaps.
An instance inherits all of that and can carry its own overrides on top. A different label, a swapped icon, whatever, and the connection back to the source survives it. Those toggles and swaps get edited in the component properties panel, which is where people usually go looking after they’ve already tried right-clicking three other things.
Variants group related states under one name in the Assets panel. A button’s default, hover, and disabled looks, for instance.
Going through the standard component editing workflow changes the main definition, and that change ripples out to every instance on its own. Building states as variants inside a component set keeps the options together instead of scattered across a dozen unrelated components.
Component Set and Nested Component
The component set is the parent container. Delete it and every variant plus every property attached to those variants disappears in one action.
Nesting is when a component gets dropped inside another component’s boundaries. A card containing a button component, or an icon component sitting in as a child layer. Common pattern, and it builds a dependency chain that behaves asymmetrically.
- Delete the parent card component and every instance of the card breaks, button included
- Delete only the nested button component and the button portion inside each card instance breaks, while the card frame itself stays fine
What Happens to Instances When You Delete a Main Component
The instance doesn’t vanish. It sits right where you left it on the canvas, looking exactly the same.
What changes is the wiring behind it. The instance keeps rendering because it never needed the source to display. Right-click it, choose Go to main component, and you get an error, since there’s nothing to go to anymore. And it stops receiving updates forever, because nothing exists to push them.
Overrides you already applied stay put. A swapped icon, a custom label, all of it survives. Those only ever needed the main component to exist at the moment you made them.
Pull a component out of a shared library while instances are still scattered across other files and you get what people tend to call a ghost component. A leftover copy pointing at nothing. Teams that run cleanup sprints regularly catch these fast, mostly because a broken instance announces itself the next time anyone opens the file.
What Is the Difference Between Deleting and Detaching a Component
Delete pulls the main component out of the file. Detach cuts one instance loose and turns it into an ordinary layer while the main component carries on untouched. Two operations, two problems, and confusing them is far and away the most common mistake in component cleanup.
Detach Instance works on one instance at a time. It converts that instance into a plain frame, keeping the layers and properties exactly as they looked a second before. From there you can style it however you want, well past what overrides normally permit, without touching the source or any sibling instance.
Figma’s documentation notes that Organizations plan teams can track detach frequency through Design System Analytics, which surfaces how often people are breaking instances away from the library. Useful signal, honestly. High detach rates usually mean the component isn’t flexible enough.
Deleting takes the component out of the Assets panel and breaks every connected instance, which is what you want when nobody’s using it anymore. Detaching leaves you one editable standalone layer and touches nothing else, which is what you want when you’re testing a one-off variation.
Once an instance is detached it’s just a frame, which puts you in the same territory as building a frame from scratch in Figma.
How to Delete a Component in Figma
The full sequence, including the library step people forget:
- Select the main component on the canvas, or find it in the Layers panel where it carries a distinct purple icon
- Right-click and choose Delete, or press the Delete key (Backspace on Windows)
- Open the Assets panel and confirm it’s gone from local components
- If the component belongs to a published team library, publish the removal so it reaches every file using that library
All of it is reversible in the moment. Ctrl+Z, or Cmd+Z on Mac, brings the component straight back. The wider mechanics of undoing changes in Figma cover the cases that go beyond a simple delete.
Every shortcut mentioned here also lives in Figma’s full keyboard shortcut reference. Worth bookmarking if file cleanup is a recurring part of your week.
Step one is where things go wrong. A component and a frame can look identical on the canvas, and the Layers panel icon is the only thing that separates them at a glance.
How to Delete a Single Variant Without Deleting the Component Set
Figma lets you pull one variant out of a set and leave everything else alone.
Deleting a Single Variant
Click the variant tile you want gone, inside the component set’s boundary, then press Delete. The remaining variants stay grouped under the same set name in the Assets panel. Any instance that was swapped to use the removed variant behaves the same way a broken instance does after a full component deletion.
The set survives this. Only the targeted state goes.
Deleting the Entire Component Set
Select the outer frame holding all the variants, not one tile inside it, then delete. Every variant, every property, and every override rule attached to the set goes at once.
In the Layers panel it comes down to which row is highlighted. The parent row means the whole set. A child row means that one variant.
How to Remove a Component from a Team Library
Two separate actions here, and skipping the second one is why removals seem to not stick. First you delete or hide the component locally. Then you publish that change so it propagates to every connected file.
A component is either local, existing in one file only, or remote, meaning it’s been published and pulled into other files through the library.
There’s a shortcut for the local step in Figma’s documentation. Put a period at the start of the component’s name in the Layers panel and it quietly drops out of Team library visibility once published. Handy for deprecating something without deleting it outright.
The standard route runs in order:
- Delete the component in its source file, or right-click it in the Assets panel and choose Hide when publishing
- Open the Publish dialog, where the removal appears among the pending changes
- Click Publish to send the removal to every file subscribed to that library
- Read the warning Figma shows first, which names the files currently using that component
Publishing library changes requires a paid team. Shared libraries sit behind Figma’s paid plan tiers rather than the free Starter plan.
Figma’s S-1 filing disclosed more than 13 million monthly active users as of March 2025 (Figma S-1, 2025). At that scale a single unpublished removal can ripple into files nobody on your team even has access to.
Which is why larger teams running a full design system built in Figma tend to put one person in charge of library publishing. Not for ceremony. Just to stop accidental removals from going out.
How to Find and Bulk Delete Unused Components
Bulk deletion is mechanically identical to deleting one component, only applied to a multi-select.
Finding what deserves deleting is the actual work, and scrolling the Assets panel by hand is a bad use of an afternoon. The Unused Components plugin on Figma Community scans a file and reports every component alongside how many times it’s genuinely used on the canvas.
Instance Finder runs the other direction. Pick a component, run it, and you get every instance of that component across every page.
- Run a plugin like Unused Components to build a list of components with zero or near-zero usage
- Cross-check that list against the component description field, in case something is being held in reserve for an upcoming release
- Multi-select the confirmed candidates in the Layers panel with Shift-click or Cmd-click (Ctrl-click on Windows)
- Press Delete once to clear the whole selection
Reopen the Assets panel afterward and look for anything still showing a broken link. Usually that means an instance survived on a page you weren’t looking at.
Anyone maintaining a large Figma library runs into this eventually. Deleted components stay invisible while remaining linked inside older designs, which is a big part of why plenty of design system teams move to a deliberate deprecation process instead of trusting deletion to be clean.
Naming conventions pay off here on the second pass, since a shared prefix groups related components together in both the Layers panel and the plugin’s output.
How to Undo or Recover a Deleted Component
Two recovery routes, and which one applies depends entirely on how long ago it happened.
Undo Immediately
Undo brings a deleted component right back, as covered above. What matters is where it stops working. Undo only reaches through the current working session. Close the file, or leave the tab idle long enough that it reloads, and that short-term history is gone with it.
Ctrl+Shift+Z, or Cmd+Shift+Z on Mac, redoes what you just undid. Useful when you step back one action too many, which happens more than anyone admits.
Restore from Version History
Open the file name menu, pick Show version history, and scan the timeline for a checkpoint saved before the component went missing.
Figma builds that timeline automatically. It saves a new checkpoint every 30 minutes. On the free Starter plan the history reaches back 30 days, and on Professional, Education, Organization, and Enterprise plans there’s no limit at all (Figma Help Center).
Restoring doesn’t have to mean overwriting. Duplicate the older checkpoint into a separate file and you can lift the missing component out without disturbing anything built since the deletion.
That distinction earns its keep on a file several people edit at once, where the current state holds real work nobody wants traded away for one accidental deletion.
When Deleting a Component Does Not Work
A component that refuses to delete usually traces back to permissions, an unpublished library change, a leftover detached copy, or a branch nobody merged.
Missing edit access is the usual culprit. Figma requires can edit access for any change to a file, component removals included, and view-only access blocks it outright (Figma Help Center).
| Situation | Why It Blocks Deletion | Fix |
|---|---|---|
| View-only access | No edit rights on the file or its folder | Request can edit access from the file owner |
| Component still published | Library removal has not been published yet | Publish the removal from the Assets panel |
| Detached copy remains | Object looks gone but exists as a plain frame | Search the Layers panel for the frame directly |
| Unmerged branch | Change only exists inside the branch | Merge the branch into the main file |
Remove a component locally and never publish it, and every other file connected to that library still sees it. Your Assets panel looks clean. Everyone else’s does not, right up until the library gets republished.
A detached instance keeps the appearance described earlier, which is precisely why it can pass for a successful deletion during a quick audit. Only the Layers panel will tell you whether you’re looking at a real frame or something still behaving like a component.
Branching adds another layer. It sits behind Figma’s Organization and Enterprise plans and needs a Full seat to create. Delete a component inside a branch and it’s gone from that branch only. The main file keeps it exactly as it was until someone reviews and merges.
That gap is deliberate. Branching exists so changes, deletions included, stay quarantined until a reviewer signs off.
FAQ on How To Remove A Component In Figma
What keyboard shortcut deletes a component in Figma?
There isn’t one specific to components. Select it and press Delete, or Backspace on Windows, the same key you’d use on any layer.
Detaching an instance is the one with a dedicated shortcut, Option+Command+B, covered in the delete versus detach comparison above.
Can you delete a component from the Figma mobile app?
No. Figma’s documentation confirms that editing a Design file, deleting a component included, is not possible from the mobile app.
The iOS and Android apps cover viewing, commenting, and mirroring. Full editing stays on desktop and browser.
Can a deleted component be recovered after version history expires?
The 30-day window on Starter plans limits visibility, not storage.
Figma’s support team confirms older versions remain on their servers even when they’re hidden from view, and upgrading to Professional, Education, Organization, or Enterprise unlocks the full history right away.
What Should You Check First in How To Remove A Component In Figma?
Start by confirming whether the component is local to one file or published to a team library. That single question decides everything that follows.
From there it’s a matter of picking the right operation, delete for permanent removal or detach for a one-off edit, then publishing the change and auditing the Assets panel afterward to catch whatever survived.
The numbers from earlier are worth holding onto here. Figma sits at an 82.3 percent share of UI design tool usage, and its S-1 counted 13 million monthly active users, so an unpublished removal has a real chance of reaching files well outside your immediate team.
Clearing out dead components is only half of it. Building the replacements properly gets its own walkthrough on building components in Figma properly.
