“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
- Introduction & Overview
- Adobe Illustrator Review
- Affinity Designer 1.5 Beta Review
- Sketch Review 2016
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.
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).
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.
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.
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.
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.
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).
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.
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.
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.
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.
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)”
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.
“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.