Adobe XD – Sketch-Killer? XD and Sketch App Comparison

Sketch by Bohemian Coding is an app that I have been using quite a lot for a while now. For my workflow, it has completely replaced Photoshop for designing and building websites. Adobe were slow to respond to the changing needs of web and UI designers and the once go-to tool Photoshop, became strangely jaded. Like many others, I went in search of alternatives. And I noticed that other designers were also sending over more .sketch than .psd files when handing over client materials. So I turned to the Sketch App and haven’t looked back.

Photoshop – Packing it in

My use of Photoshop has changed and in many ways, gone back to how I used to use it – for preparing my images. This is because using it to design and build websites has become harder work than it needs to be. Adobe have gone a long way to try and address the needs of web and UI designers by adding features over time. But it feels very much like these additions are bolt-ons rather than considered inclusions. Plus, I wonder what impact they have on performance. (Starting Photoshop on my 2010 iMac takes 4 times longer than Sketch.)

Adobe added layer comps – to show design variations. Although not directly intended for web design use, it was a way to switch between page layouts. More recently, artboards were introduced. This provides a simple way to keep related work together and the port-over from Adobe Illustrator was another welcome inclusion to Photoshop. Smart Guides were introduced as a helpful way to line-up elements and create grid layouts. Adobe also tried adding the Design Space to Photoshop, although this just felt really clunky and uninviting to me. Exporting files has been available for a long time, with Save for Web, Save for Web and Devices… Seems Adobe couldn’t decide on this one. They are now offering Quick Export and Generate Assets options. There is also a nice Extract integration built in to the Brackets code editor, but for me, that doesn’t get used.

But finally, Adobe realised that the Sketch App had come along and made huge in-roads as a lightweight, intuitive and fast tool for creating and exporting assets. So they developed Project Comet and after a user survey to decide the name, that morphed into Experience Design, or XD. This is currently in preview status so a direct comparison with Sketch is not entirely fair. For that reason, I’m not doing a full review or head-to-head, just pointing out why I don’t see XD as a Sketch-killer just yet.

I also want to point out that Sketch is available just for Mac users and currently costs £78.60 for UK users. Read more about their versioning and licensing model here on their blog.

Adobe Experience Design

Speed is often a big factor in commercial design work and this is an area where Sketch scores well. I know Photoshop like the back of my hand, but for many web related jobs and even quick logos, I open the Sketch app rather than PS or Illustrator. XD launches with lightning speed and greets you with a panel offering several workspace sizes.

After picking one, you get a clean environment with tools down the left and options to the right of your workspace. This is my first bug-bear. The toolset is minimal offering a move tool, rectangular and elliptical tools, line, pen for vectors and a text tool. Sketch has an Insert icon which you can customise. It allows you to add your own often-used tools to the UI. It offers quick ways to add images, arrows, various shapes, symbols and slices, plus all the XD tools.

Fill me up Sketch

Fill options are my next query. XD doesn’t seem to offer a gradient option for fills. Or much else really. It’s just HSBA or Hex.*

With Sketch, you get RGBA and Hex, plus various gradient types, pattern and noise fills. You also get a palette of global colours and a user-set that you can create from your document. You can also pick from a very helpful list of frequently used colours.

Another thing you get is Blending options for the objects. Sketch works with a visual layering system for everything you create, so you can blend between objects. This is something else XD has not got yet and the lack of visual layering is quite off-putting if you are coming from Photoshop. You can send items backwards and forwards, but it’s nice to see what you are doing.

Likewise, when it comes to adding text, Sketch offers a dropdown for popular text sizes. With XD you enter your size manually. With both, you can select the text size and use the keyboard arrows to nudge up and down.

Lining it up in Sketch App

Strangely too, XD doesn’t seem to have rulers or the ability to create guides. It relies on smart guides for positioning and aligning your objects. Sketch has rulers and let’s you create both horizontal and vertical guidelines. It also has a really helpful grid layout option that you can enable, giving you another useful visual cue.

Masks are available in Sketch too, so you can create an object and quickly apply an image asset that will be perfectly masked. You can mask objects with a shape in XD, but again the lack of visual layering or stacking order makes this less than user-friendly.

Repeating Content – Working With a Grid

Adobe XD has a neat tool called Repeat Grid. With an object selected, you can drag horizontally or vertically to create copies. You can dynamically change the spacing between grid items too. This is one of the best features in XD by a long way.

Click to play

Sketch has a grid feature built in too, but it is not as simple to use as the XD one. You manually enter all the information to create your grid:

I’ll come to the Craft plugin later, but this is one of other options available to Sketch users.

Exporting and Creating Assets

When it comes to exporting with XD, you can select items and use the File > Export option. Artboards are exported too if you don’t have a selected object. Options are PNG, SVG and PDF.

The process is different in Sketch, where you can use the Make Exportable button and choose from plenty of options. You have PNG, JPG, SVG, TIFF, PDF and EPS. Bohemian Coding have also considered whether you might want to include the background colour in your export! If you right-click on your objects, you also get to copy the CSS attributes or SVG Code. This is really useful and goes a long way to speeding-up my workflow.

With both Sketch and XD you can also export files to the cloud – Creative Cloud or Sketch Cloud.

PROTOTYPING

With XD there are two spaces – Design and Prototype. Once you have multiple artboards, you can produce interactions between them, making it easy to show user-journeys to clients. Switching to Prototype, it is a simple matter of selecting objects such as buttons, and dragging the connectors between artboards. You can select effects (slide left etc) and timings.

You can record using this clickable-journey and save it as a movie to share with your client.

This is a big feature that XD has over Sketch, which currently doesn’t provide native prototyping. Sketch does however provide support for a host of plugins, all of which can be used to extend the Sketch app. If you are looking for prototyping tools, Flinto is a comprehensive standalone app. You can send files directly from Sketch to Flinto. Craft by InVision is going to be offering prototyping inside Sketch soon. (It’s currently in Beta and you can get a code via Twitter here.) Meanwhile, they have a very popular prototyping app that you can work with.

EXTENDING SKETCH APP WITH PLUGINS

Having already looked at the best XD feature for me, the repeat grid, I want to briefly touch on a huge bonus Sketch has over Adobe XD. It can be extended by installing plugins which add new features. There is a growing number here in the Sketch app plugins repository. Amongst my favourites are:

Use Icon Fonts in Sketch – quickly insert icons from FontAwesome etc into your designs
Sketch Dynamic Buttons – a simple button creator
Craft – a multi-purpose content generation, duplicator and library plugin

The Final Verdict – Is Adobe XD a Sketch App-Killer?

In a word, no. At least, not yet. In fairness, it’s still in preview rather than being an official release. Plus, if you have a Creative Cloud account you can download it and try it for free. Sketch offers a free, time-limited trial. XD has a long way to go and a lot of features to add before it is going to exist on a level footing with Sketch. I believe Adobe will do what they can to deter the migration of designers from Photoshop and building a new tool from the ground up is a start. Photoshop still very much has it’s place as an every day tool for graphic designers. For web and UI designers there are new tools on the block, and Adobe are currently still in the shade of a small independent called Bohemian.

For now at least, Sketch is the web design tool for me.

* Update

The Experience Design CC (Preview) v. 0.5.16 released on August 15 2016 has added linear gradients. A new drop-menu allows you to pick solid or gradient fill types for objects on the canvas.