Day One with Adobe XD: All The Resources You Need to Start Designing, Prototyping, and Sharing No Matter Your UX Skill Level

Adobe XD is your one-stop UX/UI tool for designing, prototyping, and sharing web and app prototypes. As Senior Creative Cloud Evangelist Paul Trani puts it, now is the perfect time to start learning the program, at the ground level. As the tool continues to grow and add features, you’ll become a UX leader in this skill set in no time. Fortunately for all of us, Paul is happy to help launch you on the right path.

At his Adobe MAX lab, Mastering Adobe XD for Beginners Paul showed UX/UI designers and enthusiasts of all skill levels just how easy it is to start creating. We asked him to share some of his top tips for jumping right into XD, and gathered a few resources to help you start creating and sharing amazing website and app prototypes from day one.

Come up with an idea.****

Before you launch, think about apps or websites you use on a regular basis. Take notes on what you like about them, so that when you launch XD, you know where to start and what you’d like your prototype to look like. If you need some extra inspiration, head over to Behance and search for projects made with Adobe XD to see what others have created.

“Look at what you like using, and take hints for those apps. It’s going to help your designing because those popular apps have already put a lot of work into those apps, and then it’s more stepping on the shoulders of giants,” Paul said.

When you open XD, you’ll see a blank page. This is your canvas to create any type of website or app you’d like, formatted for any device you want to see it on. If starting from scratch is intimidating, the sample app on the start screen, is a great place to begin.

“Open the sample file, check it out, and start playing around with it. It’s there when you launch XD, and it’s a really great place to get a feel for the program and start imagining what your app would look like.,” he said.

Start designing.** **

After you’ve played with the sample app, it’s time to create your own website or app from scratch. Paul recommends taking a subject or activity you’re interested in and creating a design and prototype based on that.The best place to start, once you open your blank page in XD, is to get to know some of the tools at your disposal. This tutorial will help you get to know the interface and what’s available to you in Design mode.

That tutorial will also introduce you to the basic processes to import images to create a background for your artboards/app screens, basic drawing tools to make buttons and icons, and the powerful Repeat Grid function, which allows you to easily create and update repeating design elements like lists and grids across multiple artboards in your app (explore the Repeat Grid function here).

“The great thing about Adobe XD is it’s simple to learn, and it’s still only at version 1.0, so it’s not as intimidating as a program like Photoshop or Illustrator. You’re not overwhelmed with tools and you’re not going to get lost in the app,” Paul said.

When you’re ready to get a little more sophisticated with your buttons, icons, and other graphics in your design, check out this full tutorial on how to use Adobe XD’s Pen tool. There are also iOS, Android, and Windows UI kits that will help you replicate the screen experiences, at real-life sizes. Just go to File,then Get UI Kits for a direct link. We’ve also developed two free wireframe UI kits for mobile and web to help you get started.

Wire up a prototype.

Adobe XD also lets you wire your multiple app screens together in prototype mode, so you can communicate user flows seamlessly.

By simply adding interactions (using a variety of animations) you can create transitions between your artboards to simulate the flow of your app. It’s simple to do, and you can follow the steps in this tutorial to turn your static designs into interactive prototypes.

“It makes the whole idea of building an app very tangible. You actually feel like you’re designing and coding an app, even though you’re just building a prototype with no coding experience required. It’s super fun,” Paul said.

Once you’ve wired up your prototype, you’re also able to preview it on your Mac or Windows 10 desktop or on any iOS or Android device via the Adobe XD mobile app, available in the Apple App Store or Google Play Store.

Share and collect feedback.

Whether you’re looking to test the user experience of your app or get feedback from team members, Adobe XD has a variety of ways to show others and collaborate.

Since you’re just starting out, you’ll probably want to simply send your app design to some friends to check out the interactive sharing and feedback features. After a brief introduction showing you how to how to record a video of your app in action, this second tutorial video demonstrates how to create a live link to your project that you can send your friends. Anyone with that link can access your prototype, interact with it, leave comments, and mark-up the page with their feedback.

“Some things work, and some things don’t, and trying and failing can be useful too. You don’t get too tied up in your way of thinking, and that’s what’s great about XD’s ability to prototype and share with others. Your thinking could be completely wrong— feedback will fix that,” Paul said.

You can share your design with anyone you want to, regardless of whether they have a Creative Cloud account or not. Take their feedback, make changes, and play around until it’s time to share the next iteration of your design.

Next steps.

Adobe XD is designed to be easy to jump into, but still powerful enough to be an essential business tool for any UX designer who wants to design, prototype, and share quickly and efficiently. There are a host of other functions to explore, and once you’re ready to add a few more tools to your belt you can check out this video introducing you to shortcuts and features like copying text styles, working with ghosted images, and creating image fills.

“The great thing about Adobe XD is that it’s simple to learn, and it’s still only in version 1.0. It’s everything you need to design something, and then prototype it fast,” Paul said.

For more training on designing, prototyping, and sharing in Adobe XD, check out Paul Trani’s Lynda.com course, and for more in-depth Adobe XD tutorials, click here.