By Gary simon - Oct 20, 2017
As a Windows guy who spent over a decade using Photoshop to produce mockups, I was very excited when I first learned about Adobe XD (Experience Design). A new tool dedicated specifically to creating UI's? Awesome!
Since its first beta release, I've been using it to create adobe xd tutorials and also on my own projects.
For awhile, they issued monthly updates for Windows users to get it on par with the Mac version, which was the first OS the beta was shipped on.
To the dismay of both Mac and Windows XD users, several key features were never introduced. In this article, we'll first take a look at what Adobe XD gets right as a UI design tool, and then take a look at those key features that they desparately need to integrate going forward.
A Simplified Interface
This particular aspect of XD is a pleasure if you came from a Photoshop background. Photoshop is a multi-purpose software with a million different tools, features and options.
The XD interface is likely 1/20th of Photoshop; and rightly so, its purpose is singular (UI design & prototyping).
XD isn't just a design tool, it allows you to create interactive prototypes. You create 2 or more artboards, and suddenly you're able to connect elements together based on click events, and you're able to specify a few attributes associated with each event, such as transition, easing and duration.
One drawback is that the interactivity is quite limited at this point, but I'll get back into that later on in this article.
UI's contain content that repeats, naturally. In the days of Photoshop, we would manually replicate a group and drag it down (or to the right).
The repeating grid tool allows users to select a layer, or group of layers, click a "Repeat Grid" button, and either drag it down to create a vertical repeating list, or to the right for a horizontal repeating list.
You can also easily replace the repeated content, such as photographs or even data.
Sharing & Collaboration
Embedded in the interface is a share button that allows you to specify a title, thumbnail and the ability to toggle on and off comments. All basic stuff for sharing and showcasing your work.
There's an Adobe XD Mobile App that allows you to use your mockup on your mobile device. This is definitely handy and helps put your mockup in a real-world environment.
Despite all of the great features above, there are 3 key areas that I feel (along with plenty of others) that XD misses the mark pretty badly, especially given they just released the official 1.0 version without integrating these very-requested features.
No Fixed Elements
The inability to declare certain UI elements (such as headers, footers, menus, sidebars, etc..) as being sticky, or fixed, is a big downer. Sure, not every UI needs fixed elements, but many certainly do.
Personally, this is what I wanted to see the most: the ability to change or animate specific UI elements as opposed to just the page transitions. As it stands, the only aspect that shows any animation in an Adobe XD prototype is the page transition animations.
Unfortunately, you can't do something as simple as change a button's background color on hover. I'd like to see XD introduce the ability to create microinterations that allow designers to simulate all of the wonderful UI interactions that modern frontend frameworks like Angular, Vue and React allow us to integrate -- along with CSS.
No Scrollable Areas
Interested in using Adobe XD to design and prototype a chat app? Good luck with that, because your chat window will not scroll. The only element that scrolls in an Adobe XD artboard is the entire page itself, not individual UI elements that may have the CSS property of overflow: scroll;
There are a bunch of other potential features, but personally, these are the three that Adobe needs to integrate.
Despite the obvious shortcomings of Adobe XD, I still use it. I don't deal with clients, so I don't necessarily need to prototype fixed elements, microinteractions and scrollable areas. Would I still like that ability? Hell yeah, and many others do.
If Adobe can integrate just those three features, I think XD can become quite a competitor in the realm of UI design & prototyping tools.
I've created a number of both written and video recorded tutorials based on Adobe XD. Being that Adobe XD is now official at 1.0, you can expect more of these tutorials to come!
Check these tutorials out below: