Getting Started in Sketch

Like many other designers making things for screens, I love Sketch as a tool to rapidly explore how content can be best visually presented in websites and apps, both in single views and in longer flows. At first, it felt awkward and weird coming in from designing mostly in Illustrator, but after getting used to Sketch, I’ve become a total convert and evangelist. I’m currently helping a few teammates to make a similar transition, so I wanted to document some resources for them.

📯 🎉📯🎉📯🎉📯🎉📯🎉📯🎉📯🎉📯🎉📯🎉📯🎉📯🎉

And thus, I proudly present:

Another Medium article about using Sketch.

📯 🎉📯🎉📯🎉📯🎉📯🎉📯🎉📯🎉📯🎉📯🎉📯🎉📯🎉

In this article, I will be covering:

  1. Some starter techniques and shortcuts to help smooth the transition if you’re coming from Illustrator (and also a few things I’ve learned about how designing for screens), in the form of a quick tour of the app
  2. Some useful plugins that make Sketch much more powerful

Why use Sketch at all? Here are a few reasons I love Sketch:

  • It’s specialized for screen design, so it leaves out the many, many obscure features that Adobe programs have to cover a million different design tasks. It’s not that Adobe programs don’t have their place, but having fewer, more specific features allows you to work faster on the task at hand. As a big plus, if a feature you expect to have from an Adobe program is missing, chances are, there’s plugin for that, because…
  • Sketch has a bunch of awesome plugins (more on this later).
  • Sketch makes very small files, compared to Illustrator and Photoshop. As a related benefit, you can make complex design files in Sketch with loads of artboards, and it rarely (if ever) slows down. In my experience, Illustrator and Photoshop start to really slow down my computer even on medium-sized design projects. Few things will slow down your workflow more than having to wait a few seconds for every operation to take effect, so if you’ve ever experienced this, you will love that Sketch has done away with this nightmare.

A few caveats:

  • Sketch is great as a tool for a few distinct parts an effective design process. It’s most useful to use in conjunction with other tools, like research, team communication, drawing, prototyping/coding. For me, it often sits somewhere between drawing and coding. Sketch allows me to ideas and “paint pictures” that allow me to discuss possibilities in a realistic way with teammates.
  • It’s not necessary in every design process. With the right coding tools and in the right projects, it sometimes makes more sense to move from drawing to coding.
  • As stated before, Sketch is mostly just for visually designing websites and apps. It tends to be nicer to draw illustrations in Adobe Illustrator, especially if you’re used to the drawing tools there. Sketch lacks many of the detailed typographic layout features available in InDesign. It’s not meant for editing photos, so if you’re doing lots of photo work, you’ll probably be happier in Photoshop. Sketch is not great for print design, because it operates only in RGB colorspace (not CMYK). It’s not meant for animation, type design, number-crunching, email, presentations, coding or the many other design tasks you might have in a design job. However, like the specialized tools that are awesome to use for each of those tasks, it’s excellent at the thing it’s made for (screen-based design) and will definitely help you to be more efficient and effective at it. Also, once you get comfortable with it, it actually is quite flexible, and you just might find yourself pushing it beyond screen design. For example, I made a set of animated stickers for iMessage because artboards and a few plugins were perfect for creating stop-motion animation, quickly and easily. I’ve seen it used for presentations, especially where most of the presentations have been mockups, already. Still, it’s super useful, for screen design alone.

Starter Techniques

Basic navigation & shortcuts

If you’re coming from a background similar to mine in Adobe-world, it’s probably second-nature to navigate around in Illustrator, Photoshop, and/or InDesign. You can zoom in and out and scroll around with ease, you can set up project styles like a pro, you use hotkeys to change modes far more than clicking on your tools, and you might even have your workspaces customized just for you (confession: I’ve never been great at that last part; custom workspaces always seem to reset on me).

If that’s you and you’ve tried Sketch, it was probably frustrating to suddenly feel like you’re hobbling around in an alternate reality, barely able to zoom efficiently or select the damn thing you’re trying to select, much less create and arrange shapes, type, and images. Fear not! Just learn the Sketch’s basic navigation and a few key shortcuts, and you’ll be zooming around in no time.

The basic navigational structure of Sketch consists of the Toolbar, Layers panel, Canvas, and Inspector panel.

Toolbar
The Toolbar holds quite a few of the tools and functions you’ll use in Sketch, and you can customize it by right-clicking (or control-clicking) on it. The simplest and most important is “Insert,” a menu that gives you access to Artboard-adding mode, vector and shape-drawing tools, the Type tool, image-inserting, Symbols (I’ll focus on these later), and Styles. Notice that several of the options in here have nicely-obvious hotkey shortcuts, including:

  • A for Artboards (you’ll probably use these even more in Sketch than in Illustrator, due to the emphasis on Layer organization and screen design)
  • T for Text
  • V for the pen tool (because the letter V is pointy)
  • R for Rectangles
  • O for ellipses (like the letter O)
  • L for Lines

Other options in the Toolbar are also very helpful, and many of them have handy shortcuts and mouse-based gestures which you’ll figure out as you go.

Layers panel

The Layers panel includes a view of your Pages and Layers.

Layers are super useful in Sketch, and you will most likely use them a lot more in Sketch than you do in Illustrator. Largely, this is because Sketch acts a bit like Photoshop, in that every new object goes onto a new layer, rather the same layer, as they do in Illustrator. This takes some getting used to, but it has two primary benefits:

  1. Have you ever had issues getting the correct stacking order of elements in a complex Illustrator document? Have you ever had to retroactively separate layers into separate layers? It’s not fun. In Sketch, you think about Layers more or less as you design, so these issues don’t come back to bite you as much.
  2. Thinking about layers and groups allows you to design in a way that is much more closely mapped to how a web page is actually built, with HTML elements in a strict sequential ordering, grouped by parent elements. You can construct things as if you were working with <div>s, and name important objects as you might with IDs and classes for CSS. If you happen to be sharing the Sketch document with a developer for a project, these decisions properly made up front will help later on. If you’ll be coding the finished product or a prototype of it yourself, it can be helpful to have thought about the structure visually, so you don’t have to imagine all of it in your head.

Pages can also be very useful. Most of the time, I tend to use pages for a simple way of “versioning” a project. I’ll design the relevant screens of an app or website on artboards in the Canvas area, and then when it’s a new day, I’m ready to try something different, or I want to clean up my ideas for a presentation or prototype, I’ll make a new page, then copy the latest-draft versions of each main screen. Doing this is simple:

  1. Show the page list, and add a page.
  2. Double-click the page to change its name (I recommend using the current date if you’re versioning).
  3. Select and copy-paste your chosen artboards from the old page to the new one.
Pages can be hidden, but they’re super useful.

Using Layers

Generally, it’s helpful to group elements into layers if they would be that way in HTML. If you’re not fluent in HTML, try to group elements so that they form components, then patterns. For instance, make a button by grouping a rectangle and some button text. Then, group this with a headline and a background photo to make a website leadspace with a call-to-action, like you’d see on a landing page. Do something similar for several other sections that you’re putting onto the same landing page. Then, you’ll be able to quickly and easily move these groups around to experiment with the ordering and layout of the landing page.

Naming layers and groups can be super useful, especially if you plan to export them to use on an actual website or app (like you would with icons), or if you want to make them into Symbols. To quickly rename a layer, select it in the Canvas or in the Layers panel, then hit command–r. You can even select the next or previous layers with tab and shift-tab. This becomes immensely helpful if you’re doing something like working with a bunch of individual artboards or icons to export (because the artboard or layer name will be the default file name, and you may as well name it well in Sketch, rather than correcting it in Finder later).

Other useful shortcuts are similar to Illustrator:

  • Group selected Layers
    Hit command–g to group selected layers
  • Ungroup layers inside a group
    Hit command–shift–g to ungroup a selected group.
  • Locking a layer
    Hit command–shift–l to lock a layer. This is something I use a lot less in Sketch than in Illustrator, though, probably because the forced-layering prevents you from accidentally selecting something, without needing to lock anything.
  • Move a Layer forward/backward
    To move a layer forward or backward, which is really up or down in the layers list, hit option–command–⇧ or option–command–

Canvas

The Canvas is, like Illustrator, where you design. Unlike Illustrator, the Canvas is infinite: you’ll never have to worry about whether an artboard will overflow the side of the Canvas. This allows you a new way of iterating on designs that is very freeing. The basic technique I follow is something (I think) I learned through the excellent podcast, Immutable:

  1. As you iterate on a single screen design, duplicate each main design change to the right.
  2. As you make new screens in a user flow or an app hierarchy, make each artboard on a new row, and then iterate that.
  3. As mentioned above, if you decide to make another major version of your designs or if you want to prep a presentation or prototype, copy your right-most artboards, and paste them into a new Page.
Artboards are great for iterating on designs. Use this basic framework and you’ll up your iteration game.

Navigating the Canvas

One of the biggest frustrations in first using Sketch is that it seemed to lack some of the navigational gestures that had become second-nature to me. However, they are almost all there. Here are the big ones:

  • Scroll to zoom
    In Illustrator, Photoshop, and InDesign, this is Option-Scroll. In Sketch, this is command–Scroll. You can also pinch-to-zoom on a trackpad if you want to get carpal tunnel by 5 pm. Sketch zooms in the opposite direction of the default in Adobe apps, and sadly I don’t know if this can be changed. Luckily, the human brain is incredible at adjusting to new conditions, so you’ll get used to this pretty quickly.
  • Select the item you want to select, through Groups
    If you’re grouping elements (good job!), you might have a bit of friction in clicking on the element you want to select. You can keep double-clicking to get to it through layers, or you can hold command while you click, and it’ll select exactly the item you click on.
  • Select many items you want to select, through Groups
    Want to click-and-drag to marquee-select many items at once? Easy. Just hold command and shift as you drag to select multiple items, and it’ll select them through and across different layers. This can really come in handy if you’re design something complex like a table, where you may have made groups out of each row, for quicker layout and a more-sane Layer panel.
  • Select the item you want, if it’s covered up by another layer
    Sometimes you may have a text element or semi-transparent layer covering the actual layer you want. In this case, right-click where the layer you want is, then use the option Pick Layer > to pick your layer.
  • Go to 100% zoom (do this frequently to make sure your layout is realistic)
    Hit command–0 (zero) to make sure you are using type sizes that are too tiny to read. This is especially essential if you’re designing on a big external monitor.
  • Show all artboards within the current page
    Hit command–1 to show all your artboards.
  • Make the current artboard zoom to fit your visible Canvas
    command–2. Pair with fn–⇦ and fn–⇨ to move to the previous or next artboards, so you can compare two variations of a design between two artboards or progress through a user flow.
  • Turn on rulers/guides
    Use control–r to turn on your rulers. These work a little different than guides in Illustrator, but mostly, this is nice because they snap to selected objects, and stay within your current artboard, rather than forcing themselves on the whole rest of your design space.
  • Turn on “layout” view (columns)
    Use control-l to show columns. You can set these up View > Canvas > Layout Settings… and they can help you if you’re working with a column-based layout.
My worn-down command key shows how much I’ve used Sketch, as well as how useful the command key is in Sketch. Please excuse the keyboard cruft of a daily-use MacBook.

Inspector panel

The Inspector panel holds a lot of functions, because it always displays options that are contextual to whatever you have currently selected. This always includes alignment, position, sizing, and basic transform options. Depending on whether you’ve selected artboards, shapes, or text, it also includes styles relevant to that element. If you’re familiar with visual design basics, most of these are pretty self-explanatory. A few handy shortcuts here:

  • Small nudges and big nudges
    Use arrow keys to “nudge” elements around by 1 pixel. Hold shift to nudge elements around in 10-pixel increments (see the plugins info below for a handy plugin to adjust the big nudge increment).
  • Resizing in small nudges and big nudges
    Hold command while using arrows keys, and you’ll adjust the size of an element by 1 pixel. Hold shift, and this will work in 10-pixel increments. For small to medium size refinements, this is often much faster than clicking and dragging, or typing in exact sizes. Combine it with nudges, and you’ll quickly become more efficient at precise layout.
  • Checking distances between objects
    This one is really cool: hold option while you have an element selected, and position your cursor to hover around the element. You’ll get to see the exact pixel distance between this object and others nearby. You know how you can make this more precise through groups? Yup, hold command as you’re holding down option, and you’ll measure the distance to whatever exact object you’re hovering over with your cursor.
  • Using an eyedropper to quickly copy a color
    Hit control–c to eyedrop fill colors.
  • Toggle an element’s border
    By default, every new shape element has a light-gray fill and a medium-gray border. To toggle off/on the border, hit control-b.
  • Toggle an element’s fill
    Hit control-f.
  • Crop an image
    Sometimes, you need to quickly and easily crop an image. To do this, double-click an image, drag a marquee selection, and then use the crop icon in the Inspector. Usually, however, it’s better to group that image with rectangle layer, put the rectangle behind the image, and then right-click the rectangle layer to make it a mask. This way, you can still edit the sizing and positioning of your image, if you want to adjust your layout.
  • Color adjust an image
    If you need to make an image black-and-white or edit its colors, you can do that in the Inspector panel. This is non-destructive: simply uncheck the “Color Adjust” options, and your image will go back to normal.

Exporting from the Inspector panel

The Export feature in Sketch is simple to use and super efficient. Simply select the layer(s), group(s), or artboard(s) you want to export, click “Make Exportable” in the bottom of the Inspector panel, configure the export settings (including whether to export to multiple formats at the same time), and click to export.

Symbols

Symbols are another one of the “killer features” in Sketch, and they’ve gotten better and better as new versions of Sketch have been released.

At their simplest, symbols are layers or groups that have a “master” version. This allows them to be placed in many different instances within different parts of a design, which will all automatically update if the master version is edited. What’s more, each instance can have specifically-overwritten properties, such as the content in text fields. As you can imagine, this is very useful for small components like buttons, and even more useful for larger components like nav bars that appear on many pages within a user flow.

Creating a symbol is easy. Let’s use the example of a button:

  1. Make a rectangle the size of a button, then put some text on top of it.
  2. Select both layers and hit command–g to group them.
  3. With that group selected, hit command–r to rename the group. It’ll be useful to name it something like “button/red” (so, name the basic type of symbol, use a slash, and then describe the basic variation you’ve made). Naming elements like this will help them to sort into a hierarchy of symbol types, which is super useful once you’ve made more than a few symbols. Rather than having an unorganized list of 25 symbols, for instance, you can have “folders” of symbols like “button,” “icon,” “pattern,” etc.
  4. Right-click the group, and click Create Symbol.
  5. To insert this symbol, go to Insert > Symbol, and then select the appropriate symbol.
  6. To edit the symbol, either double-click an instance of it, or use the “Pages” area of the Layers panel to go to the “Symbols” page. Make any edits you want to, and they’ll reflect across your whole document.

Symbols can even be “nested,” so that one symbol can contain other symbols. In the example of a nav bar, this is great because you can include a button in a nav bar, and edits to the button will flow through instances of the nav bar. This can get pretty complex if you really start to use nesting to its full potential, so I won’t go too deep into it here. If you want to really stretch how you’re using symbols, check out the Medium article “This is, without a doubt, the coolest Sketch technique you’ll see all day.” Before you do that, though, try to make sure you know your way around Sketch, because it goes pretty deep.


Plugins are your friends

Sketch has awesome plugins. They allow Sketch to fit your needs and fill in the gaps when you need a that one feature you really miss from Illustrator, etc. There are loads of Sketch plugins, but I’ll use this article to document the ones I have found most useful, so far.

Quick aside: how to add a plugin to Sketch

I was a little confused about installing Sketch plugins, at first, simply because I wasn’t very used to this action in Adobe programs, and it felt somehow foreign to extend design software. Luckily, it’s super easy to do:

  1. Go to its GitHub page, then download it as a ZIP file
  2. Find the ZIP in your downloads, and double-click to open it, then double-click the file ending with the extension .sketchplugin. That’ll install it. Simple!
Download a plugin from GitHub
Double-click to install. Nice!

Useful Plugins

Add a handy global color palette

Use Sketch Palettes to load in a file of colors, and always have the colors you need, preloaded into “Global Colors” in the Inspector panel.

If you want a nice set of colors to try this out with, you can use the color palette from IBM Design. Just save that file (make sure you include the file extension .sketchpalette) and then load it with the plugin into Global or Document colors, depending on whether you want it in every Sketch file or just your current one.

You can also save new color palettes you make, and load those in later or share them with teammates.

Produce better annotated mockups (AKA “redlines,” but not so mind-numbingly hellish to make or use)

In the ancient days of web and app design (about two years ago), it was commonplace for visual designers to spend hours “redlining” mockups: creating a separate layer over each screen, and including red lines and text specifying the font names, sizing and spacing of elements, and hex values of colors. It was mind-numbing work, and as often as not, left out key information and resulted in only half-accurate development. This wasn’t the designer or the developer’s fault, but more a result of an inherently lossy process.

Of course, the most accurate solution for this is unicorn visual designers that can also efficiently write front-end code, but usually, people involved in either process specialize in one skill or the other. Other times, there’s just a lot of work to do, and it’s faster to specialize. Especially if you’re working remote, you need a way to communicate better than redlined mockups.

