Design & UX
Article
By Daniel Schwarz

Adobe XD or Sketch: Which Will Result in the Best UX?

By Daniel Schwarz

Adobe XD vs Sketch

There has been a long history of comparing Sketch to Photoshop (and sometimes Illustrator) for a while now.

Why? Because, for a long time, Photoshop was Sketch's only direct competitor – despite the fact that Photoshop is primarily used to edit photos. Adobe sought to improve Photoshop for user interface designers ⏤ they added Artboards, a better export workflow, Smart Guides and so on.

Of course, the main issue with those new features was that they made Photoshop even more bloated than it already was. It was like adding an ice skating rink to an ocean liner.

With Sketch continually gaining momentum, and the fact that other new design apps started to pop up (Affinity Designer, Figma, etc), Adobe needed to build a fast, ultra-clean app dedicated to user interface designers. Photoshop also needed to be about photosagain.

Enter Adobe Experience Design CC, also known as Adobe XD – their fresh attempt at a pure UI Design tool.

Let' s take a look at which app is more suitable for you.

Platform Wars

Sketch is only available for MacOS users– so let's establish that right now. Designers have scrutinized this decision, but it is what it is. Adobe XD is available for Windows and MacOS.

Adobe’s Drastic Interface Overhaul

No doubt the first thing you’ll notice about Adobe XD is the beautifully minimal interface (when compared to Photoshop). Since Adobe XD focuses on user interface design, you’ll find image-editing tools virtually non-existent, so the apps' interface is much less overwhelming in comparison to other Adobe apps. This isn’t the place to retouch your photos or remove backgrounds.

For those Adobe fans that didn't want to switch to Sketch (or couldn't because they use Windows), but otherwise acknowledged that Photoshop wasn't the right tool for UI design, then I promise you, this is the tool you' ve been waiting for.

But what if you' re MacOS user who has the choice of both tools? Well, in that respect, you' ll find that Sketch and XD are very neck-and-neck – their UI layouts are almost identical.

Similarities in the UI of Sketch and Adobe XD

Invisible UI’s — Smart Guides and Keyboard Shortcuts

What I love most about Sketch also exists in Adobe XD — invisible interfaces. By invisible, I mean there are ways to accomplish certain tasks without having to interact (i.e. click) with an interface, either because the actions are automatic or because there’s an ultra-minimal keyboard shortcut for it.

Need 50% opacity on a layer? Just hit "5" on the keyboard. Need to align a layer with a 20px margin? No worries, the Smart Guides that automatically appear will let you know how close you are. Smart Guides can be activated with the option key (⌥) too!

Smart Guides, a comparison

Reusable Components (Symbols)

Both applications sound equally impressive so far, but the realbattle begins when it comes to the bigger features.

Let' s take a look at Symbols first.

Symbols are reusable design elements/components. Essentially, you maintain a " master" symbol and all instances of that symbol in the main document (in your design) mirror the master symbol.

Inserting symbols is very, very easy!

Symbols in Sketch

Symbols in Sketch

Symbols in Adobe XD

But what happens when you need one instance of a component to look different from another instance? What if one navigation instance needs to show a hover state in one of the screens?

No worries, Sketch allows you to nestsymbols inside other symbols. You would basically design the different states for your icons as a separate symbol and choose which state to use in the bigger, larger symbol (in this case, the menu navigation).

Adobe hasn't implemented nested symbols in XD yet (at the time of writing), but it' s highly likely that they will in the future. In this respect, Sketch is winning the race because they' ve been around longer, however XD is advancing rapidly.

By the way, the stunning UI kit used in these screenshots is called Dishy (created by Serge Vasil) and you can find it here.

Repeatable Components (Repeat Grids)

Repeat Grids is an iconic feature in Adobe XD ⏤ something that no other UI design application currently offers. It allows you to repeat components horizontally and vertically while inserting unique content in each tile. You can even multi-drag assets (image and text files) from your desktop to have that content inserted and distributed automatically.

Repeat Grids

Repeat Grids

So far, Sketch hasn't implemented a feature like this, although because Sketch allows the dev community to build extensions you can install the Craft Plugin which will allow you to accomplish the same thing.

Personally, I love the fact that this feature in native in Adobe XD!

Prototyping User Flows (Only in Adobe XD)

Prototyping user flows isn’t something that you can do in Sketch, so ‘Sketchers’ have to fallback on integrating with another service like InVision or Atomic (which is fine, they’re both wonderful apps). Adobe XD offers design and prototyping tools built into one, so if you like to keep your workflow contained to a single app, then Adobe XD may be for you.

Prototyping user flows

Prototyping user flows

Exporting Image Assets

Image asset export is very similar in both apps, although I do sometimes need to export JPG files, which only Sketch supports, so this really comes to your individual needs.

Both apps support PDF, PNG, and SVG.

Conclusion

If you thought the competition between Photoshop and Sketch was fierce, then you’re in for a surprise with Adobe XD — the competition between both apps is driving them to constantly better themselves, which is awesome news for us designers.

But which should you ultimately choose? For Windows users, Adobe XD is the clear choice. But for MacOS users, it might come down to your individual needs.

  • Do you need prototyping tools?
  • More flexibility when it comes to symbols?
  • Might you fall in love with repeat grids?
  • If so, you might be better of switching!

    Recommended
    Sponsors
    Get the latest in Design, once a week, for free.