Share this:

How to Keep your Design Files Organised for an Easy Handover

Aug 24, 2017 - Blog

Let’s be honest, when you’re working on a file juggling ten things at once, it can be hard to keep things nice and tidy.

The problem is, if you don’t spend a little time keeping things organised now, you’ll kick yourself for it later. When you’re handing over to another designer, sending them a untidy source file is only going to make their life difficult and reflect badly on you.

If you’ve ever had to work with a mess of unnamed, unordered layers and groups sandwiched between unused layers and half-baked concepts, you know what we’re talking about.

With this in mind, we’ve come up with a few fool-proof steps that should make your life (and every designer’s life in future) a lot easier.

Name your Layers, Groups and Artboards Sensibly

Let’s start with the naming process – names should be descriptive and tell the designer exactly what a layer is, or what a group contains, otherwise you’re just clicking around and guessing.

If you’ve duplicated part of your design in another area, make sure the layer and group names still make sense.

Would you be able to tell what this is? We sure can’t!

Consider naming things that have the same properties using the same keyword, as this will help later if you need to change multiple instances of the same thing – you can even search the layers panel and change them all at once.

Use standard naming conventions where possible. For example, for things like icons, use the “ic_” naming convention, as this will also help the developers implementing your design using something like Avocode – if you’re stuck with naming conventions though, here’s a fantastic Android cheat sheet.

A Useful Photoshop Trick

When you duplicate a layer or group in Photoshop, it adds “copy” to the end of the layer or group name – and it drives us mad.

Thankfully you can turn this annoyance off in Panel Options, which you can get to from the button at the top-right:

A Great Sketch Plugin: Rename It

Got a bunch of layers you want to rename? There’s a plugin for that. Save yourself some time with one of our personal favourites, Rename It.

It can add incremental numbers or letters, append and prepend a string, add dimensions, find and replace.

Use Artboards

Artboards have been around for a while now, and they’re pretty ubiquitous throughout design software.

There’s no need to stack screen design upon screen design any more, or have multiple assets like icons on one artboard.

If you haven’t embraced artboards yet, then get over to YouTube and watch a tutorial right now – you’ll save yourself loads of time and effort when trying to export your work.

Group your Layers in a Logical way, then Order them

Save time by grouping all layers belonging to the same element together, so you can move, duplicate or hide the element with a single click.

Then, be sure to order your layers and groups as they’re viewed from top to bottom. This makes it easier to find a particular element, as messy layers and group ordering is enough to drive the most patient and understanding designer insane.

Delete Elements no Longer in use

Avoid leaving loads of unused layers cluttering your panel; it makes it hard to navigate your document and will confuse someone trying to figure out what’s what.

It also adds a lot of unnecessary bulk to your file’s size, which can slow things down a lot, particularly on Photoshop, as this is raster image based software.

If you’re looking to remove unused symbols too, there’s another plugin for that. With one click, this Sketch plugin allows you to remove unused symbols in the most efficient way.

Use the Smart Objects or Symbols to Save Time

If your design uses the same element in more than one place, such as icons, buttons, headers, footers and navigation bars, make sure you use smart objects (in Photoshop) or symbols (in Sketch).

This way, you can edit an element once and it will be updated wherever it’s used – a huge timesaver.

In Sketch, symbols are a bit more advanced too, allowing you to have nested symbols – that’s symbols within symbols.

Plus, you can use ‘overrides’ to change the text, among other things. This means that, for example, the same symbol can be used for every button of the same style, even though the text differs.

Don’t Flatten Icons

It’s good practice to keep your icons in their editable form, especially when it comes to exporting for different resolutions, or if you or another designer needs to edit the icon later.

There’s nothing more frustrating than having to recreate an icon just because it’s been flattened or rasterized.

Finally…

Proper organisation and management tend to get left by the wayside when we’re pushed for time, but if you take charge of your files right from the start, you’ll thank yourself later, and so will any other designers working on your files.