Help - Detach all components 🚨

Ask the community
1

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

2 Likes
2

Ctrl + A
Ctrl + Alt + B

Substitute Ctrl with Cmd for Mac

1 Like
3

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
4

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.

5

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!

6

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.

51 Likes
7

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

7 Likes
8

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

1 Like
9

@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
10

Glad I could help!

11

Yay, happy component’ing! haha

1 Like
12

This is what I want, thank you！

13

Your solution helped me a lot!

Thank you very much, sir.

1 Like
14

@Timothy_Sullivan This just saved me so much time!

1 Like
15

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

16

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

3 Likes
17

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

18

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

19

Amazing, thanks @Timothy_Sullivan

20

This made my actual day!!!