Sketch Review 2016

“People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas…” — Steve Jobs

Sketch does not try to be all things to all users. Whereas Adobe Illustrator tries to provide a tool for every conceivable vector authoring need, the Sketch Team chose to focus on doing one thing and doing it very well. That one thing, of course, is UI/UX design.

As we mentioned in the intro of this series, Iconfinder is narrowly focused on reviewing the three products — Adobe Illustrator, Affinity Designer, and Sketch — for icon designers so Sketch is a bit of an outlier, at least at initial glance. But we would be negligent to not review it simply because of the characteristic peculiarity of many designers in their zeal for the tools they use. That said, we feel obligated to state up front that we think it is a bit of an unfair comparison.

The purpose of this series is to communicate what we hope is useful information. We welcome constructive criticism and even (especially?) disagreement — we just ask that you be polite about it. Ultimately the readers benefit and we all learn from discussion and debate.

Articles in this Series

1. Introduction & Overview
2. Adobe Illustrator Review
3. Affinity Designer 1.5 Beta Review
4. Sketch Review 2016
5. Conclusions

Artboards

Sketch has had the most advanced artboard capabilities of the three apps since at least 2014. Sketch allows you to add an unlimited number of artboards to its infinite canvas. There are two ways to add artboards to your Sketch document. First, you can type the letter A to switch to the Artboard insertion tool. Once the tool is selected, you can simply click and drag the marquee to create a new artboard. Once your artboard is created you can adjust the size and position using the Inspector in the upper right corner of the application window. Second, you can select from any of Sketch’s artboard presets for designing interfaces, layouts, and icons for different devices including Mac OS, iOS, Android, Material Design, and more. Additionally, you can create your own presets by clicking the Plus sign in the very lower right of the Inspector.

Scott: Sketch’s artboard features are fantastic and probably the best, overall, of the three apps. The presets and the fact that you can create your own presets is a huge timesaver and I’d love to see both Illustrator and Affinity Designer add similar capabilities.

Gašper: Artboards make your life easier, especially in Sketch, which has no canvas boundaries. So, artboards are essential to start preparing your drawing canvas.

Creating an artboard is very easy (Insert -> Artboards). You can drag your own artboard size or choose from pre-configured artboard (screen) sizes on the right. This is very handy. You’ll also find some artboards for icons (iOS, Android, Mac…). When you create an artboard, it appears as a layer group in the left panel.

The other form of organization are Pages, that are separate / isolated canvases. Similar to sheets in Excel. This is a very useful feature, if you need to keep all your designs in one file. Unfortunately, Illustrator and Affinity Designer are missing that feature.

Setting Up Custom Grids

You can create custom grids in Sketch by navigating to Views > Canvas > Grid Settings. In the dialog that appears you can enter the size of the grid cells (blocks) and at what interval you want to include a darker, primary grid line. The settings you enter for your grid lines apply only to the page or artboard on which they are created so you can create different size grids for different artboards. This is especially useful if you are creating icons for different devices such as iOS or Android devices which require different grid sizes (30 pixels and 24 pixels respectively).

Scott: The grids in Sketch are pretty straightforward and I like the fact that you can specify different grid settings for each artboard. This is really cool for working on icon sets for different platforms. The only thing I didn’t like is that if you show grid lines for every 1 pixel, they all display all the time. The effect is that at 100% view, your screen looks gray because all of the gray grid lines, only 1 pixel apart, bleed together.

Gašper: If you never used Sketch before, the first thing you notice is that Sketch’s canvas is infinite. That means it has no boundaries or document sizes, as we are used from Illustrator, Affinity Designer, or basically any other graphic tool out there. When starting with a blank document you actually first need to create an artboard and then set your grid view. You can start drawing right away, even on a infinite canvas (you don’t need to specify a document size), but it’s always helpful to create an artboard first, to have a better imagination of a real “canvas”.

Grid lines can be turned on under View, where you can also tune your grid settings.

Working With Paths (The Pen Tool)

