So, you think you can Sketch?

9 min readNov 4, 2016

If you’re new to the world of digital design, Sketch is the best tool for screen design on the market. We do a lot of mobile and web design work here at infinum.co and Sketch fits right into our workflow. It’s fast but powerful, and you can learn the basics in a few days.

Mastering Sketch takes a bit longer, and that’s what this article is about. In this piece aimed at veterans and newbies, I’ll go over some practices and tips that will make you a better Sketch user.

Organizing your Sketch file

If you take anything away from this post, it should be this. Leave no messy files behind. Doing so wastes your developers’ precious time and you’ll hate yourself if you have to do some maintenance on your design files a few months down the road.

Use pages

Start by dividing your design into pages. Pages live in the left sidebar of Sketch and are hidden by default. Expand the menu to add extra pages.

I recommend keeping every major part of the app/website in its own page while dedicating a special page for styles.

BONUS TIP TIME: Create a style page in the wireframing phase. That way you can easily apply style changes across the entire design later on.

Name your artboards and layers

Naming your artboards allows you to export them in the exact order you want. It also makes things easier when browsing exported screenshots.

I name my artboards in the following format: 0X.0Y (X being the page, and Y the position of the artboard on that page).

Let’s say I’m working on the 01. Tasks section of the app. I’ll name my artboards like this:

For overlay screens I append a, b, c etc. to the end of the artboard name.

On the other hand, naming your layers will ease up navigation inside your file. Best time to do this is right after you create a layer. I know it’s a pain in the ass, but you’ll thank yourself later.

BONUS TIP TIME: You can also add a foldername/ prefix to your artboard name to automatically create folders when exporting.

Shared Styles and Symbols

Styles and symbols are one of the best things in Sketch. This is where our dedicated page for styles will come in handy. Also, from Sketch 3.7 onward a page containing all of your symbols is created automatically.

Shared Styles

Shared Styles are applied to layers. Modifying a style on one layer affects all the layers with the same style applied.

Setting up a Shared Style is straightforward.

Select the layer whose properties you want to save as a style
Click on “No Shared Style”
Select “Create New Shared Style”

Don’t forget you can make changes to a style without applying them to all layers who share that style. This makes it really easy to try things out without messing up your file. If you like the change, click on the “refresh” icon to apply it to all layers with this style.

Symbols

A symbol is technically a group. You’ll notice the difference to a regular group when trying to modify a symbol. Changing one symbol affects all instances of that symbol. Similar to styles, but with much greater consequences.

Symbols got major upgrades in the latest Sketch 39 update. It’s now possible to resize symbols without affecting other instances of the same symbol. Also, you can define how each layer inside of a symbol or a group behaves when resizing. I’ll cover that in another post.

For now, let’s create a symbol out of a group.

Select your group
Click on “Create Symbol”
Click OK

Now you can easily edit your symbol and have changes propagate through all other instances of that symbol.

BONUS TIP TIME: You can root symbols by using prefix rootname/ when naming them. For instance, button/blue and button/green. You will be able to access both buttons from one symbol.

Bounds

Bounds are layers used to standardize dimensions of your design elements. I primarily use them when designing icons and list items.

Let’s set up some bounds.

Create a new style with 0% opacity Fill and name it “Bounds”
Create a layer with desired dimensions and send it to the back of the group
Set that layer style to “Bounds”

When using bounds in list items you get perfectly sized groups that are easy to arrange in long lists. If you add bounds to your icons they will all have same dimensions. This makes things easier for you when exporting and for developers when implementing your design.

Shortcuts

You’re not a real Sketch master until you hate to use the mouse while working. Shortcuts are the bread and butter of every power user. You’ll get more done in less time.

Increase/decrease layer size

⌘CMD + ⬆️ / ⬇️ / ➡️ / ⬅️

My absolute favorite shortcut in Sketch. Easily change the size of any layer with your keyboard. Be precise or add ⇧SHIFT and go 10px CRAZY.

Copy/paste style

⌘CMD + ⌥ALT + C/V

This one doesn’t seem as much but it can really improve your workflow. It’s especially useful when applying styles to a large number of layers.

Paste in place

⌘CMD + ⇧SHIFT + V

This shortcut enables you to paste a layer from your clipboard on the left top corner of the selected layer.

Move layers up or down in the layers list

⌘CMD + ⌥ALT + ⬆️ / ⬇️

