XD Prototyping in 2020 - A UI/UX Designer's Perspective

App Design 2 min read
Adobe Experience Design June Update
Mike Schwartz - Adobe Blog

My Experience

I have been XD prototyping for the past few years and here are some thoughts from my experience using this tool.

When I first started designing applications I was using Adobe Illustrator to create mockups. Unfortunately, my laptop with 16GB RAM was still chugging when creating a large number of Art Boards.

But once I discovered Adobe XD everything improved. My design process, quality of work and my computer was able to run smoothly. But the major factor that Illustrator of Photoshop doesn't have is the prototyping functionality.

As a UI/UX designer, the process of design and prototyping is coupled and we are able to get much better feedback with prototype in hand.

XD Prototyping

Adobe XD Prototyping transitions gif
Demian Borba - Adobe Blog

Using all the features I explained in my previous blog, XD has helped me produce quality prototypes. If you are looking for a tool that provides working prototypes, this is it.

XD prototyping makes it so easy to connect two separate Art Boards. Creating a working prototype is as simple as selecting an element of a screen and click and drag the arrow to the screen you wish to transition to.

My tip would be to start prototyping as you design the high-fidelity versions of the application/website. It can save a lot of time and ensures that you don't miss any important connection.

Also, if you copy & paste a recurring element, like the navigation bar, all the links remain and will save having to connect every link within the element.

XD Prototyping Testing

Now, you have all your Art Boards connected. How do you see your prototype? For the new users, the small ‘Play’ button in the top right will open a live preview of your design.

XD Test Prototype Button

This feature is so useful for many reasons. But when you’re finished with your prototype, you can share a link to anyone and they can play around with it too.

What is also cool about this feature is that you can test your designs on actual devices too. If you connect your iOS or Android device to your computer and click the small ‘Phone’ icon, your design can be viewed and tested on your mobile device.

XD Mobile test Button

This would only be useful for designs for tablets or phones.

Transitions

For those that want more flair or a real transition and feel on their prototype. Selecting different types of transitions would be the way to go.

XD prototyping provides some awesome settings that can spice up your prototype. Once a connection is created, additional options are available on the right side of the application. Those options include:

  • Triggers
  • Transitions
  • Animation
  • Audio Playback
  • Speech Playback
  • & Scrolling

With this in mind, these little changes can make your prototype look 10x better and can really impress the client. letsxd.com is a great resource to learn more about different transitions and triggers.

Sharing

Now, let’s talk about sharing. XD Prototyping gives users the opportunity to share their prototype for feedback and to showcase their designs.

XD Share

For this reason, XD sharing is great for user testing, feedback or just presenting. A simple click on ‘Share’ and ‘Create Link’ and you can show off your awesome new prototype.

My XD Prototyping Thoughts

This program is so simple and easy to use. I would recommend any UI/UX designer to give it a go. With Adobe always updating their applications, this program will have new features every month that I get to try out. I can’t wait to see what Adobe does next.

XD Adobe Adobe XD xd prototyping build ux ui/ux Web Design designer 2020