Adobe XD Essential Training: Prototype
1h 18mBeginner2021-11-04
Authors

Dani Beaumont
Managing innovative apps in the web and design space for 25+ years
Course details
Fixing a fundamental mistake in a web app after it has been released can be costly and time-consuming. In this course, learn how to avoid such problems by building a high-fidelity, fully interactive prototype that can help you spot issues early in the design process. Instructor Dani Beaumont, a principal product manager on Adobe XD, shares insider tips for creating, sharing, and revising prototypes effectively for user research and testing projects using Adobe XD. Explore different transitions, copy-and-paste interactions, and linking menu items. Go over applying anchor links, preserving scroll position, navigating with keyboards and gamepads, and defining interactions for voice recognition and speech playback. Learn how to add animation and motion to your project with Auto-Animate.
Skills covered
WireframingUser Interface PrototypingAdobe XDUX DesignUser ExperienceAdobeEssential TrainingWeb Development
Concepts
0. Introduction
- 01 - Welcome to Adobe XD - Prototype
1. Windows Management
- 02 - Desktop preview app
- 03 - Setting viewport height
- 04 - Fixed position while scrolling
2. Triggers and Interactions
- 05 - Tap and Previous Artboard transition
- 06 - Hover transition
- 07 - Overlay transitions
- 08 - Copy and paste interaction
- 09 - Adding menu navigation
- 10 - Anchor links (Scroll To interaction)
- 11 - Preserving scroll position
- 12 - Keyboards and game pads
- 13 - Voice triggers with speech playback
- 14 - Hyperlinks
3. Auto-Animate Interactions
- 15 - Introducing auto-animate
- 16 - Drag interaction
- 17 - Integrating video
- 18 - Integrating Lottie
- 19 - Exporting to After Effects
4. Conclusion
- 20 - Where to go to from here