Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

 

5 top tips for using Sketch

Discover how the design team at SilverStripe uses Sketch, as we break down our top 5 tips for streamlining your digital design workflow.

Read post

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.

Moving an object by 10 pixels

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’.

Inserting a button symbol from a submenu created by naming with a /

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.

screenshot of aligning items in sketch

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.

screenshot of using the pin tool and fixed width and height tools

Setting an object to have fixed width and pinned to right

Resizing an object - the icon stays pinned to right side

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. 

When overriding a nested symbol or text, the Paddy plugin adds extra functionality to resize an object depending on the content.

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.

Using symbol overrides to change the background state of a button 

Sketch tip #5: Plugins: Craft by Invision

screenshot of the Craft website

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.

 

About the author
Dani Smith

Bridging the gap between design and marketing, digital and print. 

Post your comment

Comments

  • Hi Bonusetu, thanks for your comment! The best way to frame your zoom is to hold down the 'z' key, then click and drag around just the area you want.

    Posted by SilverStripe, 15/05/2018 10:59am (2 months ago)

  • Sketch is a good app but I've always had this problem with zooming, It's really hard to find the zooming range that I need. Is there a shortcut to adjust this or any other way?

    Posted by Bonusetu, 11/05/2018 7:06pm (2 months ago)

RSS feed for comments on this page | RSS feed for all comments

Like what you have read?

Sign up for our weekly blog digest sent to your inbox.

Subscribe