Use Sketch Measure to create interactive mockups in the form of static websites, which allow you to show designs to a developer in a way that they can click on items to see the information they need, like sizing, fonts, color hex values, and spacing. Of course, you’ll still want to include notes that can guide the viewing through your mockups, and you may even want to add measurements for a few specific items, but Sketch Measure has a handy system for that, too.

When you use it, all the artboards on the current page will export into a folder that is a simple static site.

A few helpful tips for this:

  1. Make a separate page in a Sketch document for your annotations.
  2. Use “Mark Note” to actually make notes about interactions, or things that wouldn’t be obvious to someone else looking at your mockups.
  3. Make your first page a “How to use these specs” page, in case someone is using this type of spec for the first time (kudos to Mallika Simone, an awesome designer and former UX design teammate, for this idea).
  4. Name your artboards sequentially to make sure they sort in a logical user flow.
  5. Bonus: host your interactive on GitHub pages, so you can send out the link, then update the site as you iterate on the designs, rather than constantly sending new ZIP files to your teammates.
Make a “how to use this” page to greet people who haven’t seen this before.
Orient your flow in artboards by naming them sequentially, to make sure they sort into a sensible user flow.

Duplicate objects quickly / Use a shared team library of components and styles / fill content from the internet, an API, or JSON

Use Craft, by Invision to do a bunch of useful, time-saving things. Their website describes it better than I could. And, maybe someday, the “Prototype” part of it will become a reality. Until then, use Origami, Framer, Invision, or code to make what you need. But seriously, it’s still pretty cool to be able to duplicate an object perfectly or to fill text areas with text from the web. I haven’t actually used the “Library” part of Craft much, but this seems like it is quite useful for larger teams.

Use a “Spotlight”-like search bar to run any plugin or menu action, go to any page, insert any element or symbol, create a symbol, or apply any style

Use Sketch Runner like MacOS Spotlight or Alfred, right inside Sketch. If you ever find yourself using a repetitive action that doesn’t have a preset shortcut (or if you ever forget an action’s shortcut), Runner will save you lots of mousing around.

Run any action with a hotkey and a typed command. Run the last action again with just a hotkey and “Enter.”
Insert shapes or symbols, really quickly.

Select layers with the same attribute

“Select Same…” is a super useful tool in Illustrator. In Sketch, use Sketch Select to do something similar. As a bonus, it allows constraining the selection to just the current artboard, or to use it across all artboards in the current page.

Unlock all Layers

Sometimes, you might have a bunch of locked layers. Illustrator has a shortcut for this, and with this Unlock All Layers plugin, so does Sketch.

Export better SVGs

SVGO is a really useful Node.js tool that can be used to optimize SVG files from the command line, or through the wonderful SVGOMG tool online. Now, Bohemian Coding, the makers of Sketch, have created a plugin to allow for optimizing SVGs right in the export process, with their SVGO-compressor plugin. If you want to edit any of the default settings, you can do so in a JSON settings file. I found it useful to add the following code, to round decimals to two places:

    {
"name": "convertPathData",
"params": {
"floatPrecision": 2
}
},

Find and replace text

Another Illustrator/InDesign essential. Use the Find and Replace Text plugin to do what it says.

Select all instances of a given font

Sometimes you need to replace a bunch of instances of a font, without clicking a thousand times. For this, use Font Finder.

Check a font, and it’ll select all instances on the current page. You can then select a new font to update all selected layers.

Change your nudge distances, change your life

For screen design, the magic number is 8, not 10. Luckily, nudg.it allows you to adjust your big and small nudges to be whatever units are most useful. Most often, I use 8px and 1px.

To learn everything else, there are the docs:

In conclusion

You can probably tell I’m a fan of Sketch. Using it has made me a better designer (cliché but true), saved me lots of time, and allowed me to have a lot of fun on tasks that might have otherwise been frustrating. It’s not perfect, and it occasionally has annoying qualities all its own (I’ll probably always wait a few days to update to the newest versions, after a few painful bugs I’ve experienced). Still, overall it’s a great app. Give it a shot with your next screen design project! 🤘

Did I leave out any essential Sketch tips or any must-have plugins? Is there a better getting-started-in-Sketch article, or have you written your own? Do you have a perfect Spotify playlist to jam out to while making elaborate table designs? What techniques do you recommend Sketch newcomers learn next? I’m still learning new things all the time, so please let me know in the comments!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.