Let’s face it: Sketch has been stepping strong in the last few years and is now becoming the default tool for many agencies and designers alike; what if Sketch is a clean sketch? Let’s make it possible in this guide; stay tuned :). I use Sketch every time I can over Photoshop. Why? It works more accessible for me, is faster, and makes editing changes nicer than anything else. Photoshop is still adapting to this reality, so Sketch has been built from the ground up with this workflow in mind. It is a web/UX/UI design tool from the beginning, and it only gets better.

But it’s only a good tool as long as you know how to use it, and if left unchecked and disorganized, an editable file can become a proper place where chaos reigns, and that’s never good.

With that said, this guide aims to tell you how to organize your files correctly and set up your symbols, fonts, styles, and everything to keep it neat and tidy and win the heart of your fellow developers and team alike. If you want them to start sending you GIFs like this one, just read below; we’ve got you covered.

Starting from the ground up

A sage teacher once told me…

“When your desk is perfectly organized and ready for work, you’ve already done 30% of the work.”

And I’ve been carrying that rule to the core of my being because it is usually right. The phrase might not be a complete and absolute rule, but it does tell us that a good organization works a long way. And this can be especially useful with Sketch. A few settings tweaking, automatization, and plugins can make our workflow work as a charm and make it a clean sketch. Just follow these rules and get ready to start your beautiful and tidy, and clean Sketch!

A setting you need to check

Didn’t you hate that whenever you made a copy of a layer in Photoshop, it would rename it as “Layer Copy”? Unfortunately, in Sketch, the same happens, but this is easily removable and a good idea to save you some seconds every time and make it a clean sketch.

Just follow these simple steps:

Sketch > Preferences > Layers

Now, after that, make sure that this little box called “Rename Duplicated Layers” is unchecked:

And voila! When you copy your layers, they won’t be called “Layer Copy.”
Now go ahead and name those layers however you want. Ooooor, maybe waits until we get to the “Naming System” part of this post.

Useful plugins

One of the many wonders of Sketch is also its excellent plugin compatibility, or we can say it is an opportunity of dream, i.e., ‘clean sketch’.’ There are many, many plugins, and many of them are incredibly unique. I’ll go here through some of the ones that can help us with clean Sketch, and I find most of those very helpful in organizing the layers and the likes:

• Rename it: As the name explains it, it lets you rename your layers in bulk and add sequential naming, prefixes and suffixes, and many cool features that will make naming your layers easier. In the end, some manual work is still needed, making the mechanical chores much more effortless. Here’s how it works:

• Sketch Layer Tools: This is an all-in-one app, but the main reason I use it is that it gives you the option to Reverse Layer Order, along with another renaming tool, sorting, and selecting options.
• Sketch Measure: This is not for organizing your layers by itself, but it’s a tool that you and your developers will love. It measures distances, percentages, or almost anything you can think of inside your file and inputs it with some overlay graphics. It’s fantastic whenever you want to get a quick rundown of the dimensions of your website.
• Sketch Toolbox: But in the end, why listen to me on the internet when you can browse all the cool plugins and manage them yourself? Check Sketch Toolbox is a plugin manager that you can download to manage, install and uninstall all the plugins you want. It’s a good tool for browsing and managing them if they get too messy -and if you get excited about installing plugins, it definitely will.

 Use naming conventions

Deciding on a naming convention is one of the most critical steps in clean Sketch to start seeing some order in your sketch file.

There are many options to do this. Usually, if you can talk to your developers and agree on a naming convention, the names of your layers, elements and folders will be the same as in the CSS. That is a trophy for consistency and will be extremely useful for the whole work process.

As a general rule, try to be as detailed and descriptive as possible without making your layer names too long for quick readability.

My recommendation:

I like to input which element is within this folder/layer and then a short description; here’s an example:

Get your symbols and styles straight from the beginning

Symbols are the bread and butter of a clean sketch file and for its optimization. They do lots of things like:

