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.” — designcode.io/sketch
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.
Symbols
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.
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.
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.
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).
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.
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.
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.
DayPlayer
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.
You can also leave comments in Zeplin to indicate interactions and give other notes to the development team.
Some resources:
Sketch and Zeplin: Helping Designers and Developers Collaborate
How I Fell in Love with Zeplin for Design & Dev Collaboration
Other similar apps:
Avocode
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.
Resources:
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.
Resources:
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
