Skip to main content
Solved

Help - Detach all components 🚨


TomAustin

👋 Moving from wireframes to design on a website and intend to maintain the wireframes as a reference exactly how they are now.

Since the wireframes use components and I will be updating them for the design, I thought the best way to archive the wireframes would be to detach all the components.

TLDR; How do I automatically detach all components in a page?

Best answer by Timothy_Sullivan

To my knowledge there isn’t a way to automatically detach all components but one thing you could do is:

  1. Select all elements you want to detach
  2. Press Command + / (macOS)
  3. Type “detach instances” and select the “Detach instances”

And all your instances should be detached.

View original
This topic has been closed for comments

29 replies

Klesus
  • 237 replies
  • March 2, 2022

Ctrl + A
Ctrl + Alt + B

Substitute Ctrl with Cmd for Mac


TomAustin
  • Author
  • 5 replies
  • March 2, 2022

That doesn’t detach components in any child container (basically every component), I would have to ungroup every layer which would break auto layouts etc.


Klesus
  • 237 replies
  • March 2, 2022

You could try to traverse the layer hierarchy with Enter (selects children) and Shift + Enter (selects parent)

It might not traverse fully if you have different objects selected but at least it makes the process faster.


TomAustin
  • Author
  • 5 replies
  • March 2, 2022

I actually found I could just duplicate the file as the components are only file specific to acheive an archived state for the wireframes. Sorry, half the challenge is knowing the right question to ask!


Timothy_Sullivan

To my knowledge there isn’t a way to automatically detach all components but one thing you could do is:

  1. Select all elements you want to detach
  2. Press Command + / (macOS)
  3. Type “detach instances” and select the “Detach instances”

And all your instances should be detached.


Mikk_Parg

Not only Detach Instances but Detach All Nested Instances! You, sir, showed me the path! ❤️


Jay_Price

@Timothy_Sullivan You just saved hours of my time, 🙏


Stazzyboo
  • 14 replies
  • June 18, 2022

@Timothy_Sullivan wish I had seen you comment last week when I wasted hours doing that manually, saving myself so much time going forward 😍


Timothy_Sullivan

Glad I could help!


Timothy_Sullivan

Yay, happy component’ing! haha


Kevin_Blackfyre

This is what I want, thank you!


Hostfit
  • 1 reply
  • July 22, 2022

Your solution helped me a lot!

Thank you very much, sir.


Liz_Shinn
  • 4 replies
  • August 3, 2022

@Timothy_Sullivan This just saved me so much time!


Nabil_Amara1

Amazing ! Thanks for the tip 🙂 “Detach All Nested Instances” did the trick for me !


JosephxBrick
  • New Participant
  • 67 replies
  • August 27, 2022

Thanks, @Timothy_Sullivan! I never saw the “Detach All Nested Instances” command before.

@TomAustin – If you want to create a reference file that is a snapshot in time, you probably also want to detach all styles from your wireframes. There’s a very useful plugin called “Destroyer” that acts on the selected items and traverses all nested layers. (I didn’t write it: I just use it.)

image


Scott_Ference

Since I’m newer to Figma and didn’t understand either, for us PC users Ctrl + / also works.

Or click the Figma icon in the upper left corner > Quick Actions > type in "Detach all nested instances


Tucker1
  • 1 reply
  • October 4, 2022

Your comment was incredibly helpful. Thank you, @Timothy_Sullivan!


Tys
  • New Member
  • 14 replies
  • October 12, 2022

Amazing, thanks @Timothy_Sullivan


Bronwyn1
  • 9 replies
  • November 2, 2022

This made my actual day!!!


Bronwyn1
  • 9 replies
  • November 2, 2022

@JosephxBrick

Wow that is also super cool! saved me so much time, thank you.

Do you by any chance know how to save or favourite plugins somewhere so one develops a sort of plug in library?

I only find this ‘try out’ feature in community, and then on a file - I see how one can run plug ins and select from a dropdown list of recently used. But what I would really love is a list of saved or favourite plug ins to go back on when time has passed and I may have forgotten 1.

Maybe the answer is out there, but I didnt find it easily, so while I am here, thought I’d give a try asking


tank666
  • 4868 replies
  • November 2, 2022

Oneal_Anguin

Really helpful


William_Alexander

You won the internet when you wrote this! Thank you for the save.


Jonathan38

Love “Detach all nested instances”. Been using it for a little while now.

It would be REALLY nice to be able to also destroy font styles at the same time.
Also, it would be REALLY REALLY nice to be able to detach ALL nested instances in an entire file with multiple pages. Currently, it needs to be done at the page level, and some files can have quite a lot of pages…

What I am working on currently is updating font styles in an existing library. Easy, if that was all needed. However, we need to archive the existing library and all linked design files keeping the sunset styles in tact. Both original and duplicate design files remain linked to the original Library. So I am having to go into every page of the original design file (archive) and detach all nested instances one page at a time.

After this, I can publish the updated styles from the Library to the new (duplicate) design files that are still linked.

Any better way to do this?


Thos
  • New Participant
  • 16 replies
  • March 20, 2023

This is the key! AFAIK ‘Detach all nested instances’ command is not available in any of the menus, so you have to search for it like Timothy_Sullivan described.

The Destroyer plugin also detaches nested instances. Thanks for the tip @JosephxBrick


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings