5 Reasons Why Adobe XD will Rule UI Design Tools

We all know design tools, and consider none of them perfect. We also fret trying new programs, falling back on familiar ones. However, this article will inspire you to start using and discovering new tools!We at UX studio are not a part of the Adobe Group. Some of us don't even like their applications at all. Still, let me tell you five reasons Adobe XD will rule the UI design tools and prototyping. It offers:

1. Seamless work with other Adobe products
2. Amazing animations with one click
3. Voice control of your prototype
4. A native app for macOS and Windows
5. Easy collaboration with developers

Works seamlessly with other Adobe products

At UX studio, we have a weekly self-development training called UI challenge. This challenge for the UI designers at the company has two rules:

• Designers have to choose one topic (they can choose from a list)
• Designers should present the finished design to the whole UI designer team

I had a UI design challenge to try out the XD Auto-Animate function. It gave me a little experimentation time to play around with this exciting feature. But first things first, I had to prepare: pictures to cut, icons to build and a neat landing page to design. The curiosity to use the Adobe apps on these tasks was killing me.

As an experienced designer, I could’ve exported the pictures in PNG and the icons in SVG. But I only wanted to copy-paste all the elements from the running applications. So I did and… It WORKED! As seamlessly as I expected! Can you imagine? We all know Adobe applications can sometimes work barmy but not in this case!

The UI design workflow is going to get much more comfortable and faster in the future. We won’t have to export all the file armies or create horribly big folders to contain all of our assets. We’ll just copy and paste – nothing more. One move and you’ll have it!

After I effortlessly imported all the files, I couldn’t wait to try to open my project in After Effects. I mostly wanted to try Auto-Animate in XD, but I thought it couldn’t hurt if I made my prototype cutting-edge with some additional After Effects fine-tuning. I can only recommend you try it out.

Amazing animations with one click

Adobe Max introduced the new Auto-Animate XD feature in October 2018. As they describe Auto-Animate, Adobe XD has evolved from a primary click-through application to provide you different prototyping options such as time, tap, drag and voice. They made it possible to combine Auto-Animate with drag gestures and create micro-interactions across art-boards for rich prototype experiences such as onboarding flows, animations for carousels, cards, and lists or progress indicators.

Deceptively simple to use, Auto-Animate creates stunning effects and transitions that help you communicate an animated end-user experience. Drag Gestures in XD takes the Auto-Animate feature one step further by allowing you to simulate the drag experience of touch-enabled devices.

Above, I mentioned my decision to take this new feature for a test run. I created a few experiences by designing the chosen UI challenge theme (a Nike webshop landing page concept). Disclaimer: I did these as simple UI experiments, so please don't judge the usability of these concepts! ;) The first part:

This animation consists of a list of categories which move like the iOS date/time picker. I had to do nothing more, only create the two statuses and set the action to Auto-Animate to the next artboard with a 0.3-second easing. Nothing else, the animation appears without any significant effort, easy cheese!

XD has its flaws, though. At the moment you can not set hover state in the prototype, so I had to set the animation to play on click. This meant I had to specifically name all the layers right to keep the animation from falling apart. Besides the naming, the ease also amazed me! XD automatically made the product card at the center larger and pushed the other two outward. I didn’t plan to do this but it happened anyway. It literally added a nice touch to my design.

I could say I’ve loaded this gun but haven’t shot all the bullets. This just scratched the surface of the Auto-Animation feature. Although sometimes a bug occurred, it still impressed me. They could still improve a lot, but it will evolve into something more significant because of its easy-to-use functionality. I look forward to XD updates and check every change regarding the Auto-Animate feature.

Control prototype with your voice

The same update that brought us Auto-Animate allows us to interact with our prototypes like never before. Voice triggers and speech playback let us take users beyond the screen, enabling voice control of the prototype. They have made this unique to XD and (currently) no other prototyping software has it. As new voice-first services like Alexa, Siri and Google Assistant grow ever more significant, users are getting used to talking to their phone. That makes it critical. Back to the voice prototyping feature. Two possibilities could make it useful:

