5 top tips for using Sketch

The team here at SilverStripe uses a raft of tools for design, including the ‘digital design toolkit’, Sketch. Whether we’re designing our Open Source CMS, or a website for clients, there are common tools we use to keep project files under control. We’ve had a go at collating our top 5 tips to organise your Sketch documents and streamline your workflow.

Sketch tip #1: Shift + arrow

There are no shortage of keyboard shortcuts in Sketch, so for this, we’ve chosen our favourite – “Shift + arrow”. Use this to move a selected object in increments of 10px. Simple right? It’s the perfect tool for designers compelled work exclusively in round numbers, and makes your project simpler for developers to translate into their project.

Sketch tip #2: Organise your symbols

Every Sketch file we create for a new project ends up housing a large collection of Symbols. When you first create a symbol, Sketch will automatically create a new page in your document called ‘Symbols’, and prompt you to send every new symbol to that page.

Now that those symbols are collected on one page, this is where our next tip kicks in.

You can now organise your symbol library by adding forward slash (/) in the name. If you have more than one symbol with a similar function such as Button/Default and Button/Active, the forward slash in the symbol name will create a group of symbols under the submenu ‘Button’.

If you want to organise your symbols even further, you can install the Symbol Organiser plugin which organises symbol artboards based on the way they are named.

Sketch tip #3: Align, distribute, fixed width and pinning

With the align and distribute tools in Sketch, you can easily control how objects are placed on your artboard in relation to each other. Multiple objects can be selected and aligned to either top, bottom, middle, left, right or centre. You can also distribute objects along a path to create an even distance between those objects.

Selecting multiple objects and aligning horizontally

When you create a symbol such as a search bar, it’s not uncommon for that search bar to appear differently in certain states. Perhaps it is narrow to start, and becomes wider on click. Perhaps it just needs to be responsive. This is where pinning and fixed width tools come in.

You can set up a Search symbol with a ‘standard’ rectangle size, with the search icon inside. You can use ‘Pin object’ in the resizing toolbar to ‘pin’ the search icon to the right.

Then, set ‘Fixed width’ and ‘Fixed height’ leaving you free to resize the Search box without stretching the search icon, also ensuring it is always correctly placed.

Setting an object to have fixed width and pinned to right

Sketch tip #4: Nested symbols and symbol overrides

Nested symbols: symbols that are inside other symbols.
Symbol overrides: allows you to change properties of a symbol, and when used with Craft, allows you to override nested symbols provided they are the same size.

As an example of a nested symbols, you may start with your primary button and nest a download icon symbol within that button. If the download icon changes, or needs to become a new icon (say, login) you can override that nested symbol. 

By using the plugin Paddy which replicates "padding" in CSS, we can set the spacing around the text. Using this plugin allows the background of the button to automatically adjust to the width of the text with any additional spacing specified.

A common situation where symbol overrides are useful is buttons. You could define your button as a symbol, using a naming convention like we set out in tip #2, e.g. button/primary. We can then turn the background into a symbol within the button. By making different variations the background like "hovered" and "active" we can use overrides to change the state of the button. You can now override not only is the text, but the background too.

Sketch tip #5: Plugins: Craft by Invision

Plugins are a huge part of the Sketch workflow, but our favourite of all is Craft. With the Invision Craft plugin you have access to a whole raft of tools to enrich your designs. It gives you instant access to stock photos, endless placeholder text to fill your design, a freehand tool to boost your collaboration process, and lets you seamlessly sync with your Invision Project online. To hear some more of our favourite plugins, head over to our Product UX update blog.

That’s all the tips we have for you today, but there are so many more obscure ways to enhance your Sketch workflow. If you would like us to dive into more Sketch tips, please comment below.