For a while, XD offered only basic transition types that mimicked your phone’s native transitions such as push, slide, and dissolve. Those offerings were great for a basic feel for user flow. With the introduction of auto-animate, you can visualize the movement of content through animated prototypes.
You can use auto-animate to create stunning effects like a YouTube swipe/drag or ripple interactions for an engaging and interactive end-user experience.
To create animations, duplicate an artboard, modify object properties, such as size, position, rotation, and apply an auto-animate action between artboards. You can then play back or record these animations in the preview window, web browser, or mobile applications and share them with your stakeholders for collaborative reviews. This helps you tell a better prototype story while adding a rich layer to the overall user experience.
Before you create a prototype, ensure that the objects you want to animate have the same layer name between each artboards. Shipped with XD 13.0, auto-animate works only on specific properties; read Supported and unsupported properties for more information.
In the Trigger head-up-display, set the following options:
- Trigger: set the gesture type to Drag, Tap, or Voice. If you want to simulate a dragging card effect, select Drag.
- Action: set to Auto-Animate.
- Destination: set the destination to the second artboard.
- Easing: select the options from the drop-down list.
A. Trigger type to drag B. Action to auto-animate C. Destination artboard D. Easing options
Want to add advanced micro-interactions to your designs? Enhance your designs in After-Effects. Watch this video for a workflow walkthrough.
Export from Adobe XD to After-Effects (Viewing time: 1 minute)
To preview the changes in the supported browsers on desktop, mobile or web, select the Desktop Preview icon.
XD does not support scrolling effect when previewing auto-animated artboards.
To share your prototype with your stakeholders from the XD desktop app, click Share and choose Share for Review (for Prototype) or Share for Development (for design specs). For more information on sharing prototypes and design specs, see Share prototypes and design specs.