• Designing interfaces that rely on voice navigation
• Making a design presentation without "physical" input

Before you start designing a voice interface, first create your dialog flows. Dialog flow visualises the whole conversation between the user and the machine. The user asks and the machine replies.

After you build this dialog draft for your design, set the trigger to "voice" instead of "click" or "drag". You can type in the required command as well. In addition to adding triggers for user input, you can also make use of the "Speech Playback" feature to simulate Siri’s response. In my example project, the dialog looks like this:

- Me: Siri, pick me a pair of Nike shoes.

- Siri: I chose Nike Air Max 720 because it fits the best!

- Me: Siri, pick size 41.

- Siri: No offence, but you have small feet.

- Me: Siri, add to cart, please.

- Siri: I’ve added the Nike shoes to your cart! Have a "Nike" day!

Here you can see the voice prototype result:

As mentioned, in addition to the design interface that relies on voice navigation, you can even gain client engagement with a "voice prototype" presentation.

Imagine standing in front of numerous people or at a meeting with clients. Nothing in hand, you have no stand or computer, only your voice. Slide by slide, you go through your presentation without any physical input on the screens, and then launch the engagement rocket of the voice-controlled prototype. It delivers great relief because you won't have any problem with the cables or internet connections. It’ll all come off without a hitch. Besides, it will amaze the participants. Try it, you won't regret it!

For more excellent thoughts, check our post about voice navigation: 3 Reasons Why Voice Navigation Is The Next Big Thing (+ UX Design Tips).

Native app for macOS and Windows

At the beginning of my UX/UI designer career, I started to design user interfaces in Adobe Photoshop (I think everyone did that time). It went OK the first time, but I noticed it tried to kill my computer memory when I duplicated some art-boards. That provided the first, most compelling reason why I needed to change.

So I switched to Sketch for a while, but I found and read Adobe XD promises. Adobe Group promises they will release a Windows version of XD and collaboration between platforms. Why do I find this so important?

At UX Studio, we work on Mac but I like UX/UI and can't stop designing when I get home. However, at home, I have a strong Windows-based PC and don’t plan to buy an Apple. Thanks, Adobe, for releasing the collaboration and the Windows-native app of XD in 2018. Creating a user interface now has no limits from anywhere, any time, even if you have a Windows and macOS computer as well.

Easy collaboration with developers

Every designing process can cause many difficulties in handing of the finished design to developers. Everybody has the same issue: the assets problem. The cheeky assets always get lost in "space".

To solve the problems and battles between designers and developers, a small team from Istanbul and San Francisco created the application presently known worldwide as Zeplin. I suppose Zeplin solution made Adobe XD put the "share for developers" opportunity in the application to help developers and designers collaborate efficiently. This doesn’t even mention how the integrated features motivate you to stay in Adobe XD, which you will. Also, it wouldn't count as a third-party problem like those I often experience at Zeplin.

Adobe XD automatically generates accurate specifications, assets and code details from the UI design. You can set any chosen elements, icons or pictures to “asset” while editing. Then developers can download them in a suitable size in the developers view. They no longer watch massive design files get lost or fear random changes in the design because we don’t have to send them the source files.

Takeaways

To sum up, Adobe XD will conquer the UI world because:

• We don’t need to build file armies on our computer, just copy-paste all the created assets.
• Auto-Animation of Adobe XD will evolve into something more significant due to its easy-to-use functionality.
• Besides the Auto-Animation, the unique XD voice navigation feature will change prototyping.
• Designing will never stop because of the native applications for macOS and Windows.
• And last but not least, thanks to Adobe XD, the developer view (sharing with the developer) helps communicate and work efficiently with developers.

As UX/UI designers, we commit to finding the best way to make usable products with useable tools.

We have more exciting articles and news for you!

Want to improve your customer's loyalty with a great design? Here is an article about awesome app home pages with examples.

Interested in product design and research? Have a look at our Product Design Book - a comprehensive guide on designing digital products people will love.

Ux studio organises Product Design Course in English, where you can learn customer-centric digital product design and UX methods from our team in an intensive four-day training where you lead your very first UX design project.

Hurry up and apply here :)