Help - Detach all components šŸšØ

:wave: 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?

4 Likes

Ctrl + A
Ctrl + Alt + B

Substitute Ctrl with Cmd for Mac

1 Like

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.

3 Likes

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.

1 Like

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!

2 Likes

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.

67 Likes

Not only Detach Instances but Detach All Nested Instances! You, sir, showed me the path! :heart:

8 Likes

@Timothy_Sullivan You just saved hours of my time, :pray:

1 Like

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

1 Like

Glad I could help!

Yay, happy componentā€™ing! haha

1 Like

This is what I want, thank youļ¼

Your solution helped me a lot!

Thank you very much, sir.

1 Like

@Timothy_Sullivan This just saved me so much time!

1 Like

Amazing ! Thanks for the tip :slight_smile: ā€œDetach All Nested Instancesā€ did the trick for me !

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

5 Likes

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

1 Like

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

Amazing, thanks @Timothy_Sullivan

This made my actual day!!!