A Better Sketch File, a Better Designer, a Better You

Dear design and engineering friends,

Have you ever opened someone else’s Sketch file and realized that you were in the digital Wild Wild West? Artboards all askew and layers simply abandoned left and right — “Rectangle 2” and “Oval 43” staring back at you? We’ve all experienced this suboptimal hand-off (consider yourself lucky if you haven’t) and wondered, “How the heck can this be better?”

Even if a lawless Sketch file doesn’t bother you, it does affect the people you work with. Creating a consistent system makes it easier to collaborate with others and help you become a more reflective and self-aware designer.

Today I’m going to show you how to wrangle artboards and rogue symbols into an organization system that doubles as documentation for keeping track of your design decisions.

First, let’s take a look at what a typical (messy) Sketch file looks like:

If you had to take over this Sketch file, would you know what the most updated designs are? Can you discern the function for each artboard? Do you know what’s going on with the layers??

Clearly this Sketch set-up leaves a lot to be desired! It’s not very intuitive and raises a lot of questions. For comparison, here’s what my Sketch workspace looks like:

See the difference? The artboards are grouped into sections, the layers make sense (ah yes, “Slider Dots” is more obvious than the mysterious “Group 2 copy”), and the pages are dated to give you a clear timeline of the project.

Here’s What I’m Saying

The concept that a more organized Sketch file is better than a less organized one probably doesn’t sound particularly groundbreaking, but a well-tended Sketch file is about more than just a clean artboard.

It makes your life easier

Keeping a super organized Sketch file has helped me smooth out my design process and saved me time when I was trying to find a specific component or understand an archived design. For instance, I was looking for an icon that I used six months ago and it was (relatively) easy to find because all my artboards and layers were well-named and grouped reverse-chronologically. I was also able to cross-reference it with my meeting notes from around that time. If I hadn’t done any of that work (thanks Past Isabel!), I probably would’ve had to dig through all my old designs and look at each layer. Or worse — I would’ve had to recreate that icon.

https://i.imgur.com/uaxpYMz.gifv

It makes you a better designer

Aside from making it easier to find things, it’s also helped me cultivate good documentation habits when I want to analyze my old work and see where I could’ve made improvements. I revisited one of my old Sketch files and realized that I didn’t do enough research before diving into a million iterations for an initial idea I had. I probably could’ve benefitted from asking better questions, spent more time researching different design solutions for the problem at hand, and been less gung-ho about about an idea that wasn’t fleshed out enough. But being able to walk through a timeline of my Sketch file and look at the evolution of my project helped me make these valuable takeaways for my next project.

It makes your coworkers lives’ easier

Whether you’re handing off your Sketch file to another designer to take over a project or to an engineer to execute your designs, a clear, well-organized Sketch file will be appreciated by everyone who touches it — if you’ve ever been in a land filled with “Rectangle 2”s and “Oval 43”s, you know exactly what I’m talking about.

So, here’s the thing: I know it can be tedious naming all your layers and making sure that your symbols are in tip-top shape, but trust me — it’s worth it! Here are four concrete tips (and a few plug-ins to go with them) for making your own organizational system and improving your Sketch work flow:

1. Create new pages for significant design decisions and playing around with iterations

Getting into the habit of duplicating pages whenever you want to create a new iteration can help you with version control; if you work with engineers, it’s sort of like creating a new branch in Git when you’re playing around with a new feature or idea. Titling your pages with the date can also help you remember when you made certain decisions and make it easier to cross-reference your notes. This has helped me a lot when I’ve had to explain my design rationale in meetings; I can quickly toggle between an old design from a week ago and show what’s been improved in the new flow.

If you have to go back to an old project or hop between multiple clients, keeping a clean archive can help you get updated on the most recent design decisions pretty quickly, like figuring out why something changed or got scrapped. For example, if you stepped away from a project for a few months, it could be tricky going back to it if your design file doesn’t have any proper documentation.

Documenting and preserving your design decisions also makes it easier for other people to understand your thought process. Whatever system works for you should make your thinking articulate and clear. It’ll ensure a smoother hand-off process and your co-workers will love you for it.

2. Group your artboards by function and version

I like to create text layers above the artboard section in the right sidebar to use as section titles (shown below in my beautiful screenshot). It’s helpful to use large type for these titles so that you can zoom out and see a bird’s eye view of all your artboards. With this set-up, you can actually use Sketch as a simple presentation tool (InVision, who?) and explain how you got from Point A to Point B because everything’s already set up like a site map (just kidding, we love you Clark).

3. Create a useful naming convention

There’s no single rule for how you should name things, except that your naming conventions should be consistent. By naming your artboards, layers, and symbols with relevant titles and version numbers, you can save a lot of time for everybody (and yourself). Instead of leaving a shape to be named “Rectangle 4 copy,” give it a more useful title like “Tool Tip Background” or “Tool Tip BG.” This leaves very little wiggle room for miscommunication when you’re talking about specific components. (“Oh, you were talking about Tool Tip 4, not Tool Tip 5??”)

There’s a great Sketch plug-in by Rodrigo Soares that can help you rename multiple layers at once, instead of painstakingly doing it one by one. It also lets you give sequential names to your layers (so that you can keep track of “doge picture 1”, “doge picture 2”, “doge picture 3”, etc.).

4. Organize your symbols.

A great, built-in Sketch trick for organizing your symbols into automatic groups is to add a forward slash (/) to the name. If you have different variations of an exit icon, you can name them “Icon/Exit-V2” and “Icon/Exit-Active” and they’ll all show up under an “Icon” group when you go to insert a symbol in your design.

As an added bonus, here’s a helpful plug-in that can help you automatically sort symbols from Jason Burns, and here’s one to help you remove unused ones made by Ashung Hung.

Symbol organization is also necessary when you’re handing your work off to developers. They’re going to be exporting assets from your design, and if they can’t figure out what’s what, everyone’s going to be in trouble. So be proactive about it! Name your symbols as soon as you make a new one, and run that symbol organizer if you don’t want to manually drag around tiny icons in a 4×4 grid! Trust me, it gets harder the longer you put it off.

You Thought It Was About Sketch, But It’s Actually About You

At the end of the day, this method is about etiquette, professionalism, and learning more about yourself as a designer (or as someone who uses Sketch files!). Creating clear communication around your work and helping others understand it is essential in creating a smooth work process. It also removes the possible confusion that comes from using imprecise language when you’re talking about specific components.

So be specific! Be organized! Become a great communicator! Think critically about your process just as you would with your design work. No one wants to spend hours restructuring their Sketch file right before they hand it off, but if you follow my advice, you’ll (hopefully) avoid that horrible fate.

Thanks for reading, friends, and good luck with your Sketch files! ✨

Isabel Lee is a product designer at Postlight.