As we mentioned in the Affinity Designer review, the Pen Tool (Vector Tool in Sketch) is the heart-and-soul of any vector authoring tool. The Vector Tool in Sketch works as you would expect, for the most part, with a couple of caveats. First, unlike Illustrator and Affinity Designer, Sketch does not have a floating Tool Box with your drawing tools, including the Vector Tool, in plain view by default. You can customize the Tool Bar, however, to add any of Sketch’s tools to the Tool Bar at the top of the application window. The other caveat is that closing a path with the Vector Tool by clicking the first point only works when you first draw the path. For existing paths it doesn’t work. According to the Sketch Team, the reason for this is to allow you to edit the path by dragging the point to adjust the control handles without closing the point.

Scott: One thing I find frustrating about Sketch’s Vector (Pen) Tool is fact that clicking the starting point with the Vector Tool only works when you first create the path. I understand Bohemian Coding’s logic, I just think it is counterintuitive and it doesn’t really make sense to me. Their argument is that you wouldn’t be able to adjust the handles on existing points if it worked that way. I use the Vector Tool more than any other by far. There is a lot I like about Sketch, but this one feature I sincerely dislike.

Gašper: The Pen tool, which is called Vector, feels good. Basically, if you get used to accessing it from the dropdown or using the shortcuts, you can get used to it quite fast. But most of the problems I had with the pen tool itself, were all connected to the use of snapping (explained later).

Positioning & Aligning Points

Sketch, like Illustrator and Affinity Designer, allows you to snap points and edges to your grid. Unlike Illustrator or Affinity Designer, however, Sketch allows you to snap to half-pixels. You can enable snapping, or in Sketch’s jargon, “rounding” by selecting the Vector Tool (type the letter V). In the Inspector on the right side of your application window, you will see a drop down selector with the options: Don’t round to nearest pixels, Round to half pixels, and Round to full pixel edges. For icon designers creating line icons, the ability to snap to half-pixels will prove very useful.

Scott: Snapping, or Rounding, in Sketch is really nice and I love the ability to snap to half-pixels. I LOVE this ability, in fact. The Sketch dev team has introduced a few features that really should be the industry standard or, the analog, to use the terminology from our last review, by which everyone else reasons. The others are the way Sketch handles exports, and the grid presets.

Gašper: When expecting to snap the points to the grid, Sketch won’t do that by default. Although, once you find the setting (called Rounding), you can snap (round) to full or half pixels, which is just what you need when drawing pixel-perfect icons. But, I cheered too soon. It’s possible to snap to half pixels when using the Vector Tool, but it is not working the same when moving shapes or resizing. So, if you draw a 1-pixel path on a pixel grid, it will snap correctly to the center of the grid block, but when trying to move the same path, it will get messed up and snapped to the grid line, making it look as a distorted thick line with the width of 2 pixels. I had no idea how to avoid this behavior, once I found out that I cannot make a grid box smaller than 1 pixel.

The other strange thing was the Smart Guides mode, which doesn’t work as you may think if you are an Illustrator user. It just doesn’t snap to points or paths lying on other objects. A feature I, unfortunately, can’t live without. I also could not get to work, although it was enabled. It just didn’t work when trying to snap to a point or path lying on another object.

And there is also a Round to Pixel feature, to align the paths to the pixel grid. But, If you apply it on a group of shapes, paths, etc. — in that case an almost pixel-perfect icon — it made a mess (original left, on the right when Rounded to Pixel). I assume this is because of the inability to snap a 1-pixel stroke correctly.

Manipulating Curves

Sketch provides the typical control points and control handles one expects for manipulating curves. With the Vector Tool selected, you can also click and drag a line segment or curve. Sketch automatically adds a new point at the spot where you click. There is no tool for direct selection of a path in Sketch so there is no way to avoid adding the new point.

Scott: This is another of Sketch’s features that I find frustrating to work with. I know this is more a matter of having learned a different tool first but it feels very limiting to try to manipulate curves with only a single tool for every scenario. I also don’t like that Sketch needlessly adds a point when you only want to change the shape of the curve. It would be nice to have modifier keys to just grab the curve and drag, versus adding a point.

