Articles

Making the switch to Sketch

by Angus Tait

9 February 2017

This article was also published on Medium.com

The web is evolving at a rapid pace. This may seem like an obvious statement, but when your job is designing for the web, it’s important to acknowledge this pace rather than resist it.

For the last decade, Adobe products have been the mainstream design tools for both print and web designers. The downside, however, to being popular with a wide range of design-related camps is that it’s much more difficult to make drastic changes to a product without upsetting several of these camps at once. Illustrator, for example, is used by web designers, packaging designers, pattern makers, artists, illustrators and more. The specific needs of one type of user do not necessarily reflect the needs of all.

Recently, a wide range of almost single-minded apps have surfaced, focusing on the needs of one type of user to the exclusion of all others. There are apps specifically for providing handover documentation (Zeplin), for prototyping (InVisionFlinto), for creating brand guidelines (Frontify) and colour palettes (Open Color Tools), just to list a few. Smaller products aimed at niche audiences have lead to greater changes and much, much better design tools for the ever-changing web.

Sketch is another of these single-minded apps, and although it has been around for nearly seven years, it’s only in the last three that it has become a significant competitor to Adobe products as a web design application. The Subtraction.com Design Tools Survey of 2015 revealed that a majority of web designers are now using Sketch as some part of their workflow. This, along with a couple of major feature updates in 2016 made the case for switching to Sketch too compelling for us at Liquorice to ignore.

Sketch’s best features

With the general shift towards design systems (aka Atomic design) rather than page-by-page design, many apps provide some method of creating small, reusable design components to be dropped into different layouts  —  Photoshop uses Smart Objects, and Illustrator has Symbols. Sketch uses symbols too, but its major advantage is its ability to rapidly modify the content, size, and colours used within these symbols without the need for endless variations of a single item.

Sketch symbols separate design from content in a way that is analogous to the web. A symbol, like the progress indicator below, can have multiple instances within a document, each containing different text entries. Updates to any of the visual properties of the symbol will be reflected across all instances, but the content of each button remains as it was.

Adding content to symbols in Sketch, featuring the progress indicator module from Dokio

Also unique to Sketch is the ability to define the resizing behaviour of a symbol. An icon can be pinned to a corner, text can reflow, images can fill a space or scale proportionally.

Resizing symbols in Sketch, featuring modules from our recent design of VAC.org.au

Thanks to some recent updates to Sketch, along with these two blog posts, Sketch now has one of the best methods of any design app for maintaining large icon libraries. With nested symbol overrides, an icon can have a single vector master and any number of colour variants throughout the document. Updating the shape of the vector object in one place will update every instance of the icon, regardless of its colour. The same principle can be applied to other components like buttons and fields.

Changing colours with nested symbols, featuring icons and buttons from Dokio

Getting Started

Before jumping in to Sketch, there are a few things worth knowing about upfront. Firstly, Sketch is a Mac only app with no future plans for a Windows release. However, if this is only a concern for the developers on your team and not the designers, it is still possible to create excellent handover documents that can be viewed on the web, using apps like Zeplin and Invision’s Inspect tool.

Secondly, Sketch is at its best when being used for apps and websites that are heavy with interface elements. In other words, if it is your preference to design typographic based interfaces with little to no chrome, you may find Sketch a little more frustrating than Adobe CS.

Overall though, switching from Adobe to Sketch is a fairly easy transition. The app is simple and intuitive to use and after a few hours of playing around, you find yourself wondering why tasks in other design apps have become so complicated. There are, however, many hidden features and eccentricities of the app that are hard to discover and understand, so it helps to have a few resources to get started.

Sketch Documentation
The official documentation is a good place to start, especially to learn some of the more detailed functions like the pen tool.

Video Courses
Sketch’s Resource page has some great video tutorials.

Sketch app on Medium
Learning to use Sketch is not just about the app itself, but also about how you choose to set up and maintain your files. This Medium category is a great place to find advice on speeding up your workflow. Some particularly good ones: 

The Unicorn Workflow

Mastering the Bézier Curve in Sketch

10 Sketch Workflow tips

Plugins

Once you’ve got some idea of how Sketch works, you’re going to need a few plugins to extend Sketch’s functionality. Plugins are free and easy to use or create, which means there are hundreds available. Below are a few that I think are essential to begin with.

Sketch Runner
Sketch Runner makes it easier to find and insert symbols, especially once your symbol library starts to become unwieldy. It also helps you find and run menu items quickly, as well as making it easier to jump between artboards.

Craft by InVision
If you decide to switch to Sketch, InVision is going to be your best asset for creating presentations and handover documents. InVision also make a fantastic plugin called Craft, which allows you to pull dummy content like images and headlines into your symbols, as well as sync your Sketch doc to your InVision prototype.

Sketch Distributor
Sketch’s controls for spacing objects isn’t quite as good as apps like Illustrator and InDesign. The Sketch Distributor plugin adds some improvements for this function.

Symbol Organizer
You don’t know it yet, but your symbol library is going to get super messy in no time at all. This plugin makes it really simple to re-organise them very quickly.

All the other plugins
There are tons of other plugins available, and more are being developed all the time. If you feel like there’s some particular feature missing from Sketch, chances are that someone has created a plugin for it. 

* * *

Making the switch to Sketch has been one of the biggest improvements to my workflow that I’ve ever made. And while it is possible that Sketch may soon be superseded by some other app, this is the pace at which the web moves, and I look forward to writing that blog post when the time comes.