Symbols Everywhere…

How to keep your master UI design sketch file clean

Every design team who uses sketch can face this issue…

UI designers put the final touches on their assigned screens after several iterations, quit sketch and go home. Design lead opens their files to do one last check, and if all is ok, copies and pastes the finished artboards into the master UI file…and BAM!! symbols page is full of duplicates and superfluous symbols from God knows where🤦‍♀️

your nice, clean screen that had all symbols organized, named and ready for export now totally loses it’s cool.

One Alien: “A stranger.”
Another Alien: “From the outside.”
All Aliens: “Ooohh!”

honestly, Sketch, calm down they’re just duplicates.

and you end up with something like this -.-

I used to go manually to my Symbols page, and look for and remove duplicates after every.single.iteration. And let me tell you, in a big project with no defined design library, that approach is downright exhausting..

So like any sane designer, I googled it. It took some research but eventually I found a way to copy artboards into a sketch file without messing up symbols page with duplicates and unnecessary symbols while keeping the symbols in case any change is required later.

Let me tell you how to do it:

They key is to copy only detached elements into your master file.

1. open the sketch file with the finished artboards ready to be added to the master file.
2. Duplicate the finished artboards inside the same file.
3. Download this life-saving plugin from GitHub https://github.com/Pausansol/Detach-all-symbols
4. install the plugin.
5. select the duplicate artboards you just made then go to plugins ->detach all symbols -> detach all selected layers from symbols.

or simply hit Control + Command + P.

You just detached all layers from their respective symbols in the duplicate artboards. Now that’s what you’re going to copy into your master UI file.

it’ll look sorta like this…

6. copy the duplicate artboards into your master UI file.

7. Enjoy!

This will pluck those annoying extra symbols from your master UI file like a claw!

Don’t worry about losing your handy symbols or ruining the symbols your designers created to make their job easier;

in case of any further change to UI, all you gotta do is go back to the original artboards with symbols, make your changes and the repeat the steps above.

I hope this helped make your day-to-day job managing a master file in Sketch a little easier. I know it was driving me crazy. It took some research & testing to find out how to do this and I couldn’t find anyone explaining it step by step so here we are 😊

until the next post, lots of love. Keep designing, to infinity & beyond!

I will always love the first movie most of all 😍

Disclaimer: Toy Story is owned by Pixar. Detach-All-Symbols is a plugin owned by Pausansol. I own nothing but my content.