BONUS TIP TIME: To move layers to the top or bottom of the layers list just add ⌃CTRL

⌘CMD + ⌥ALT + ⌃CTRL + ⬆️ / ⬇️

BONUS BONUS TIP TIME: Move to top won’t work if you have Skype open. I don’t know why is this happening but I’m thinking about leaving Skype behind.

Setting up custom shortcuts

So, we’ve covered some pretty cool default shortcuts and I know its a lot to remember, but now comes the sweet part. Custom shortcuts. If someone doesn’t believe you’re a Sketch master, just tell them you’ve got custom shortcuts set up, bro!

First, let’s learn how to set up custom shortcuts:

Go to Keyboard -> Shortcuts -> App Shortcuts
Press that “+” button
Select Sketch.app
Input desired Menu Title
Press desired key combination

Now, let me show you a few of my favorite shortcuts.

Align items

Before we start I’ll warn you, this will include 6 (!) shortcuts. First, we need some menu items. Find them under Arrange > Align objects:

Do the steps we outlined before for “Left”, “Horizontally”, “Right”, “Top”, “Vertically” and “Bottom” menu items.

Key combinations I recommend are:

⌘CMD + ⌃CTRL + 1(Left) / 2(Horizontally) / 3(Right) / 4(Top) / 5(Vertically) / 6(Bottom)

After you’ve suffered through all the pain of adding 6 (!) shortcuts, you’ll be able to do this:

It will take some practice and finger gymnastics, but once you get a hang of it, you won’t go back.

Round to nearest pixel edge

There is a neat command in Sketch that aligns shapes and layers to the pixel grid. Unfortunately, it doesn’t have a keyboard shortcut by default.

To set it up as a shortcut, repeat the same steps from above but use “Round to Pixel” as your menu title. For the shortcut, I use:

⌘CMD + ⌥ALT + K

Plugins

As awesome as Sketch is, third-party plugins make it at least 1.69 times better. Plugins you’ll use really depend on what type of a designer you are.

Before we get started, there’s a tool you will love. Sketch Toolbox makes finding and managing your plugins a breeze. Download it here.

Crystal

While technically not a plugin, it is so important I decided to include it. Crystal is an Android app that enables you to preview your designs live on your device.

For all Android users, this is a life saver. It has built-in scaling and works over Wi-Fi.

You can download Crystal here. If you want to send designs to your device through USB as well you’ll have to download the Mac app.

Sketch Better Android Export

This plugin will save you a lot of time when exporting for Android. No more slicing, setting up scaling factors and suffixes. Just select a group/slice/layer and this plugin will magically scale your assets and put them in the right folders.

Download it here. Note that this plugin works best if you design in 1x, but you are designing in 1x. Right?

BONUS TIP: You can export to the same folder multiple times and the plugin will merge new files with old ones.

Craft

Craft enables you to add real, meaningful data to your designs by inserting real articles or headlines as placeholder text. It’s also possible to insert user created image libraries or category specific Unsplash photos as placeholder images. There are also some handy features for duplicating content. Last but not least, you can generate a dedicated style page with all of your colors and fonts. Download it here.

Distributor

A small plugin I use mostly on my artboards. Just press ⌥ ALT + ⌃ CTRL + D and choose how would you like to distribute layers/artboards.

Download it here.

BONUS TIP TIME: Repeat last used spacing by pressing ⌥ ALT + ⌃ CTRL + A

Zeplin

Zeplin is an awesome tool for transforming your designs into interactive spec documents. This plugin also requires you to have additional software installed on your Mac. Developers can access the web version and admire the beauty of your designs without Sketch or Zeplin installed.

This tool really transformed how we at Infinum work with developers. Just make sure your file is well organized and they’ll have no problems reading element spacing and sizing. Color, font size, and line height issues are a thing of the past. Download Zeplin here, and its plugin here.

BONUS TIP TIME: Press⌥ ALT to see all measurements in percentages.

We started using Sketch after Adobe discontinued Fireworks. At first, we had our doubts but Sketch’s speed, simplicity, and great customer support won us over. Although there are some nasty bugs in the last versions (please fix color picking on the external monitor, I beg you), Sketch still remains my preferred way to do screen design.

And that’s it! Hopefully, you’ve learned something useful and don’t hesitate to leave your tips and tricks in the comments!

Originally appeared on https://infinum.co/the-capsized-eight