businessdesigngeneralui/ux design

Adobe Xd – One Year of Real-World Use

Adobe Xd is Adobe’s take on UI/UX wireframing and planning, we’ve used it for the better part of one year and we thought we would share some thoughts about the app. We have used some other apps for wireframing in the past like Balsamiq, Adobe Illustrator, Adobe inDesign and more. We like Xd, but we don’t have that high-school love for it yet.

A Familiar Experience for Designers

Adobe Xd has a very Adobe Suite feel to it. It utilizes art boards similar to Adobe Illustrator, which we can certainly appreciate, a similar set of tools and a consistent UI for us to work with. The biggest reason we as a company haven’t officially adopted a tool like Axure is because we already know the Adobe Suite so well, we want to give Xd a shot, but they certainly have some work to do before we can officially call it our software of choice going forward.

Good Features, Especially for a Beta

Nice Previews, Good Transitions, Easy Links to share with people. The current (as of the day this article was written) version is 0.6.8.6. Yes, I know, a review on software that’s not even to version 1.0, but if Adobe is giving it to us Creative Cloud subscribers, we’re going to at least try it out and see if it’s worth working with.

Design v. Prototype

Design mode is exactly what you think it is. You lay out the pages, create more art boards, etc. This is similar to Adobe Illustrator, with some obvious changes specific to the UI/UX industry.

Prototype mode is where you add in links, transitions and prepare all of your work for that big meeting with the client, or with your boss. If you’re trying to make this thing as interactive as possible be prepared to set aside a good amount of time for this. We have found that on an in-depth UI/UX design in Xd, it typically takes around 15% of the total time we have in the project just to link. So if we have worked for 40 hours designing a user experience in Xd, it’s probably going to take us somewhere around 6 hours to get everything linked and transitioned properly. Part of this is because Adobe is missing several key features that need to make it’s way into the app sooner than later…even before v1.0.

Missing: Common UI/UX Tools / Features

Let us first start by stating the facts, Xd is a BETA piece of software, we know it’s not fully-functional, but again, if you’re going to give it to us, we’re going to use it.

Overlays, hover functionality, and interactive tidbits.

Many of us are designing a user experience for an app that a client is paying us to design and not just for our own pleasure. Often times these key stakeholders want to have a clear picture painted for them as to how it’s going to function. Having the ability to create overlays, hover states and small interactive pieces on-the-fly would be an exceptional feature add to Xd. See my comment above about the length of time it takes to setup links, transitions, etc. Part of that time is trying to mock up a hover functionality by duplicating a screen, adding in the hover states, linking it, etc. Just spitballing here, but if I could save a grouping of elements as an interactive element of some sort could be a way to solve this. We have to lead these stakeholders directly to the water, not just give them a hand-drawn map.

Linking Needs to get Smart in a Hurry

We live in a time of self-driving cars, affordable home automation and smart watches, yet Adobe really missed the boat when it came to having a feature that we feel is as basic as they come, linking. You can add in links, you can add in transitions, etc. What you cannot do is copy and paste the same links or transitions over and over. If I have 20 art boards, all with the same 6 top navigation links that all link consistently, I have to go in to every board and add a link to every element. that’s 120 links just to make sure the top navigation is linked when you are sitting there with your client. It’s a massive budget eater on projects that often times do not have an endless budget. There are so many feature requests that have very lengthy discussion threads on the Adobe Xd forums, if Adobe is smart they will start working on some of those features sooner than later.

Our Xd Wishlist

  1. Global nav linking or copy / paste links
  2. Hover states
  3. Open in new tab feature

Adobe Xd Needs to Keep a Finger on the Pulse of the Community

website wireframe sketch and programming code on digital tablet
They have one of the most-active communities in the world in terms of willingness to provide feedback on products, as a UI/UX designer I understand that not all ideas are good ideas, but the missing features we outlined in this post we feel aren’t super special. In fact, we feel that these features, especially the link fiasco, should have been in version 0.1.0. If you’re going to give us the ability to generate an interactive version of these boards, you should provide a decent way of managing a lot of links.