Boost your efficiency on Sketch

Your icons have several states and colours and you’re tired to update symbols one by one. Create a table takes so many time. You have several symbols for a simple input like disable input, a dropdown, an input with a placeholder and this is a nightmare to update them when your UI guidelines change. Ring a bell?

Increase your efficiency by being organised on Sketch

1 — Name correctly your symbols: create categories.

This is obvious, but several designers do not care about the nomenclature of their symbols and layouts.

Did you know that you can create categories adding a “/” in your layout name?

Use / to create categories of symbols

That way, when you want to add an icon symbol, you can easily retrieve it in the good categories.

When you have thousand of icons, retrieving the one that you’re looking for could be a nightmare

Even better, that will allow you to override symbols as it is only possible when they are grouped in the same category.

2 — One icon with several colours

Your symbols are well organised? But you have one symbol icon (e.g a magnifying glass) in white for a dark background, another in blue for a white background and another one for the disable search. And you have to update them to thin this icon. Again. Thrice for each colours.

What if we can reduce all those symbols in one, and just override the colour?

1. Create a square for each colour and make them as symbol.
2. Your colours symbols should be located in one category (e.g ‘’tint’’).
3. Create one symbol for you icon.
4. Insert you symbol colour in your symbol icon and create a mask.
5. You can now override your colour in your symbol.

How to override colours in your symbols

3 — Input in a form: A unique component, several symbols

Guess what? We will also increase our efficiency doing almost the same thing for inputs. Let’s note how many symbols we should have for one input:

• An input field with the placeholder
• An input field filled
• A disable input
• An input with an icon (e.g our magnifying glass, a calendar)
• A dropdown (with an bottom arrow)

I previously had 5 symbols for each of them. But when we decided with my team to change the height of our inputs, I had to update them five times. Then we wanted to check with a border-radius. Five times again.

From now on, I only have one input, and all of this changes are done only once. From now on, I can easily test and iterate without being afraid about the impacts on my mockups.

How to?

1. Create your shape
2. Add your placeholder
3. Add you filled text
4. Add your icon
5. Setup the width on the resizing on the left in order to keep the correct proportions :

• Fix width and fix height for the icon + align to right
• Alignment auto for the text + align to left

Tips: Name correctly your layouts like “Placeholder”, “Icons…”

How to have one symbol for your form panel

4 — Table: Create symbols for each row and use “Make a grid”

Have you heard about Atomic Design?

• Atom (An icon) + Atom (text) = molecule (Input or dropdown)
• Molecule + molecule = Organism (Form)

With this method in mind you can be able to be well organized, and play with all of your components to create a consistent interface and increase your efficiency.

You can even easily manage tables:

1. Your row is made of atoms (An icon for a status, a text, a background color) or molecules (an input)
2. Make it as a symbol
3. Use “Arrange > Make a grid” in Sketch menu and define how many row you want
4. Override and play with the data to have a “real data” table.

I hope you liked it! :)

Download the resources

A Sketch file with:

• Organised layers
• Colours as symbols
• Forms symbols like input with or without icons…

And you? What are your method to increase your productivity with Sketch?