XD, Adobe's Contender In The UX Tool Race

A while back we shared a post about Sketch, why we converted, and what we love about it. It has now become an integral part of our workflow but that didn’t stop us from trying out other tools. As designers we need to have an extensive skillset, and a large repertoire of tools we can put that skillset to use in. And sometimes, we come across a tool that proves very welcoming and accomodating to our skills and working style. Adobe XD, is one of those tools.

Released in 2016, Adobe XD (the XD stands for experience design), was a little late to the world of UX/Prototyping tools. But it seems like Adobe made good use of both time and money and unveiled a seriously worthy contender to Sketch, Figma, and Invision. We gave it a spin, truly enjoyed the experience, and decided to share it with you with the hope of sparking your curiosity. If you are a creative cloud subscriber, you have access to the app and can use it without limitation, but if you don’t have a subscription and would like to try it you can still download it standalone for free but will only be able to work on one active project at a time.

What we liked:

When you first open up Adobe XD, you are prompted to answer a few questions about your skills, intent, and career. You may have the urge to quickly dismiss this as yet another data vacuum, but it actually serves the purpose of customizing what you are greeted with, namely a tutorial and walkthrough. Once you get past this step, you are greeted with an interface that seems out of the norm for Adobe, a style that seems to have become the standard for tools in this domain, one that we love being greeted with. That style can be summed up as clean, modern, and clutter-free.

If you have any experience with Adobe products, the learning curve for XD is practically non-existent, and if you don’t it’s an hour or so of entertaining poking and prodding. Similar to its competition, Adobe has integrated both prototyping and designing into one tool and have given users a tabbed layout to switch between the two.

The design space gives you the usual tools you would expect (pen, shapes, border, fill, etc.) with a few extras that we think are very well thought out. One example is the ease with which you can make masks. Judging by the number of tutorials online for creating masks, this procedure is generally counter-intuitive in other Adobe products. In XD, however, it is as simple as placing a shape over the object you wish to mask, selecting both, and hitting the shortcut Cmd+Shift+M. It’s fast and it makes sense.

In order to mask the image on the bottom left
We add a simple shape on top of it.
And hit mask. That simple.

Another feature that really proves Adobe’s intent on making XD a true UX tool, is the Repeat Grid. Iterations of the same icon, image, or text are very common in apps and it’s hardly any fun creating them manually. By choosing the object you wish to clone, clicking Repeat Grid, and dragging its bounding box, you can replicate it in both the horizontal and vertical direction. You can even customize the spacing between them.

Repeat horizontally
Or vertically
Change the margin space by playing with the pink bar

Over on the prototyping side of XD, you have, in essence, one option - connecting artboards or layers that have transitions between them. Once clicked on, a blue arrow appears on the border of your selection. You can either drag this to where you want the transition to go to or choose from a dropdown in the options panel that pops up when clicked. Adobe have been working hard at adding many features in this tab. A handy one is Auto-animate, which aids in creating familiar interactions such as dragging.

Selecting an artboard brings up the blue button icon

Which you can click on and choose transitions and animations

After playing around with it for some time and racking up the artboards we also realized how fast and smooth XD handles itself. It seems like Adobe have finally put in considerable effort in memory management. Additionally, XD benefits from both the ecosystem (sharing assets and importing files), and the financial prowess of Adobe - notable in their emphasis on and encouragement of plugin development, an area they need to play serious catchup with Sketch.

What we didn’t like:

What we liked greatly outweighed what we didn’t like about XD but there are some things we think need ironing. For starters, we are not given text editing capabilities. For example, there is no option to add an understroke and, if so inclined, you’d have to add strokes under each line. Likewise, image editing capabilities are also an area that needs improvement. The slightest modification has to be done in another program. There’s also no way, currently, of designing hover states and individually scrollable areas. Finally, you can only share your work with others through a public link that has no password protection option, a security gap we think needs fixing.

We should, however, emphasise Adobe is taking into consideration the voice of the community and are adding most of the missing features we mentioned and more. You can look at what is requested, what is being worked on, and what is in their backlog here.

There’s a lot of activity and competition in the UX/Prototyping field, leaving us designers with many options to choose from. Of those options, some are clearly taking the lead, and Adobe XD seems to be one of them. The app works better than expected and Adobe have shown their intent clearly through their rapid iterations and close communication with their users. If you haven’t yet, we recommend you give it a try. Be prepared to be delightfully surprised.