Sketch Review – Switching from Illustrator to Sketch

Author: Daniel Alcorn

sketch-hero-image

We’ve been using Sketch for a several months to produce our interface wireframes and designs. As we’ve had time to settle in with the app, I thought I’d jot down my thoughts on the app itself, focusing in particular on the differences between Adobe Illustrator and how you can utilise plugins and a few other tricks to make the switch between the two a little easier.

I used to use Illustrator for designs and mockups because I enjoyed working with vectors, grids, and default styles. Sketch ticks all these boxes and also has some really handy functions that make designing for digital even easier. What it doesn’t have, in general, is as much focus on moving, copying and positioning elements precisely. A lot of the details below come from me meandering around trying to get Sketch to do what Illustrator does, here are my findings…

Zoom Shortcut

This is a personal preference but one I relied upon a lot with Illustrator. To zoom and navigate around an artboard I would use [spacebar & cmd] for zoom-in and [spacebar, cmd & alt] for zoom-out. It’s not massive but it was fairly ingrained into my muscle memory. Sketches alternative is [Z] for zoom in and [Z & Alt] for zoom-out.

Sketch Duplicate & Nudge

I used the duplicate and nudge a lot in Illustrator [cmd + alt + arrow, cmd + alt + shift + arrow]. Sketch doesn’t do this by default, it pastes an element in the same place. Here’s a plugin to replicate the same action. Lifesaver.

github.com/bomberstudios/sketch-duplicate-and-nudge

Duplicator

duplicator-dialog-box

The move command [return] was also really useful in Illustrator as it allowed you to position an element using a pixel value horizontally or vertically (and/or at an angle). You could also create a copy of the element and position this in the same way. Once you had done that, you could use the transform again function [cmd + D] to repeat the copy. This was really helpful when creating grids or lists of the same element.

I couldn’t find a way of going about this with Sketch by default but found the Duplicator plugin. Once you call the action, it lets you specify how many elements you need and the spacing inbetween. Easy.

github.com/turbobabr/duplicator

Aligning

aligning

I use the ‘align to artboard’ and ‘align to selection’ regularly in Illustrator. Once I began to use Sketch I noticed that I had two options when aligning objects: if I selected a single object and hit the ‘align middle’ button, it would align to the centre of the artboard. If I selected two or more objects and hit ‘align middle’ this would align the objects centrally to each other. I then couldn’t see how to align multiple objects to the centre of the artboard easily without grouping them together into one object.

With a bit of research I discovered that when selecting multiple objects, holding down ‘alt’ and then clicking the ‘align middle’ button would get the desired effect. I found this and a few other aligning techniques on the Sketch Tips site

sketchtips.info/articles/aligning-everything

Pasting

Pasting is a little strange in Sketch. A simple ‘copy, paste’ will paste the copied item on top of the original item. This is fine but sometimes you want to paste an item onto another artboard. Imagine the scene, you copy an item, scroll across to another artboard, paste, and then realise it’s pasted the item back on the original artboard. You have to scroll all the way back and move it manually. Nightmare.

One way to avoid this is to use the ‘paste here’ command. This is handily situated in the right click menu so when you’re on the artboard you wish to copy to, right click and hit ‘paste here’ and the element will past exactly where you need it.

There is also a plugin called Better Paste which will override the default pasting function and paste an element to the artboard that is currently selected

github.com/kenmoore/sketch-better-paste

 

Split into Grid

I found ‘Split into Grid’ a really useful tool in Illustrator not only for creating grids and lists of elements but also for measuring and as an aid to responsive design. As pixel dimensions are less important in responsive design, it was great to be able to split a row into 3 with 40px gutters without knowing the width of each element (in the build this would be handled with ‘width: 33.333%’).

By default Sketch doesn’t have this functionality but, like many things, there’s a plugin for it. When selected, ‘Split into Grid’ will open a dialog box allowing you to specify a number of rows, columns and width of gutters.

*Pro Tip: From my experience, the plugin would crash when trying to split into a grid with only one row. I found I needed to specify at least two rows for the function to work as expected

github.com/marceloeduardo/sketch-scripts

 

Other Useful Bits

Round To Nearest Pixel

A neat little menu option  I discovered is the ‘Round to Nearest Pixel’ action (Layer >Round to Nearest Pixel). No more oddly shaped elements in your design. Here’s a little more on it via Sketch Tips

sketchtips.info/articles/round-to-nearest-pixel-edge

Marvel Plugin

Marvel is a great piece of prototyping software that we often use for wireframes and interactive mockups (marvelapp.com). They’ve recently created their own plgin which links seamlessly with your artboards in Sketch so you can quickly and easily make edits to designs and reflect these in your prototypes. Back of the net.

marvelapp.com/prototype-with-sketch

Send to Slack

At Substrakt HQ we use Slack an awful lot as it’s a great tool for communicating and sending videos of 80’s kid’s show theme tunes. There is another nifty little plugin  for Sketch which allows you to send designs directly to a channel, or person in Slack.

github.com/shahruz/Send-to-Slack

Content Generator

userpics

Another great plugin is the Content Generator for Sketch. It makes populating designs with placeholder content a doddle. Simply select your elements and insert random placeholder images, names, and text. You soon realise how much time is usually lost creating placeholder content. Ace.

github.com/timuric/Content-generator-sketch-plugin

Sketch Toolbox

“But Chris, with all these plugins to manage, it will take so long to navigate to the page, download the plugin and copy it to my plugins folder” I hear you cry. Well no, there’s a handy little app for that as well. Sketch Toolbox is easy to install and does all of the Charlie work for you of downloading and installing the plugins.

sketchtoolbox.com

Hopefully these give you a little guidance if, like me a few months ago, are thinking of switching from Illustrator to Sketch or have already made the transition. Get in touch if you have any other tips or tricks to make Sketch even more awesome.