Adobe XD Essential Training: Prototype and Share (2018)

Learn how to build rich, interactive UX prototypes, share with stakeholders to validate and collect feedback, and then hand them off to developers to build the app or website.

Adobe XD is a fantastic platform for UX design that allows you to create rich prototypes with fixed elements, overlays, and complex animations. It also has powerful features for capturing feedback and for developer handoff. Demian Borba is a strategic development manager for XD and, in this course, he shares insider tips on prototyping and sharing design and prototypes with XD. Learn how to build artboards into clickable prototypes with transitions and detailed microinteractions; record prototypes as videos; preview on iOS and Android; and export to After Effects. Then, when it's time for sharing, create web links with your work for stakeholders to review with comments and pins, and with developers via Design Spec links, where they can get all the info they need, including assets.

Introduction

• Prototype your designs efficiently
• What is XD?
• What should you know?

1. Prototype Mode Basics

• Why do we prototype?
• Create and remove interactions
• Copy and paste interactions
• Record your interaction
• Understand transitions and easing
• Preserve the scroll position
• Fix elements when scrolling
• Overlays for side menus, modals, and keyboards
• Create transitions triggered by Time
• Create animations within the same artboard with Auto-Animate
• Mix Auto-Animate with Time
• Create transitions triggered by Drag

2. Preview Your Mobile Projects with XD

• Real-time preview via USB
• Artboards and hotspot hints
• Load XD documents from CC Files

3. Share a Prototype on the Web

• Share a prototype as a web link
• Get feedback on web prototypes
• Manage links and the access to them
• The home artboard and multiple flows
• Use XD to deliver presentations
• Email a copy

4. Export Assets for Developers

• Export assets as PNG, SVG, PDF, or JPG
• Batch exporting assets
• Create a design spec as a web link
• Export to After Effects

Conclusion

• Next steps