I’ve been designing websites in Sketch for the last 5 years, and I’ll admit that removing the process from Adobe Photoshop/Illustrator felt like the most powerful software revolution in the design ecosystem since we abandoned Quarkxpress.
But recently it has come to my attention that Adobe XD may be making enough headway to usurp Sketch from atop the UI/UX throne. So for my last web project I decided to dust off my Udemy account and fire up some YouTube videos and learn more about XD. While I haven’t finished my latest project, I feel like I have enough of a grasp on the software to make some strong distinctions.
Sketch and XD do a lot of the same things well, so I won’t nitpick their basic similarities. Instead, here are some bright spots and glaring issues I’ve discovered as a veteran Sketch user getting acclimated to XD.
OPERATING SYSTEM
SKETCH: Mac Only
XD: Window/Mac/Linux
First off, Macs are great, I love Macs. But my evangelism has been chipping away over the last decade. Sketch continues to be an Apple exclusive, which feels like a step backwards for the software world. A fair amount of our Developers prefer to work on non-OSX based systems and if there’s a tool we can all share harmoniously, I’m happy to give it a shot. XD also has the Adobe cloud and more team integration, which isn’t something I personally use (and can’t speak to) but I can imagine it’s a life-line for more complex projects with larger scope.
WINNER: XD
THE BUILDING BLOCKS
SKETCH: Symbols
XD: Components
Easily, one of the most innovative tools Sketch introduced to UX/UI software was the symbol. A design asset that could be managed, cloned, and then universally edited across an entire document. Nesting symbols within symbols, while often puzzlingly complicated, became an even more powerful, yet necessary tool for streamlining design workflow.
XD had the opportunity to improve on Sketch’s revolutionary idea and proceeded to take a step backwards. Components aren’t really much more than groups you’d find in any other Adobe product. Unlike Sketch, it’s not always clear which version of your component is the master- thanks to a lack of an independent component area like Sketch’s Symbol Board. It’s very easy to override a component, which then breaks any edits you later update via the master. Adding elements to a component is tedious; you have to visit the layers panel, open a flyout, make sure you’ve selected an asset inside the component, and then paste in the asset you want to add. That’s 5 verbs. In Sketch, master symbols are treated like their own individual pieces of artwork, anything you add to their workspace is added to every instance easily and automatically. Overall, components are just plain clunky- I’d guess Adobe was trying to simplify the symbol, but ended up gutting the magic.
WINNER: Sketch
PROTOTYPING
This one is pretty easy, as there’s no native prototyping inside of Sketch. The best workaround (which isn’t all that bad) is to use the Craft Plugin, which has been integrated into the 3rd party prototyping service, InVision. The drawback of this clunky partnership is that it hasn’t really been improved much over the years. You can link design assets as navigation elements to other artboards, but that’s about the extent of it. Links that scroll down the page never work correctly for me, locking a nav bar to the top of the screen must be done inside of Invision, not Sketch, and hotspots require awkward workarounds with invisible boxes you can easily lose track of. Craft does a nice job of giving designers the option of uploading their projects to Invision, which is usually quick, and it’s easy for developers to peek into the HTML/CSS code. But as far as presenting your website to clients and making it feel like a real, responsive site Invision is either lacking or extremely tedious (setting up entire artboards for each individual asset state).
So XD must be a slam dunk then, right!? Well, not exactly. Prototyping is built into XD, and like sketch it’s simple to link elements and create a navigational flow. Prototypes are uploaded to a self generating URL in your Adobe Cloud account, but they’re more for team previewing than wowing a client, as the viewing window is locked inside a webpage, meaning a lot of the presentation space isn’t showing much of your website. To be fair, I’ve seen a few of great looking mobile app demos presented in the XD tutorials you can find on YouTube- but there’s really not that much going on under the hood. Independent scrollable areas inside of your page is a nice feature (one fancy example being parallax scrolling), you can set default/hover/toggle states, and there are some subtle animation transitions for buttons/menus.
But I find it criminal that this issue brought up from Nov, 2019 is still alive and well:
States do not inherit component instance default state modifications
The TLDR is that most of your reusable assets (like buttons) will be components. To prototype a component, you’ll want to change states (XD allows you to save out multiple versions of a component and toggle between them via clicking or hovering during the prototype phase). Yet these states don’t follow the master settings you’ve set up and therefore need to be updated individually. Imagine going through your entire document and having to change the text on each button 2 or 3 times just because you want to globally edit the color -pretty broken and (I’d argue) borderline useless.
WINNER: XD with faint praise
THAT UX FEEL
“Feel” is quite subjective, but it might be one of the more important features if there’s nothing mechanically swaying a designer toward one program or the other. I remember the first time I fired up Sketch and the way it felt so unique with it’s near pixel-perfect interface. The smart guides provide amazing balance between giving you freedom to explore your artboard while reigning you in when you need to find an alignment or spacing.
XD Feels more like every other Adobe program— yes there are smart guides, but they’re temperamental and too often things don’t snap or align the way I want. For some odd reason the shift key doesn’t lock in linear adjustments when you’re trying to manipulate a specific point on a shape. Far too often I found myself zooming way into an asset to fine-tune a size or position because the smart guides just weren’t smart enough.
WINNER: Sketch
THE V Key
If you know what I’m talking about, Adobe has it, Sketch doesn’t (which you’ll never get used to)
WINNER: XD
QUICKFIRE
XD’s Repeat Grid is cute, but in practical application it isn’t responsive and feels more like a seemingless pattern maker than generating real assets in a live grid.
Sketch and XD both have the ability to view and control color and text styles. I give XD the nod here, but both programs could do with some improvement in keeping things organized and letting the user know if their breaking their mold or expanding upon it.
XD’s Stacking Feature (controlling padding between group elements) is a breath of fresh air and one of the most frustratingly lacking features in Sketch. I’m not sure if this is the best way to solve inconsistent padding, but it works.
Cropping/masking images in XD feels far inferior to the methods in Sketch. I love the way Sketch allows multiple fill layer stacking on one asset, where, once again XD would prefer you just make groups.
XD’s UI is so streamlined and clean, it often left me hunting for more options that are either too well hidden or non-existent.
Sketch’s performance, especially lately, seems to take a hit on larger designs, regardless of the amount of images used. I haven’t seen any performance dips from XD, but I haven’t put a lot of pressure on the software. If both trends continue, this could be a major separator.
CONCLUSION
At the end of the day, I’d happily take either Sketch or XD over my past-life designing in Photoshop or Illustrator. Gun to my head, I’d probably stick to Sketch because Symbols are so important to my workflow and components feel too fickle. Over the long run though, I have faith Adobe will win the arms race and put out a superior product- it’s not a matter of will, but when.
If you’d like to read any more thoughts on Design from our Team here at Texas Creative:
Here’s a 2016 Time Capsule that includes one UX designer’s first thoughts about Sketch.
If you’re suffering through a PowerPoint Design this could help.
A timesaving tutorial on swapping colors in Adobe Illustrator.