Using Adobe XD for Commercial Projects
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.
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.
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.
Making the Switch to XD?
Would I recommend XD for use on your commercial projects today though? That depends. If you’re looking for a screen design tool that will cover everything from low fidelity wireframes to high fidelity comps, with some basic prototyping thrown in, absolutely. I think it’s the best tool on the market for that. But if you’re looking at it for advanced prototyping (ala Flinto), then it’s not quite ready. Likewise I wouldn’t migrate an existing project over unless it’s in its early stages, even with XD's ability to directly handle Sketch imports.
Using XD as part of a team can work too, but is largely dependant on your existing workflow, and what tools you or your team rely on. For example, if you regularly use CC Libraries to transport, edit and maintain your files, then XD's currently insular relationship with sister software may come as a shock. Likewise, if you’re used to handing over specced designs via tools like Zeppelin, then your dev is going to hate you unless you can handle the code. Ultimately, freelancers and smaller teams can probably start using XD today, whereas larger teams may want to wait for additional functionality to reduce any switchover friction.
Perhaps the biggest compliment I can give to XD is that it’s now more enjoyable for me to design. I’m spending far less time waiting and more time doing, which not only makes me a more efficient designer, but probably a better one. XD’s ‘killer feature’ is not even a feature; it’s the speed of it. It's seriously fast. Indeed, the real challenge for Adobe is to retain that speed whilst achieving feature parity with competitors. November’s AdobeMAX conference will likely show us just how they intend to do that.
As for me, since my workflow as a freelancer has mostly been under my control, I've no regrets in my decision to start using XD a little earlier than anticipated. In fact, I'm going to continue to use XD as my primary design tool, and it'd be cool if you did too.
You can chat to me on Twitter.