Since writing about all the neat little tricks I’ve learned while using Sketch, I’ve had conversations with other designers who are unsure of where to start. Here’s what I do to set myself up for a new project in Sketch.
This guide is focused on people who are just starting out, so it may be a little basic for those that have already dabbled.
Using shortcuts.
Sketchshortcuts.com — keep this open and reference it constantly. Here are some of my favorites:
command + 1 = zoom out to entire canvas
command + 0 = actual size
z + click and drag = target zoom
command + G = group all selected objects into a folder
Start a style guide artboard.
This is where you’ll start collecting all your common UI elements. It’ll be pretty bare in the beginning — but it’ll help you focus on consistency in your app. And, it’ll be a great place to find any UI elements you’ve already crafted. To start you off, I’ve prepared a sample basic template here:
download: StartingTemplate.sketch
Another important thing to note is file organization. With Sketch, everything should be in the same file. This may freak you out if you’re an Illustrator or Photoshop user but, trust me — it’s the way to go. You really reap the benefits of using layer styles, symbols, and text styles if you keep all your screens in the same sketch file. I’ll explain how to create these once I get through the file structure.
Create a new page for each Epic.
(in agile it’s what we call the major components of the application).
Within those Epic’s set up artboards for each screen flow.
I tend to do flows sequentially from left to right. You can put different screen sizes on a new row or you can try reserving that space for things like edge case screens or other variants from the main flow.
From there you can do a few things:
Set up your grids (by going to View -> Canvas -> Layout Settings):
Create some basic text styles by selecting a text layer and choosing the text style dropdown on the right menu bar:
Start setting layer styles for common simple objects. Buttons are a great example:
Then, you can start thinking about what objects you’d be repeating throughout your system. You can create symbols for repeatable UI elements (like a footer or nav bar). Change one object and have all the other instances of it updated everywhere in your file? Yes please.
To create a symbol, select an element and hit the create symbol button on the top bar. You’ll notice it highlight in purple, and then you’ll be able to name it:
And don’t worry — if you don’t want to use symbols right away you can fix it later. Check out tip #3 that outlines symbol swapping, in another article I wrote.
And finally, exporting your screens and assets.
If you’re going to export images, select your artboards (click on the artboard name in the layer menu or on the title above the board) and hit the export button in the bottom right of the screen.
Or, start a Zeplin project and publish your screens when you’re ready to share them. Zeplin is an awesome tool that bridges the gap between design and development. It helps you hand off designs to a developer, and easily allow them to look up things like font sizes, padding, colors etc. that they’ll need for front end development. You can learn more about how to use Zeplin here.
Some thoughts after 2 years of using Sketch:
- Snapping to grid + general alignment hints are a huge time saver. Most applications have adopted this but it just feels better in Sketch. I think they’ve perfected it.
- Artboards and pages produce a robust workflow. Organizing your UI elements and screens, as well as exporting out of Sketch relies heavily on this base level structure. You’ll save yourself time if you embrace this concept.
- You’ll still probably leave the fine tuning to Photoshop or Illustrator. Although Sketch has some bitmap editing tools, if you’re going to touch up a photo it’s just easier in PS. The vector tools on the other hand are quite great, but if you’re drawing something with a large number of different points and paths (like a complex icon) then Illustrator might be your go to.
- Plugins are amazing. I’ve found that every designer has different needs — and the option to customize your workflow is extremely important. Now that Sketch has become widely popular, you can find a plugin for almost anything you need.
To finish things off, I’ve made a sample sketch file with all my concepts:
download: Scotch and Smoke.sketch
Note: You’ll need to download the Majesti Banner typeface to get started.
That’s all I’ve got! I hope it’s helpful to get you started with Sketch.
Thanks to my colleagues at Pivotal for their feedback and in particular Misha and Leslie for spending time pairing with me. And thank you Donna for being my grammar gurl.
Get Started with Sketch in 5 minutes. was originally published in Built to Adapt on Medium, where people are continuing the conversation by highlighting and responding to this story.