Gašper: There is no separate “node” tool in Sketch. You can manipulate the curve of an existing object by double-clicking it and then editing the points. You can very easy change a 90 degrees corner to a curve and back.

The same as in Illustrator & Affinity Designer, the Path Extend Tool and (Smart) Path Eraser Tool are missing.

Joining line points and line segments

Joining two points on the same path (closing a path) or joining two end points on separate unclosed paths are two of the most common, if not the most common, tasks a vector artist is likely to perform. As mentioned before, Sketch allows you to click the starting point of a path to close it, but only when you first draw the path. After you have clicked off of the path (Finished Editing in Sketch’s terminology), then select the path again, you can no longer close the path by simply clicking the first point. You must use the Close Path button. Additionally, there is no way to click an end point of one unclosed path and join it to a second unclosed path using the Vector Tool. You can select two end points of unconnected paths and go to Layer > Paths > Join, but rather than draw a line segment between the two points, Sketch combines the points into a single point. You can also select all open paths and click the Union button. In the Layer List, select the subpath, and on the icon in the right of the cell, change the operation to None.

Scott: Honestly, I would rate Sketch the lowest on this functionality of any I’ve seen in the app. I should be able to click on any end point of any unclosed path and join it to another by simply clicking a second endpoint of the same or a different path. I also find it frustrating that if I select an unclosed path then click the Edit Tool, Sketch pre-selects the last point created and doesn’t allow me to select either end point that I want. Tools should, as much as possible, allow the user to work the way they prefer, not dictate a single way of working and I feel like that is what Sketch does when it comes to joining paths.

Gašper: It would be much easier if the snapping and Smart Guides feature would work as expected (I usually don’t join points that are not lying on each other), but other than that you can join two paths by selecting both paths and using the Layer > Paths > Join tool (surprisingly, with all the shortcuts for tools, there is no shortcut for that?). Very strange thing in Sketch is closing paths. Once you leave an unclosed path and then want to close it later, it just won’t close the way we expect it from Illustrator or Affinity Designer. Something I simply cannot live with.

Remove unwanted points

Sketch, like Affinity Designer, allows you to select a single point by clicking on it or multiple points by click-dragging a marquee to select the points you wish to remove, then typing the Delete key. Also like Affinity Designer, the shape of the path the point was on may change as a result. There is no way, in Sketch, to split a point, however. You can delete a section of a path using the Scissors tool (Layers > Paths > Scissors).

Scott: There are many instances where I want to split a point to extend it or to join with another point but I don’t want to delete and entire section of the path. But with the Scissors Tool there is no way to simply split a point. I first have to insert a new point immediately next to the one I want to split and delete the small section between them.

Gašper: Removing the points is easy (selecting a point and pressing Delete). The path adopts, but not as nice as in Affinity Designer. And of course, far from Astute’s Smart Remove Brush Tool plugin for Illustrator.

One thing was painful — to delete a segment from a shape. I tried all the things I thought would make sense, but didn’t found a way. I would expect you can select the segment somehow and then just delete it. I had to google. You have to use the Scissors tool, hidden somewhere in the top bar navigation. Once you move Scissors, to be always at the top bar, it works nice and intuitive.

Working with strokes (size, end caps, etc)

Styling strokes in Sketch is very similar to working with strokes in both Adobe Illustrator and Affinity Designer. You can access the stroke styling in the Inspector on the right side of the application window. By default only the color, thickness, and a selector for the alignment of the stroke (center, inside, or outside) are visible but you can click the gear icon to reveal additional styling controls for creating dashed lines, decorative end caps, and corner styles. You can also add multiple stroke styles to the same path by clicking the Plus sign next to the gear icon.

Scott: Working with strokes in Sketch is pretty straightforward and will feel familiar to anyone who has used Illustrator or Affinity Designer extensively. Adding multiple strokes to a path in Sketch is a lot more obvious than doing so in Illustrator or Affinity Designer.

Gašper: Strokes are called Borders and are similarly powerful as in Illustrator (size, color, thickness). The end caps and joins can be also set, but are a little bit hidden. Can be very timely because when creating a new path, it doesn’t remember the stroke settings from the path you did just before, and you have to set the stroke size, color, cap every single time.