• They help you keep the file size at a minimum, constantly recycling repeated elements
• They work as a charm with consistency. Any change you make to one symbol is automatically translated to the rest.
• Even though they are the same across all their iterations, you can change any given text inside them and keep it independent -great for buttons-.

Styles do the same trick but are more flexible. They’re not particular objects but style rules and characteristics of two elements:

• Shapes
• Fonts

The basic rule:

It would be best to create a symbol with anything that’s standard across your UI that only needs slight text changestext to work.

Examples:

• Buttons
• Fields (standard, one-line size)
• Search fields
• Avatars
• Icons
• Header
• Footer
• Sidebar
• And more…

If all or most of these aren’t symbols, I’m sorry, buddy, but you’re doing it wrong.

Same with Styles. Try to keep Font styles and Shape Styles at a minimum. Besides making it look better, it will be easier to change any mistake you have, and then it’s super simple to do the same in CSS. If you keep the same logic, you’ll receive boxes full of chocolates from your developers thanking you. And who doesn’t love chocolate?

Align everything with everything, and keep standard distances

I bet this comes as a given in web design, but it’s worth a mention:

“Center align everything you can, and keep your distances always consistent”

Developers can usually guess when an element is center aligned, but they won’t be able to do the guesswork if two pairs of the same items in a list have a different distance between each other. Keep it consistent, and showcase your distances with Sketch Measure, and the Consistency Fairy will give you extra money under your pillow if you… or not. Anyway, it’s always good to be friendly, right?

 For asset exporting, export them directly into folders with the proper naming.

If you also got the job of exporting the assets, save yourself some time and name the asset with the prefix. <folder>/.

Example:
If you have your “btn_BuyNow” and you need to export it to the “main_section” folder, just name the object “main_sextion/btn_buyNow”`. It will automatically be exported into a folder with that name.

Organize your Pages and Artboards

This rule is more arbitrary than it sounds, but 10-15 artboards per page is a good number to keep your computer processing fast. But keep this number at your discretion. Your computer might be more -or less- powerful, and this changes everything. Organize it however you want, but in the end, having a limited amount of artboards per page will pay you off with your computer not crashing every 15 minutes.

Also, keep an exemplary hierarchy of the Artboards and Pages. You could use each page to show a different flow of views as a standard or however you see fit, as long as you have a system figured out.

 Supercharge your workflow with this plugin: Craft

This could’ve been in the beginning, and I could’ve listed it as a regular plugin, but I feel it needs its particular point. Craft is a new tool by Invision that changes the screen design workflow as we know it.

In summary, it will help you populate random information and pictures -like Usernames, Names, Avatars, and standard data that you usually just randomly complete in a mechanical way- with data in a quick way.

You can choose its main functions:

• Duplicate: Duplicates elements on a list, like cards, profiles, etc., in a given order and with a set of parameters
• Photos: Populate elements with random photos from folders, Dropbox or Unsplash
• Type: Same as below, but with text. Populate Names, Addresses, and anything you can think of
• Styles: You can also generate a Style Guide from your Styles and symbols, something beneficial to get a general view of all your project.

But probably one feature that keeps blowing my mind is…

• It’s built using JSON: And this means API Integration. That’s right. Stop populating your mockups with empty data and start importing it straight from your website. You can complete it with real names and addresses and keep it updated for an extra touch, shortening the gap between design and development.

Please show this to your developers; I’m sure they’ll go crazy about it!

Wrapping up

I know this could be a lot to digest, but I’m hoping it will be comprehensive and take you into a journey of no return: An odyssey of self-improvement and organization in your web design workflow.

Following all these steps carefully (and maybe applying some other standardization techniques) will boost up your Sketch game and transform it into a clean sketch, making your developers work faster, apply your changes quickly and give you a sense of well-being and peace that can only be achieved through the organization -and a little bit of an OCD, I know-.

If you like tips like the above, please do follow us on Twitter at @Pixel2HTML so you can stay on top of the latest in web design and development.

Last but not least… If you have any other tips for Sketch organization that I didn’t mention, please let me know in the comments, and I’ll gladly add them to this list!