Adobe XD Review

Adobe XD just hit v1.0, so now seems like a good time to share some of our experiences. Over the past two months a set of Designers and Program Managers have been using Adobe XD to design a new large feature for the Microsoft Azure Portal (special thanks go to Alexander Frankel and Catherine Jou). Even as a Beta, Adobe XD has been gaining features at a rapid pace. At this point, in my opinion, it is ready to be used as our primary design tool.

What we need from interaction design software

In recent years, it seems like there have been a lot of new design and prototyping tools popping up. As a design team, we usually try them out – and overall, we use these high-level requirements to evaluate them:

• Graphic design – capability to create vector and/or pixel-perfect screens.
• Prototyping – capability to connect screens in non-linear flows via interaction points.
• Collaboration – program managers, developers, and other team members must view our designs and leave comments.
• Research – designs must either be usable or exportable to some format that can be consumed by Design Researchers and usability participants.

We use PowerPoint a lot because it makes collaboration with non-designers very easy... but it is lacking in the design and prototyping department. Tools like Photoshop and Illustrator are fantastic graphic design tools, but have nothing in the way of prototyping. Newer tools that focus on prototyping often lack basic design tools, or are too difficult for non-designers to access.

As of a few months ago we felt that there wasn’t a solid UX tool that satisfied all our main requirements. But after evaluating and using Adobe XD for the past two months, we have a good idea of the pros and cons.

What we liked

• It’s like Illustrator Lite – The design tools are familiar, albeit a somewhat simplified version of other Adobe products.
• Artboards – XD is made to spin off copies of artboards easily, so user flows come together quickly. Our scenarios started to come together as groups of artboards, and the non-linear organization helped us think about scenario flows.
• Prototyping is extremely easy – flip over to prototype mode, select any object or group, drag a line to the screen where it should navigate. It’s so easy that you will likely turn all of your designs into prototypes.
• Symbols and Shared Assets – groups of shapes can be turned into symbols and re-used. Colors and type styles can be defined and re-used as well – and shared across your team with CC Libraries.
• Repeat Grid!!!! – any kind of repeating UI element (think List Views, or gallery views) - just design one row or item, and expanding via Repeat Grid intelligently creates duplicates. This is a small feature, but it’s amazing how much of a time saver it is. You can drag text files to populate columns of data in list views, and photos from file explorer to populate gallery grids.
• Very active community and development – some rough edges in the Beta are annoying, but each month or two brings new updates and features. Looking into their UserVoice page shows what the XD team is working on next.
• Performance — XD opens fast, and files load very quickly. Zooming/panning was very smooth even for 100+ artboards. PowerPoint becomes difficult/time consuming to navigate when the number of screens get large. Illustrator does not perform well for large numbers of artboards.
• Cross-platform – XD works for anybody who already has an Adobe CC license (which is most of us UX folks, and even some PM folks) on Windows or Mac.

What was not so great

• Hover states / little interactions – how it’s set up now, *any* change to the UI is a new screen. Hover states are not possible. Simple controls like dropdowns suddenly become 3 or 4 screens. This feature is on their backlog.
• Scrolling – right now, if the design goes outside the artboard, the whole screen scrolls in prototype mode. There is no way to have part of the UI stationary and part that scrolls. This feature is currently being developed.
• Global masters – Symbols go a very long way, but global backgrounds / masters would replace a lot of the symbols for common chrome elements.
• Published prototypes have public links – Sharing prototypes to non-Adobe CC team members is good, but it’s only available via links available to the general internet. Password protected links are in the backlog.
• Export to local prototype – even though you can publish a prototype to a public link (which may have confidentiality concerns), there is no “save locally as web project”.
• Sync comments – published link prototypes have the option of other people providing comments for each screen (good) but those comments only live online, not in the main application.
• Editability – People without Adobe CC won’t be able to make edits to the file. Even those with Adobe CC but not very familiar with it, XD’s super large canvas is a unique way to navigate a project, and takes some getting used to.
• Code view / Redlines – the last stage of any feature is handing off design specs to a developer… there are no features here around Redline views or generating CSS.
• Relatively high barrier to entry for non-designers — It’s much easier to start with than Illustrator or Photoshop, but it’s not PowerPoint. It would be great if there were some free web editor, or text-only editing mode that helps collaborate with content owners / program managers (who aren’t necessarily designers).
• Project scaling – performance is pretty good, but projects get large very quickly. This is almost a pro – being able to explore ideas in bulk – but it also means we have to keep an eye on file sizes, and how many projects we have open at once.

With the update cadence, I feel like a lot of these issues will be resolved quickly. The XD UserVoice page is a good sneak peek into features they have started developing and features in their backlog.

How we tested Adobe XD

Most of our current features have existing design assets in PowerPoint or Illustrator, so switching over for current features seemed costly. When a new feature came along, we decided to use it as an opportunity to design with Adobe XD from the start. Over the course of a few weeks we were up to a large project with over 150 screens, encompassing a couple main scenario flows, some A/B brainstorming ideas, and some other miscellaneous stuff.

There were two designers and a PM working on the feature – we had daily scrums to divvy out work, and somebody was in charge of manually merging sections of artboards into a master iteration for that day (a similar process we’ve used with larger PowerPoint files). Over the course of the project we also grew a stand-alone UI Toolkit, which allowed us to get new screens and sections up and running quickly. At its peak, we hit the Outlook attachment file size limit of 35MB, at that point we started to pare down some of the extra screens. In larger-team reviews we would switch between the design view (shown below) and the prototype / clickthrough mode. XD also has a “Generate link” capability that creates a publicly-accessible URL – we tended to share these out, so people could see our progress even if they weren’t in meetings with us.

The size of this project certainly stress-tested the application. The August XD update had a large performance improvement, so even with our 150ish screens the app is reasonably well performant.

That’s it!

Since we started this project we’ve been getting lots of questions, so hopefully this little review helps. Feel free to email me Matt LaGrandeur with any other questions or comments. 

Thanks!