It’s very cool that you can stack multiple strokes on a single shape, but then they all need to have to be in the same style (end caps, joins). So one stroke cannot be dashed and other solid, at the same time (on same shape).

Shape Operations (unite, trim, divide)

Sketch allows you to Merge, Subtract, Intersect, and Difference two or more shapes. Unlike both Illustrator and Affinity Designer, the default behavior in Sketch is to preserve the original shapes. Adobe Illustrator does have this option by holding down the Option key while clicking any button in Pathfinder, but it is not the default behavior of the buttons. Sketch, like Affinity Designer, does not have a Minus Front and Minus Back, simply a Subtract button. By default, the operations will be performed front-to-back so, for instance, when using the Subtract button, the front-most shape will be subtracted from the back-most shape.

Scott: Just as with Affinity Designer, I don’t find the shape operation tools to be limiting. My first reaction to the fact that Sketch preserves the original shapes when I did the first review in 2014 was that I didn’t like it but after creating a few thousand icons in the past two years, I can definitely see the value in preserving the original shapes intact. It is nice to be able to go back and manipulate the original shapes if an icon needs to be updated — and no creative work is ever finished, so this happens often.

Gašper: Sketch calls them Union, Subtract, Intersect and Difference. All of them are super easy to use (also sticky at the top). Minus Back is missing, but the biggest personal disappointment is that the operations don’t work when applied on combination of a shape and an unclosed path (line).

Also different to Illustrator and Affinity Designer, intersecting a shape, creates a single but combined shape (even if it’s trimmed to many individual shapes), where the primary shapes are still as they were (this can be nice, once you get used to, because you can change the original shapes later).

Precision Control and Navigating Within a Document Including Zoom

Sketch gives you several tools for navigating between pages and artboards and moving around within your documents. You can Zoom In, Zoom Out using the Z key along with the Option key modifier. You can also Center Canvas, Center Selection, and Zoom Selection. Additionally, on the Canvas tab in the Preferences panel you can enable or disable Animate Zoom, Zoom in on Selection, and Zoom back to previous Canvas position.

Scott: I get the logic of using the Z key to zoom in and out but my muscle memory is so trained to use the Command + Option + Space bar that I found it a hindrance to productivity, at least for the short time I used Sketch for this review. Muscle memory is just a matter of repetition so it’s not a deal-breaker by any stretch, but it was frustrating to keep hitting the wrong keys to zoom. I also miss having a Navigator but otherwise moving around documents in Sketch works well. I like having the ability to center the canvas or center on the selection.

Gašper: Navigating is just as smooth and easy (with holding down the space bar) as in Illustrator and Affinity Designer. You can zoom in or out with Command + / -. You can also zoom using the Z key, which might be handy when you have a QWERTY keyboard layout. On QWERTZ, the Z key and Option + Z are harder to access with just the left hand.

Pixel Preview Mode

You can toggle between Vector Mode and Pixel Mode in Sketch by holding the Control key and typing the letter P. Alternately, you can add the Pixel Preview button to your toolbar if you prefer an on-screen button.

Scott: There is nothing really to say about previewing what your icons will look like in pixels. The feature works as you would expect.

Gašper: Works as you would expect. An essential view when designing pixel-perfect icons.

Batch Export Functionality

Sketch incorporated batch export functionality before either Adobe Illustrator or Affinity Designer. Sketch included this feature at least as far back as 2014 when we conducted our original review. By default, artboards can be exported but you can also make any layer or page exportable by clicking on the object in the Layers palette on the left of the application window then looking in the lower-right corner in the Inspector palette and clicking the Make Exportable button. You can also use the Layer > Make Exportable menu item.

You can specify multiple export sizes and formats for any exportable item by clicking the item in the Layers palette, then adding the export settings in the lower-right of the Inspector palette. The export format options include PNG, JPG, TIFF, PDF, EPS, and SVG. You can select a preset size from the size dropdown or enter a custom value.

