Sketch was first hailed as Adobe Photoshop’s rival, then Adobe XD’s rival, and now InVision Studio’s rival as well. It’s surprisingly resilient for an app that’s never released a Windows version – although this might not seem so surprising when you learn both what it can do, but how it does it.
Sketch was first hailed as Adobe Photoshop’s rival, then Adobe XD’s rival, and now InVision Studio’s rival as well. It’s surprisingly resilient for an app that’s never released a Windows version – although this might not seem so surprising when you learn both what it can do, but how it does it.
Sketch is an app for designing user interfaces, but its powerful, intuitive tools makes the design process so artfully smooth that you’ll quickly understand why and how it paved the way for a new generation of design apps.
Here are tips that will make you a power user in minutes.
1.Separate your projects by Page
After a while, your canvas will start to feel cluttered despite the fact that it’s essentially unlimited. Large designs require organisation, which is why we can logically separate Artboards into different Pages.
The best way to organise Artboards into Pages is by platform. If you were designing, for example, an Android and iOS version of a mobile app, you could have a separate Page for each.
The reason for this, is that when you use prototyping and design handoff tools, you’d want to export the right Artboards to the right Project, so separating them in this way makes logical sense. With web designs, I typically create things like Symbols and logos on their own Page.
Read also: 5 breakout web design trends to go mainstream
2.Organise image asset exports into folders
Developers don’t want to sort through an entire folder of exported image assets, especially with large designs. Breaking them down into folders is more organised and we can do this from Sketch. Simply rename the layer using this format: ‘subfolder/asset.png’ to auto-create folders in your export.
Tip: did you know that you can drag a layer from the layer list onto your desktop to export it? It’ll be a @1x PNG file by default.
3.Test a responsive design using resizing
You have a container, which can be either a Group or an Artboard, and various layers inside that container. Let’s say that this container is a website header with a floated logo and navigation – the logo floated on the left, and the navigation floated on the right.
When you resize the container, you want the logo to still be floated to the left, and the navigation to the right. Enter Resizing, where contained elements can be floated to a container edge, helping you to test responsive designs.
Once again, this all happens from the Inspector, under the Resizing tab. There are four possible locations that you can pin from:
- Left: object will be fixed to the left-hand side
- Right: object will be fixed to the right-hand side
- Right and top: object will be fixed the top and right sides
Pretty simple really, but there’s a snag. When you resize containers ordinarily, the contained elements are resized accordingly. You can fix this by activating the Fix Width and Fix Height options, which will stop this from happening. Centralised objects will remain centralised as well. Magic.
4.Analyse colour contrast with the Stark plugin
Although it’s not as trendy as concepts such as prototyping and animation, colour contrast is a big deal. Poor colour contrast results in limited accessibility, especially for users who have limited eyesight (something which affects 1.3 billion of us worldwide).
The WCAG (Web Content Accessibility Guidelines) sets worldwide standards for colour contrast, which can be somewhat difficult to understand for somebody that’s never heard of them before.
The Stark plugin not only helps you to compare two colours against these WCAG 2.0 standards, to make sure that your contrast is sufficient enough, but also enables you to test your design against the eight different types of colour blindness.
The key things to check are when two backgrounds are adjacent to one another; buttons against backgrounds; and most importantly, text against backgrounds. Font size factors into this as well, as smaller text is harder to read, so considering that there’s so much to think about here, Stark is handy to have in your toolbox.
Stark opens in a new window (Plugins > Stark > Show Stark). Press ↑ and ↓ to cycle through the types of colour blindness, ← and → to cycle through the Artboards in your document, or select two colours to analyse the colour contrast. Colour contrast is defined by two different levels/ratio (AA and AAA), and your colour contrast should be meeting at least the AA requirements.
5.Automate your asset exports
Once you have defined your export options, you won’t have to do that again. And this is true whether you’re actually exporting image assets from Sketch or you’re exporting to a design collaboration app, such as InVision, Marvel, Sympli or Zeplin.
Here’s what you need to know: file format matters. SVG is better for the web because it’s a vector format, which means that you can scale it up and down without losing quality. SVG formats are usually smaller in file size too, which makes webpages load faster.
We use PNG for mobile apps, although to cater for Retina/HDPI screens, we export images @2x and @3x, depending on the device that we’re catering for. You can define as many options as needed, all at once.
Just click the Make Exportable button at the very bottom of the Inspector and list the different export options. And then, whenever you need to re-export, hit cmd + Shift + E. Your export settings will now be saved, but you will also be given the option to export only one, or some, or all of the layers you have chosen.
6.Make your design collaborative with Libraries
Can other designers also use your symbols? Absolutely! Sketch Libraries are incredibly easy to use. All you need to do is to create the Symbols in a separate .sketch file, and then leave that .sketch file somewhere accessible, such as on Box, Dropbox or Google Drive.
Other designers can then import the Sketch Library into their Sketch documents by navigating to File > Add Library…. After that, symbols from that Sketch Library will be accessible via the usual Insert > Symbol method.
Sketch Libraries are a terrific way to enable design collaboration in teams. When the Sketch Library is updated, any .sketch file that’s using that Library will receive a notification requesting if you’d like to update the document.
7.Create your own Sketch shortcutsCreate your own Sketch shortcuts
You can create your own Sketch shortcuts. To set your own Sketch shortcuts, head to macOS Preferences > Keyboard > Shortcuts > App Shortcuts > +, and then choose Sketch as the Application and type the menu command you want to define a shortcut for. For example, “Collapse All Groups” (cmd + ctrl + C) is a useful way to quickly clean up your Layer List! Add as many shortcuts as you need.
8.Define measurements with maths functions
When specifying measurements with the Inspector, you can use maths functions to save you from having to do the calculations in your head. Say that you wanted a Rectangle to span the full width of an Artboard minus 20px on each side (i.e. a 20px margin), you could define the Width as “100%-40px”. With a 320px Artboard, the Rectangle’s width would then equal 280px.
9.Combine shapes with boolean operations
Boolean operations let us combine shapes to make new shapes.
Step 01: Creating two shapes
Let’s use a circle as an example here. You can combine as many shapes as necessary with boolean operations, but for now we’ll use only two. Create a circle, and then duplicate it (cmd+D) to create another circle. Make sure that they overlap, so that we can use one of them as a mask and see the effects.
Step 02: Select a boolean operation from the menu bar
As you can see from the Sketch menu bar, there are four boolean operations to choose from: Union, Subtract, Intersect and Difference. Union is the simplest of all the boolean operations, where the two shapes are combined to create a new shape.
With Subtract, one of the shapes eats into the other shape or shapes, subtracting from them. With Intersect, only the section where the shapes overlap will be visible. With Difference, it’s the complete opposite, only the sections where the shapes don’t overlap are shown. For simple shapes, this is often faster than creating them freehand using the vector tool.
Step 03: Make it clear which layer is the mask
As I said before, you can combine more than one shape with boolean operations. One of them has to be the mask, and this is the one that appears at the “bottom”, as indicated in the Layer List. Combined shapes act like a Group once combined, so whichever one is lowest in the hierarchy is the mask. You can reorder these layers to change which one is the mask.
Note: boolean operations technically consist of paths and subpaths, but the concept of masking might make boolean operations feel more familiar.
Step 04: Learn the keyboard shortcuts for quick-access
Naturally, like everything else in Sketch, there are keyboard shortcuts that you can use to access these boolean operations faster:
- Union: cmd + ctrl + U
- Subtract: cmd + ctrl + S
- Intersect: cmd + ctrl+ I
- Difference: cmd + ctrl + X
If you have one of the latest MacBook Pros with a Touch Bar above the keyboard, these tools are also available for quick access via touch as well.
10.Design handoff with the Zeplin or Sympli plugins
Design handoff is typically built into prototyping apps such as InVision and Marvel, but they are only available to teams with enterprise-level subscriptions. Smaller design teams (or solo designers) won’t need design collaboration on that scale, so dedicated design handoff tools, such as Zeplin and Sympli, might be more suitable.
You’ll have design hand-off and collaboration, but at the cost of prototyping features, which might be fine depending on the way you or your team does prototyping (because there are also paper prototyping and free tools, such as Craft).
Like most tools of this calibre, you can export screens from Sketch to Zeplin or Sympli using their Sketch Plugin. Both tools work largely the same way. With Zeplin, use cmd + ctrl+ E in Sketch to export screens; with Sympli, use cmd + Y.
Both apps let you tag screens for added searchability (useful for narrowing down screens in the handoff interface) and automatically collect image assets you’ve marked as exportable in Sketch, ready for the developer to implement them.
As with all competing tools, use the free trials and decide for yourself.
11.Maintain design consistency with Shared Styles
And finally there are Shared Styles, which are like Symbols but for layers. Consider your heading styles, button text styles, body text styles and so on – the styles that you’ll reuse time and time again. Shared Styles are created in the Inspector.
To create Shared Styles, select the layer in question and then click the ‘No Shared Style’ dropdown from the Inspector (or ‘No Text Style’ if it’s a text layer). Then, choose ‘Create new Text/Shared Style’ from the list of dropdown options, then give it a meaningful name (such as ‘Largest Heading’, for example).
Flexibility comes more naturally with Shared Styles than it does with Symbols, where you can simply change what you need to change in one instance of a Shared Style and those changes won’t sync with the other instances automatically. The change is a manual one, where you’ll need to hit the sync icon in that same drop-down menu.
By not hitting the sync icon here, you are making a singular change to an otherwise visually consistent Shared Style.
12.Live preview your designs with Sketch Mirror
When mobile apps and websites are designed to be used by thumbs, it makes sense to test them with thumbs, which is exactly where Sketch Mirror comes in very handy. We need this to bring our designs off the big screen, and onto the little screen.
With Sketch Mirror for iOS, you can preview your Sketch artboards on your iOS device. Click ‘Mirror’ from the toolbar, then select your device from the list of options. If you can’t see your device, make sure that you have Sketch Mirror open on your device and that they’re both on the same wireless network.
Tip: swipe right on the iOS Control Centre and tap the Record icon to record a user test or create a video demonstration, which you can then send to your teammates – or anyone else – in a quick message!
