Adobe XD and UI Tools of Today


When Bohemian Coding released their latest incarnation of Sketch in the Spring of 2014, it was the first time in a long time where it felt like I had a real choice over which tool I could use to design interfaces with. I, along with many others, were used to having to use the ill-equipped and bloated Photoshop to create and export deliverables, struggling to stay efficient in otherwise highly-efficient teams.

Granted, it was Mac only, but it solved so many base-level problems — full vector creation, retina support, global styles, proper export controls etc —  and it had a fervent plugin community behind it to add new and long overdue functionality. I was an early advocate of its slick interface and contextual approach, and I believe it to have been a major catalyst in changing the way that design is implemented and treated in modern workflows.

Fast forward a couple of years, though, and adoption rates at client-side are not as high as I’d like (as a guy who works predominantly freelance). PSDs are still being requested as deal breakers, and the waterfall methodology remains in full flow (sorry), unless you’re in control of the build too. This has a lot to do with Sketch being platform specific — and everyone’s heard of Photoshop — but it’s also because proper planning and research is still treated with an odd trepidation.

Other tools have entered my workflow too, as the need for rapid prototyping, interaction, wireframing and collaboration has become essential on all projects. The list is long – InVision, Marvel, Balsamic, Axure, Framer, Proto, Principle, RedPen to name but a few – with new ones seemingly released monthly. Using four or five different tools is pretty standard, each with their own learning curves, shortcuts and limitations. Having a proper tool to build UI in is super, but it still feels like a problem in its own right when that tool is a mere link in a much longer chain.

It’s with a hint of irony that it’s Adobe then, after years of neglecting UI & UX design (and having the perfect foundation already in Fireworks), who have taken on the task of shortening that chain by combining a new lightweight UI tool of their own (Adobe XD) with the ability to prototype full apps and share them instantly with the people that need them. But, how likely is it to succeed, and what’s it like to use?

Adobe XD's clean interface is the antithesis to Photoshop.

Adobe XD's clean interface is the antithesis to Photoshop.

Pretty likely I think, and a lot of fun! It’s worth noting that XD is still in Preview (v 0.510 at the time of writing), so it’s unfair to compare feature sets. That being said, it contains everything you need to make a great UI – geometry, type and decent compatibility with both Adobe cousins and Sketch itself – even if it lacks some core functionality like grids and gradients (there are workarounds though).  It’s also built from the ground up, so it’s lightening fast, super lightweight, and importantly not riddled with legacy issues. It’s also very similar in aesthetic to Sketch, but no surprises there.

Rather than run down everything XD can do (a good article on that here), I’m more interested in trying to figure out where XD will eventually sit in the landscape, and what problems it’ll be able to solve. Right now it handles asset creation, screen design, basic prototyping and community sharing pretty well. The dual-mode system (design & prototype) that is at the heart of XD is certainly a boon, and once they’ve beefed out the interactions to compete with something like (or better yet Framer.js), it has the potential to natively deal with design systems from early wireframes all the way to full device-specific prototypes. The ability to do all of this without plugin support, cutting out one or two pieces of other software in the process, is an exciting possibility.

The issue for Adobe lies in how quickly Sketch can both keep up and keep the lead. Take Craft, a new plugin from InVision, which takes XD’s lovely ‘Repeat Grid’ and ‘Design with Data’ features and plonks them straight into Sketch (and Photoshop, interestingly). It even adds interactions! Whilst XD are shipping pretty basic zoom tools, Sketch are shipping responsive, reusable symbols. It’s going to be a tough slog for Adobe to carve out ideas and tools that are unique if this evolution pattern continues; but success can be achieved if they better implement those ideas into XD than the competition, in a way which helps a designer design rather than merely adding new features to a long list of other features.

Adobe are thankfully taking a smart approach to tackle this. Since they’re operating a lean startup approach with monthly releases, new tools are regularly drip fed and informed by the community. It’s an admirable way of working, as it allows for some flexibility in how they build and iterate without dogma. As they approach v1, they’ll likely have all of the mission-critical items ticked off their UserVoice backlog (they can’t really afford not to). Their commitment to a Windows version is also significant, not only for designers like me who still have to hand off files semi-regularly from my Mac, but also for clients who won’t accept files from Sketch at all.

Even with a batch of artboards open, XD operates lag-free, allowing you to zip around and make changes without having to check your watch.

Even with a batch of artboards open, XD operates lag-free, allowing you to zip around and make changes without having to check your watch.

It’s also of note that Adobe have chosen to look at the long-standing bastions of design software, like layers, and take the time to question how they’re best used rather than shipping them in their existing form. What’s resulted from this example is the concept of ‘local layers’, which in theory will reduce visual noise for the designer by focusing in and around the areas in which they’re currently working, but still provide access to the wider context when necessary. Reading between the lines, layers won’t be the only tool that may well have its usual conventions torn up.

XD will not eliminate the need for more than one tool though — nor should it (or does it try to). I’ll still be using Illustrator for illustrating, Photoshop for photo editing etc, but If XD can natively provide a solution to screen design, wireframing, user flows, prototyping and communicating, then that’s three links removed from the chain, and a much easier workflow as a result. Since designing for the web requires far more than just software, reducing the friction for the parts of it spent at a computer is integral to doing a good job. It’s great to see both Sketch and XD making big strides to try and provide this.

But enough about what the future holds, how is it to use now? Well, I've been using XD for a real-life client for the first time over the last few weeks, and despite the problems and imperfections, it's been a breeze. Even without the ability to make a simple vertical grid!

Isaac Powell