We would be remiss if we did not point out a fairly serious issue with Sketch as it pertains to icon designers. Sketch’s SVG exports have proven to be fairly problematic due to heavy use of clipping masks. The Sketch Team has commented directly to Iconfinder on this issue.

“This is a known issue in our SVG export code, and we’re working to get that fixed”, says Ale Muñoz, of Bohemian coding.

“For the record, what’s happening is this: you have a shape with a border set to either ‘Outside’ or ‘Inside’. Since the SVG format does not (yet) support border positions other than ‘Center’, we need to work around that by using a hack. There are three strategies for that:

1. automatically use a mask (what we do)
2. automatically outline paths before exporting (what Illustrator does)
3. manually edit your shapes so that they use ‘Center’ borders, or outline & cleanup the paths (time-consuming and not always possible)”

Scott: Sketch’s unlimited artboards and batch export functionality really stood out in 2014 when I did the first review. I’m glad to see that the other two vendors have caught up in terms of exporting multiple sizes and formats at once, at least. It would be nice, however, if Sketch allowed me to specify different output locations for each size and format. Typically the different icon formats and sizes in my sets are arranged in different folders. The ability to specify the different output locations would save me a lot of time. To be fair, none of the three products we’ve reviewed can output to different locations.

Gašper: Exporting was always a strong part of Sketch, since they had batch exporting before Illustrator and Affinity Designer. While the exporting is easy to find, I was stuck with setting up export options for all of the artboards (by selecting the artboard in the left panel and then applying the settings in the bottom right corner — somehow hidden). But when you get used to, you can export to multiple sizes and formats at once, which is just what you need when working on larger icon sets.

Responsiveness to customer feedback

Smallness, in terms of team size, and having a flatter organizational structure has some obvious disadvantages. Namely, supporting thousands, hundreds-of-thousands, or even millions of users can be very difficult for a small team. But one big advantage of being small is having the ability to interact directly with users. Smallness, of course, is not the key, attitude and openness are. When we wrote to the Sketch Team and warned them we would be expressing opinions that “might ruffle a few feathers”, thy replied, “Don’t worry. We’re happy to receive criticism … Sometimes it hurts, but there’s no other way to improve, is it”? I think that says all you need to know about their openness to input from users.

Scott: I have had the opportunity to email back-and-forth with several members of the Sketch team in the preparation of this review. As we’ve stated before we allow vendors to fact-check our reviews before going live. Honestly, I was a bit nervous sending this particular review to the Sketch Team because I had a few criticisms that I was afraid would be interpreted as mean-spirited (that is never my intent). Since Affinity Designer and Sketch both have small teams, it was not lost on me that their culture is probably not too different from our own at Iconfinder. Their response was fantastic and put me at ease. I have been pleasantly surprised by the approachability of all three software teams — Yes! Even the Adobe team who people seem to enjoy bashing. I sincerely look forward to crossing paths with all three teams again.

Gašper: I Have no personal experience with Sketch’s support.

Conclusion

“Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid” is a disputed quote by Albert Einstein. Whether he did or did not say it isn’t relevant for this article but the sentiment is. Adobe Illustrator and Affinity Designer are vector drawing applications. That is their core purpose. Sketch, however, is a UI/UX design tool, and based on its reputation, a damn good one. The best, in fact, according to many. Sketch just happens to use vector graphics because they are lightweight and appropriate for the core purpose.

Designers use Sketch to design icons because of its ease-of-use, reliability, and performance. But in our opinion, Sketch is not really an icon design tool, nor is it a vector illustration tool. There is nothing wrong with that and we won’t judge a fish by its ability to climb a tree, as it were. We have evaluated Sketch in the article above based on the common use cases encountered by icon designers. This is not an exhaustive review nor is it particularly relevant to Sketch’s core user base.

Scott: Personally I think comparing Sketch to Affinity Designer or Adobe Illustrator is not an apples-to-apples comparison. Sketch has a fantastic reputation for UI/UX design. I can’t personally vouch for this since I’m not a UI/UX designer but I am a professional icon designer and this is a review specifically about icon design. I don’t think the Sketch Team is specifically courting professional icon designers. We are not a particularly large market and my opinion of the icon design capabilities of Sketch certainly won’t negatively affect my opinion of the software as a whole or of the Sketch Team.

