Let’s face it: Sketch has been stepping strong in the last years and is now becoming the default tool for many agencies and designers alike.
I use Sketch every time I can over Photoshop. Why? It works easier for me, it’s faster, and it makes editing changes nicer than anything else. As Photoshop is still adapting to this reality, 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 disorganised, an editable file can become a true place where chaos reigns, and that’s never good.
With that said, this guide aims to tell you how to organise your files properly, how to set up your symbols, fonts, styles and everything in order to keep it neat and tidy, and to 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 got you covered.
Starting from the ground up
A very wise teacher once told me…
“When your desk is perfectly organised 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 organisation works a long way. And this can be specially useful with Sketch. A little bit of settings tweaking, automatisation and plugins can make our workflow work as a charm. Just follow these rules and get ready to start your beautiful and tidy project!
A setting you need to check
Didn’t you hate it whenever you made a copy of a layer in Photoshop, it would rename it as “Layer Copy”? Well, in Sketch the same happens unfortunately, but this is easily removable and a good idea to save you some seconds every time.
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! Now every time you copy your layers they won’t be called “Layer Copy” Now go ahead and name those layers however you want. Ooooor maybe wait until we get to the “Naming System” part of this post.
Useful plugins
One of the many wonders of Sketch is also it’s amazing plugin compatibility. There are many many plugins, and many of them are incredibly amazing. I’ll go here through some of the ones I find most useful for organising your layers and the likes:
- Rename it: As the name explains it, it let’s 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, but this just makes the mechanical chores much easier. Here’s how it works:
Sketch Layer Tools: This is an all-in-one app, but the main reason I use it is because it gives you the option to Reverse Layer Order, along with another renaming tools, sorting and selecting options.
Sketch Measure: This is not for organising 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 amazing 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 by yourself! Check Sketch Toolbox, is a plugin manager that you can download to manage, install and uninstall all the plugins that you want. It’s a good tool for browsing and managing them if they happen to get too messy -and if you get excited with installing plugins it definitely will.
Use naming conventions
Deciding on a naming convention is one of the most important steps to start seeing some order in your sketch file.
There’s 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, and 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 personal 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 Sketch file 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 of them.
- 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 certain objects, but style rules and characteristics of two elements:
- Shapes
- Fonts
The basic rule:
You should create a symbol with anything that’s standard across your UI, and only needs slight changes in text in order 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 Style 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 be receiving 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 nice, 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.
Organise 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. Organise 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. But keep this number at your own discretion. Your computer might be more -or less- powerful, and this changes everything.
Also, keep a good hierarchy of the Artboards and Pages. You could use each page to show a different flow of the different views as a standard, or however you see fit as long as you have a system figured it 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 separate point. Craft is a new tool by Invision that is changing 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 normally just randomly complete in a mechanical way- with data in a really 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, anything you can think of
- Styles: You can also generate a Style Guide from your Styles and symbols, something very useful to get a general view of all your project.
But probably one feature that keeps blowing my mind is…
- It’s build 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, real addresses and keep it updated for an extra touch, shortening the gap between design and development
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 to be comprehensive and that it takes you into a journey of no return: An odyssey of self-improvement and organisation in your web design workflow.
Following all these steps carefully (and maybe applying some other standardisation techniques) will boost up your Sketch game greatly, 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 organisation -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 organisation that I didn’t mention, please let me know in the comments and I’ll gladly add them to this list!
