Over the past few months I’ve been testing Adobe XD’s viability by using it exclusively on new commercial projects. It was admittedly risky trying to adopt so early — XD was/is still in preview and each client needed convincing in one way or another — but I thought the benefits outweighed the negatives. Visually speaking, and assuming you’ve done all the necessary project preparation, designing for the screen is just reordering shapes, type and colour, then trusting your eye enough to pull them together. The fact XD didn’t (and still doesn’t) have grids, layers or the ability to underline text didn’t really stop me doing any of those fundamentals, so I thought it was as good a time as any to give it a shot.
Speed is the Killer App
The first takeaway is that this process has confirmed my belief that everyday speed is more important than features. I mean, you can have all the plugins or functionality you can imagine, but if the simple things aren’t done consistently well, or in this case if the speed of everyday micro-tasks isn’t scalable past a certain number of artboards, then it’s really a false economy. To its credit, XD is blisteringly fast at those simple things, especially compared to something like Photoshop. Even Sketch feels positively sluggish compared to the speed at which XD allows you to design at, even with a whole bunch of files and hundreds of artboards open. Workarounds to most of the missing features can therefore be executed without too much stress, and the increase in efficiency picked up elsewhere means doing more work in considerably less time.
In terms of the core time savers, the repeat grid (make one card, drag, now you have ten cards), smart image mask handling (dragging and dropping images into containers automatically places them within those bounds, and can then be responsively altered) and the speedy intuition of the way objects are moved, duplicated, edited and placed have had the biggest positive impact on my workflow. These are the bread and butter tasks that you do dozens of times an hour, and are the things most important to me as a designer. You can, of course, repeat elements and alter image mask behaviour in Sketch. It’s just nowhere near as fast (and therefore less useful, less efficient and less scalable). To throw in some (loose) quantitative data, I probably increased my output by 25-40% depending on the project.
Above: Style guide created in XD for Whisk side project. Created manually for developer handover since XD lacks that level of functionality at the moment.
Things to Consider
Of course, there are some gaping holes in that XD feature set that can’t be worked around, holes that will understandably stop many a designer from trying it outside of personal projects. Reusable symbols, for example, are conspicuous in their absence. You better hope you — or your client — don’t want to change button colour half way through. Still, to my point, if you DID want to do that, then the actual manual alteration is really fast, as long as you don’t mind the physical therapy costs for your new RSI. Likewise the lack of proper developer handover tools like auto generated style guides and measurements is another task you’ll have to do manually.
There are macro-level details to consider too; the lack of autosave, the lack of JPG asset export, the lack of Windows support et all are all threats to attaining both a robust end result and file redundancy across design and development teams. In turn, these absences all potentially add time to a project, which when you’re dealing with real-life clients with real-life timelines and real-life budgets is something you’ll have to take into consideration. Granted, the XD team aren’t telling people to use their preview software for commercial projects yet, but since I am, and you might too, then it’s important stuff to be aware of.
As for things that I thought I would miss, like layers, they mostly turned out to be red herrings. Aside from a couple of annoying instances where I had to lock/unlock and rearrange a bunch of elements to select something at the base layer (like a worked around grid!), not having layers actually helped me focus. No ‘Rectangle 387’ interfering with my shapes, or tons of layer masks clogging up the UI. Granted, I’d one day like XD to integrate with Framer.js, but not at the expense of usability. To that end, it’ll be interesting to see how the team at Adobe choose to implement layers — and whether they’ll be used by designers like they are Photoshop (granular) or Illustrator (scoped). I suspect somewhere in the middle based on the available sneak peaks. As for exporting assets, the lack of layers didn't hurt too badly, even when batching across multiple artboards.
Adobe use UserVoice to track community requests, allowing designers to shape the tool via a democratic process. Updates are then provided by the XD Design Team directly.
But what of prototyping, arguably XD’s most advertised and talked-about feature? Well, it’s usable. It’s pretty good. It’s also XD’s weakest feature as it stands. Without fixed elements, scrollable modules, element states or complex animation, your lovely designs are capable of becoming little more than a series of clickable images with hotspots. That being said, I did recently make some nifty videos of navigation interactions for a client directly in XD, which went down well, so there are absolutely some use cases you can use today.
If you’re after advanced native-like prototypes out of the box, though, then XD isn’t going to be your go-to just yet. The good news is that every feature listed above is in Adobe’s backlog for inclusion, and when they are included, the prospect of a native tool as good as rivals like Flinto or Proto is a tantalising one, especially when sat side-by-side with XD’s already excellent Design Mode.
In terms of what’s new, XD’s latest update added the long-awaited companion iOS and Android Apps (similar to Sketch Mirror), allowing you to live preview your work on the devices they were designed for. It’s another big step towards ‘on device’ editing, which I’m sure is what’s coming next. The apps are fast, responsive and really rather strong for a first version, with only a few core elements missing. First is the lack of proper interaction mirroring; it’d be better if — when in preview mode — clicking a hotspot or scrolling an artboard in XD was reflected on your device. This seems obvious, but for some reason it’s omitted for now. The next is Wifi connectivity. Right now it needs a cable; woe is me. Still, it’s incredibly useful for ensuring your designs look good in real terms, and not as mere hypothetical screens on your gigantic monitor.