The issues I have with Sketch are fairly minimal but are also fairly significant. I want it to be clear, though, that I’m speaking only as an icon designer and how I use vector software for icon design. I found the drawing tools in Sketch to be perfectly adequate. The Vector Tool feels pretty nice and I didn’t really have trouble creating curves. I did, however, have a fair amount of trouble with editing lines once created. Sketch’s use of menu items for actions that should be keyboard shortcuts is particularly frustrating and requires too much thought. For instance, the fact that the Scissors Tool is buried three menu levels deep when it is such a commonly-used tool is impractical. You can customize your toolbar (right-click on the toolbar and select Customize Toolbar) to add the Scissors as button in the Tool Bar. Ideally I’d like to see this as a keyboard shortcut. But even beyond that, Sketch’s path manipulation tools should be more flexible as I have indicated in the sections throughout the article.

I don’t think Sketch is as mature or easy-to-use for icon design as Adobe Illustrator or Affinity Designer. There are a lot of things from Adobe Illustrator that I rarely, if ever, use and can live without and a stripped-down vector authoring application with only the tools I need is great. But I find that Sketch is missing some things that I can’t live without. That said, there were not any issues that I encountered that are not fairly easily resolved. Most of them are more ease-of-access to tools through keyboard shortcuts or a slightly different approach to doing things like splitting paths or joining paths. I like to point out, and I’ll do it again here, that we tend to prefer the tools we learned first because of familiarity, not necessarily superiority. So most of the things I don’t like are more a matter of preference.

There are some things that were not covered in the review for the sake of space, however, that are really exciting about Sketch. Since I am a developer and a designer, I use scripting and automation a lot in Adobe Illustrator and the scripting in Sketch is fantastic. From a productivity standpoint, this is a very powerful feature. There is no question that Sketch is a serious tool worth every icon designer’s consideration. The workflow is second-to-none, but I’d like to see the Sketch Team refine the path manipulation tools more.

Gašper: In the previous review, I wrote that the layout of Affinity Designer is different than Illustrator’s. Sketch’s it’s a totally different. On one side very skinned down and minimal UI (what I like), but then on the other unfamiliar too. Having no canvas boundaries when starting with a blank document, made me feel a little lost at the beginning. There is no doubt, artboards are an essential part of Sketch’s workflow, though.

Compared to Illustrator, you don’t see your tools for drawing lines, shapes, and others. All these tools are packed under the Insert toolbar, which makes the interface clean, but also very timely to click two or three times to access the tools you’re using all the time. It was actually very frustrating for me, with the default layout. It seems necessary to learn the shortcuts, to have an inconvenient workflow with the tools, or customizing the toolbar by drag & drop your favorite tools to be sticky at the top control bar.

The layers, placed in the left panel, work different than in Illustrator. They are actually more a breakdown of individual shapes, groups or artboards. When you have a complex graphic, then the left panel will fill up and you need to organize the layers in groups to still keep an overview of them.

Configurations for selected objects are always on the right (Inspector Panel), with different settings, depending on what type of object you have just selected. This is actually something I really like, compared to Illustrator’s clutter of individual windows.

For me personally and what I do, Sketch is just too far away from my workflow. I’m so used to how things are done in Illustrator, Photoshop, InDesign and others, that I could not easily adapt. To be honest, the first 5 or 6 hours, that I needed to learn the basics and recreate an icon, were frustrating at times. I couldn’t turn the switch in just few hours. It’s obvious that this is a personal matter and there are surely many users that feel just the same when switching from Sketch to Illustrator.

Up Next

Next week we will finish this 5-part series with a summary and direct comparison between Adobe Illustrator, Affinity Designer, and Sketch. Be sure to keep an eye out next week.

As always, join the conversation in the comments below. The three vendors are watching and might even join the discussion, so please be civil and constructive in your criticism.