Should you stick to the tried and true or give one of the newcomers a shot? In this article we will take a look at how well two contenders, Affinity Designer and Sketch stand up from an icon designer’s perspective. Is Adobe Illustrator finally ready for retirement?
Initially released in 1988, the software has gone through more than two-dozen generations spanning 26 years. Needless to say, Adobe has had a long time to gather information about what users want and need. The tools and user interface are mature and familiar. Illustrator is the de facto standard by which all vector software is measured.
Affinity Designer, by Serif Labs, is the newcomer on the block and is the Editor’s Choice winner on the Apple App Store at the time of this writing. Affinity Designer incorporates some familiar aspects of Illustrator’s user interface while adding its own touches and approach to vector design.
Sketch, by Bohemian Coding, is a two-time Apple Design Award Winner in 2009 and 2012. Sketch already has a lot of traction among icon designers, including Jon Hicks of Hicks Design. Sketch is quickly becoming the tool of choice for many app and web designers.
The Comparison Criteria
How we do our work is influenced as much by our tools as by the work to be done. I wanted to try to avoid making this article about my own process so I conducted an informal survey of a few friends who also design icons and are all Adobe Illustrator users. The panel included Hemmo De Jonge (Dutch Icon), Tom Nulens (Sodafish), Vincent le Moign (Webalys), and Ion Popa (Popcic). The question was simple: What tools do you currently use to design icons that you cannot live without? The responses were nearly unanimous and the tasks fall into two categories: drawing tools and workflow tools. The aggregate list is shown below.
- Custom Grids
- Shape tools
- Pen tool
- Join Points
- Snap-to-point, snap-to-grid
- Pixel & vector preview
- Multiple Artboards
- Importing Various File Formats
- Export as SVG and PNG
The ability to create custom grids is a mainstay for creating icons for different size requirements such as 16 x 16, 32 x 32, 64 x 64, and so forth. Both Illustrator and Sketch give users the ability to create custom grid sizes. Affinity, unfortunately, does not currently support user-defined grids (but is on their roadmap).
All three products have tools that give designers the ability to create basic geometric shapes such as rectangles, triangles, and ovals. Affinity Designer goes a few steps further and includes tools for creating about 20 different shapes.
Most icon designs start with basic geometric shapes, but the pen tool is the flat-head screw driver of the icon designers toolbox. I admit to being biased by years of use, but drawing with Illustrator’s pen tool feels like using a mechanical pen, while using the pen tool in Sketch and Affinity feels more like drawing with chalk.
In the case of Sketch, vector points are represented by a circle that is several pixels wide with a 2-pixel wide outline. Affinity’s default setting represents points with a thick, colored dot. You can, however, adjust the pen size in Affinity Designer by going to Preferences > User Interface > Tool UI Size. Affinity Designer’s default pen tool options are comparable to Astute Graphics’s InkScribe plugin for Adobe Illustrator.
It should be said, that Illustrator’s drawing tools, in fact, aren’t always precise, and Affinity’s and Sketch’s tools are just as precise. Whether or not you like the way each feels is subjective, so take it with a grain of salt and try them for yourself.
Join Line Segments
I can’t imagine not being able to split shapes and join corners and segments. I’m so used to the way Illustrator does this, I can’t tell if I’ve just been trained to work this way or if I really need these exact tools. I couldn’t find this capability in Sketch (but it may very well be there). In Affinity Designer, you can join two points by selecting both end-points with the Node Tool, then clicking the Join Nodes button in the Actions section of the Node tool bar.
Remember when you had to manually slice-and-dice to join shapes in Illustrator? Then remember your ecstasy when Adobe introduced Pathfinder? The union feature in Affinity works similarly to that of Illustrator, however, if you hold down the option key while clicking any of the union tools, the individual objects are preserved. Sketch also visually joins, diffs, or excludes shapes, but maintains the objects as separate layers by default. Sketch’s and Affinity’s approach allow you to treat joined objects as a single object in some instances such as styling and scaling, while maintaining the ability to edit the original objects independently and flattening later.
Snap-to-Point & Snap-to-Grid
As icon designers, we are obsessed with pixel-perfection, yet as humans we aren’t especially good at pin-point precision, especially using a stylus or mouse to draw. Snapping to the rescue. Illustrator’s snapping feels like the cursor is physically snapping to a point or grid. I was pleasantly surprised to discover that Sketch’s snapping is equal to, if not better than Illustrator’s, which is as often frustrating as it is useful. On many occasions, the Illustrator page will jump up or down while I’m trying to snap an object to a particular guide or grid line. This appears to be caused by having Smart Guides and Snap-to-Point or Snap-to-Grid enabled at the same time while zoomed (and standing on one foot, facing West).
I found Affinity’s snapping to be far less intuitive and far more complex than either of Illustrator’s or Sketch’s. Snapping in Affinity has its own menu with eleven (11) configuration options with even more refinements below each of those. This isn’t a reflection on Affinity Designer but on my limited time, and I admittedly did not spend figuring out what each setting does. The main ones you expect are there, however, with snap-to-point, snap-to-grid, and snap-to-guide.
How else will we pixel-perfection obsessed icon designers verify the precision of our work before it is released? While all three products provide the ability to preview vectors in pixel mode, Affinity excels in this area by also providing the ability to preview vectors for retina display. I suspect this will become the default standard for Illustrator and Sketch in the future.
I can’t even remember what my life was like before Adobe added multiple Artboards to Illustrator. Combined with the ability to name artboards and export them to files in various formats, using the artboard label as the filename saves us icon designers from hours of brain cell killing tedium. Adobe Illustrator and Sketch give you the ability to add multiple artboards to your file, although Illustrator arbitrarily limits you to 100 artboards per document. Unfortunately, Affinity Designer does not support multiple artboards at this time (though it’s on their roadmap).
Illustrator and Affinity, quite frankly, have nothing on Sketch when it comes to exporting your artboards to various file formats. Illustrator allows you to save files to different formats and when combined with Actions or custom Scripts, artboards can be used to export to SVG, PNG, EPS, etc. What Sketch does exceptionally well, however, is allow you to export different artboards and slices to different formats. So, for instance, if you want to export your 512 x 512 icon to PNG but your 32 x 32 to SVG, no problem. It is powerful while at the same time remaining simple and intuitive. Affinity also allows you to export to PNG, JPEG, GIF, SVG, EPS, PSD, and TIFF via a very attractive and intuitive export dialog.
Adobe Illustrator is the clear winner when it comes to importing different vector file formats. Illustrator supports a wide range of file formats including PDF, EPS, SVG, and many more (30 file types in all according to helpx.adobe.com). Affinity has no trouble importing SVG, EPS, PDF, and even Ai files. One drawback is that Affinity Designer does not appear to preserve grouped objects in imported Illustrator files. Sketch, on the other hand, falls short in this area. Sketch has no support for Ai files, and has limited support for SVG, EPS, and PDF. According to Sketch’s documentation, “SVG (and EPS, PDF) include concepts that are not supported in Sketch and will not be displayed”.
To be fair, Illustrator cannot open .sketch or .afdesign files, but I don’t see this as a major issue because those file types are not yet ubiquitous and a typical designer will rarely encounter those file types. However, a typical designer is likely to encounter .ai files frequently so there is a greater need to be able to open them. That said, SVG is the safest bet for transferring vector files for just about any need.
Actions & Custom Scripts
I really despise performing tedious, repetitive tasks and since I spend my days punching code at my day job as a programmer, I’m a big fan of Illustrator’s custom scripts support. I use Matthew Ericson’s MultiExport script regularly and I have written a few scripts of my own to speed up my workflow:
In addition to design and workflow tasks, there are little tasks like document navigation that we perform dozens, hundreds, or more times during a work session. When these actions are intuitive and unobtrusive, we hardly have to think about them but when they’re not we are forced to notice them and figure out how to get to where we’re going.
Among these features that should be second nature are zooming, selecting, and moving around within a document. Again, I admit to being biased, but Adobe has been training most of us for 26 years how these features should work. Moving within a document? Press the spacebar and click anywhere in the document. Selecting an object? Click on the object, or drag a marquee around an area of the document. Zooming in on an area? Space + Cmd to zoom in, or Space + Cmd + Option to zoom out.
Affinity uses the same zoom keyboard shortcuts that Illustrator does but Sketch uses the Cmd + Plus and Cmd + Minus to zoom in-and-out.
Sketch and Illustrator allow you to drag a marquee over any piece of an object to select the object by default. If you are using the direct selection tool, you can drag a marquee over an object to select any points or segments inside the marquee, or hold down the option key to select the entire object. Affinity also has the marquee-select feature but it must be enabled in Preferences > User Interface > Marquee Select on Touch.
Feature Comparison Matrix
|Task / Feature||Adobe Illustrator||Sketch||Affinity Designer|
|License Model||Subscription-only||Perpetual (1-time)||Perpetual (1-time)|
|Price||$19.99 per month||$99.99||$49.99|
|Shape tools||Yes||Yes||Yes (on steroids)|
|Join Points & Segments||Yes||No||Yes|
|Snap-to-Point, Snap-to-Grid||Yes||Yes||Yes (on steroids)|
|Multiple Artboards||Yes||Yes||No (on roadmap)|
|Pixel Preview (Retina)||No||No||Yes|
|Export to SVG, PNG, etc.||Yes||Yes||Yes|
|Batch save||Yes||Yes (on steroids)||No|
|Area selection by marquee||Yes||Yes||Yes|
|Customizable (can rearrange)||Yes||No||Yes|
|Scripts & Actions||Yes||Yes||No|
|Platforms||Mac & Windows||Mac-only||Mac-only|
Unfortunately, there isn’t time enough in the day to review every available product in the vector space (though there may be more reviews forthcoming). Which software is right for you is largely a matter of preference, but also a matter of considering your unique needs and what compromises you’re willing to make, like relearning some things. For a young designer, especially a freelancer, just starting out, the lower price points of Sketch and Affinity Designer are worth considering as you start and grow your business. For enterprise customers, it’s going to be hard to move away from Adobe – for now.
Each product has its strengths and weaknesses. Personally, I’m married to Adobe Illustrator for the time being because of my own needs and preferences. I think Affinity Designer is a strong contender, especially considering it is first generation software.
There used to be a maxim in software development that no product was truly stable until version 4. It is exciting to see some really good competitors in the market making a splash even on version 1. That said, it’s not really a fair fight, or perhaps no fight at all. The market is huge and no single product needs to truly do it all to thrive. I hope that the goal of any new products is to bring the behemoth down-to-size rather than just become the next tyrant.
I’ll end by enumerating the pros and cons of each product, as I see them. I would love to hear your thoughts in the comments below.