Intro to Sketch

Sketch is a leading app for digital design prototyping and wireframing. It’s very quick to learn and easy to use, allowing for seamless web and app design workflows. I made the leap and transitioned to Sketch from Photoshop two years ago and I could not imagine going back. Things that are so tedious and time-consuming in Photoshop are barely noticeable in Sketch.

“Sketch was voted App of the Year by NetAwards, and most used Wireframing and User Interface Design tool on a survey responded by 4,000 designers, dethroning the almighty Photoshop. While Sketch just started to see a meteoric rise over the past year, it’s been around for more than 4 years. The team is small and listens to feedback. Most importantly, it has one of the most vibrant communities I’ve seen.” —

If you’ve never used Sketch before, there are a lot of tutorials out there on getting started and becoming familiar with the workspace and basics, here are just a few:

Sketch App Tutorials by LevelUpTuts [free] (this is for Sketch 3, but many basics have not changed)

Sketch’s own Learn Center [links to free and paid tutorials]

Lynda Tutorials [paid]

11 Tips for Prototyping with Sketch by InVision Blog [free]

Sketch App Tutorial Series by Marc Andrew

The rest of this article will focus on some of the key features with the assumption that you have some knowledge of the workspace and how to perform simple actions (drawing shapes, setting type, creating an artboard, etc).

Key Features

Often designers are hesitant to make the switch from Photoshop (or other app) to Sketch but there are many reasons to take the leap. Below are some of the key features that make Sketch a gem.

Light Weight

It’s important to note that Sketch is very lightweight, taking up 41MB in disk space, compared to Photoshop’s 1.6GB. Does your Photoshop always crash? Sketch might save you some frustration.

Artboard Management

Sketch allows you to work seamlessly across multiple artboards of different sizes and provides pre-set artboard sizes for most common formats. It also allows the user to create and save custom artboards.

Grids and Layouts

Creating and following grids is easy with Sketch. Go into Window > Layout > Canvas and enter the desired measurements. Once grid templates have been developed, the designer can simply copy and paste the artboards from the template file into their working design file.


One of the best selling points of Sketch is the symbols feature, especially after the recent update which allowed for nested symbols. This feature lets you to create linked UI elements throughout your file (and across files by copy +pasting). This is useful for repeating elements such as icons, forms and cards pretty much most UI elements because you only have to change it in one place. Here’s how it works, big picture.

Let’s start with an icon. Simply select the icon unit and click the Create Symbol button in the top toolbar. If you don’t see the Create Symbol button in the top toolbar, right click on the toolbar and select Customize Toolbar.

After you create the first symbol in a file, you’ll notice a Symbols page appear under the Pages panel on the left. This is where the symbols are collected. To insert an already existing symbol, click the Symbols button in the toolbar and select the symbol you want.

Creating an icon Symbol

Sketch has recently made it possible to nest symbols within other symbols. Symbols inception is here; you can now have a Leo symbol within a Leo symbol. Here we have the search icon symbol we just created nested within a search bar symbol.

Creating a search bar Symbol with a nested Icon Symbol

We can also copy symbols within the Symbols page to create different UI element states. Tip: make sure to keep the naming schemes well organized.

Creating Symbols for different UI element states

Symbols have overrides such as image, text, opacity, blending, and shadows. This is most often used for changing text within UI elements (search bars, forms, cards).

Overriding Symbol text

Cards are a great usecase for symbols as well. You can keep exact properties of each card and control any changes top-down.

So what happens when you change the properties of a symbol? Here we can see the color of the search icon update automatically in every place it is linked.

Changing a nested symbol within a symbol

You can change complex symbols, such as cards, and see all of the linked symbols update in your layout within a blink of an eye.

Modifying complex symbols

More resources on Symbols:
Sketch — Symbols
The power of Symbols

Sketch Plugins and Resources

Sketch has a great collection of plugins, which makes it much more flexible than just the core app and gives it an open-source ethos. Sketch might not have that one feature you’re thinking of, but chances are, someone wrote a plugin for it. Check out the Sketch plugins list. You can find Sketch resources here. You can easily manage extensions via a desktop app (made by Sketch) called Sketch Toolkit. Here are a few particularly useful plugins:

Craft (by InVision)
This is one of the best one stop shop plugins Sketch has to offer. It’s more like several plugins in one: Photos (import photos from cloud hosts or the internet), Type (create and place dynamic text), Duplicate (like Step and Repeat in Adobe), Styles (the most useful in my mind — lets you create UI kits and run global styles across multiple files / users), Craft Manage (manager app for the whole plugin) and Prototype (coming soon).

Color Contrast Analyzer
Tests the contrast legibility of elements.

ColorOracle (cheating here, this is not a plugin)
I’m disappointed to say that there is not yet a plugin for color blindness testing. Using ColorOracle is the best solution in the meantime, along with Sim Daltonism.

Dynamic Buttons
Lets you create flex width / height button elements that change depending on text length.

Seamlessly add placeholder text and images to your layouts.

Sort Me
For sorting layers and artboards to stay organized.

Select Similar Layers
Allows you to select objects by color, opacity, font and size. Great for changing a single color in an entire layout.

Find and Replace
Sketch doesn’t have this native command, but there’s a plugin for it!

Sketch Mirror
Allows you to preview your screens in a browser in real time.

Font Awesome Sketch Symbols Sketch Resource

Exporting CSS Values with Zeplin Integration

Another huge pro about Sketch is the integration opportunities. Say goodbye to manually annotating CSS values, type styles, padding and sizing. There are a few different apps for exporting CSS values from Sketch, one I’d like to highlight is Zeplin. It integrates with Sketch via a plugin. Once the plugin is installed, you select the artboard and go to Plugins > Zeplin > Export Selected Artboards. You will then be taken into the Zeplin desktop app. You can see in the image below how all of the properties of each element are generated as CSS.

Zeplin generates CSS values for all elements in the layout

You can also leave comments in Zeplin to indicate interactions and give other notes to the development team.

Zeplin lets you add notes to layouts

Some resources:
Sketch and Zeplin: Helping Designers and Developers Collaborate

How I Fell in Love with Zeplin for Design & Dev Collaboration

Other similar apps:

Exporting Assets

Exporting assets is fairly intuitive. After selecting an asset (e.g. an image), you can choose to export it in a variety of formats and densities.

Sketch also offers the ability to slice image assets for particular crops. You can create all of your slices and batch export.

Understanding Sketch’s Export Options
Sketch — Slices

Mocking Up Interactions and Sharing Prototypes with InVision Integration

Another useful integration is with InVision. You can download the InVision Sketch plugin for Mac or connect with Box, Dropbox or Drive. Your synced files will automatically update to corresponding projects in InVision without you having to lift a finger. Automation is the future! Tip: you can pause the sync while you’re working so every move isn’t updated live.

How to access InVision sync plugins

InVision Sketch Prototyping

Other Useful Links

Keyboard Shortcuts for Sketch: some new shortcuts to learn, but they’re relatively intuitive and will save you a lot of time.

Sketch vs. Photoshop: why & how I moved to Sketch 3 and am not going back

Photoshop Users: How To Switch To Sketch

Sketch Repo: more Sketch resources

One clap, two clap, three clap, forty?

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