A comprehensive guide to using the design and prototype software Sketch. Diving into areas such as Sketch's interface, artboards, layers and styling, smart guides, vector editing, additional plugins and much more, you'll be creating beautiful user interfaces in no time.

Jump Start Sketch

Preface

It’s often said that the best user interfaces are invisible, or “the best interface is no interface”. A feature that simply works by itself—without requiring interaction with the interface—is the ideal approach to completing an action, while those that require several interactions are less than optimal.

Sketch’s Interface

In comparison to Adobe Photoshop, layers in Sketch tend to feel quite tangible—as if you could effortlessly mold them into shape with your fingers. Point-and-click actions are very smooth, even though keyboard shortcuts make up most of the interactions, and styling layers is a total breeze from start to finish.

Artboards, Layers, and Styling

You might be familiar with Cascading Style Sheets (CSS), the coding language that developers use to style websites. Sketch’s own styling deeply resembles CSS, and as we saw in Chapter 2, Sketch can even convert its own styling into CSS for us.

Shared Styles and Symbols

At the beginning of Chapter 1, I spoke briefly about invisible interfaces and how Smart Guides are an excellent example of that. Smart Guides inform the user of the distance between the current layer and another layer while moving it, or upon request by using a keyboard shortcut. With the exception of this keyboard shortcut (which is simply option ), Smart Guides appear whenever Sketch thinks you need them—which is basically whenever a layer is in transit (i.e. dragging, moving or nudging).

Smart Guides and Snapping

Layer manipulation falls into two categories: vectors and bitmaps . Vectors can be scaled to any size without losing quality, making it easy to export a design multiple times in different sizes—for example, when you need to support both Retina and non-Retina screens. The same, however, doesn’t apply to bitmaps. You may be able to scale bitmaps down in size without losing too much quality, but you certainly won’t be able to scale them up.

Vector and Bitmap Editing Tools

Rulers and Grids help us to measure layers and distribute them steadily, which is an important step to take regardless of what you’re actually designing. Many web designs are required to obey a strict layout for consistency, especially modular layouts and websites that will eventually be coded using a CSS framework such as Bootstrap or Foundation—and that’s where Layout Grids come in handy. For icons and logos, Layout Grids wouldn’t be suitable. Instead we’d use the much simpler Regular Grids.

Rulers and Grids

In this chapter, we’ll take a look at two things: previewing designs on real devices, and exporting image assets when we’re finally happy with them. Previewing can be done in two ways: either with Sketch Mirror, an iOS app that mirrors your Artboards to your devices, or with Local Sharing, which allows those in your team to view Artboards on their own desktops and devices—as long you’re all connected to the same local network.

Previewing Artboards and Exporting Assets

Plugins are add-ons that extend the capabilities of Sketch far beyond what’s natively available. Some of these slightly improve the user experience of repetitive tasks, and others integrate with external services such as Slack (for sharing designs with your team) and various prototyping apps such as Zeplin, Marvel, Framer and so on. Essentially, they make you more productive by allowing you to create a customized workflow that suits you .

Plugins

Sketch’s approach to keyboard shortcuts is revolutionary for a desktop graphic application. Adobe apps are well known for their bloated (and seemingly impossible) keyboard shortcuts, but Bohemian Coding’s decision to keep Sketch focused only on vector and user interface design has resulted in fewer tools, and therefore easier shortcuts—some of which consist of a single keystroke.

Community Questions