Learn how to create micro-interactions using auto-animate.

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. 

Ripple interactions in a website
Ripple interactions in a website
Swipe and drag effect on a touch enabled device
Swipe and drag interactions on a touch enabled device

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.

  1. To create an animated prototype in XD, select all the artboards on the canvas in Prototype mode to view the wires across the artboards.

  2. Drag a connector from a layer in the source artboard to the destination artboard. When you wire up the first element, the artboard of that element is set as the home artboard.

  3. 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.
    Auto-animate workflow
    Auto-animate workflow

    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)

  4. To preview the changes in the supported browsers on desktop, mobile or web, select the Desktop Preview   icon. 

    Obs!

    XD does not support scrolling effect when previewing auto-animated artboards.

  5. 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.

You can also check out this video to get started with auto-animate.

Viewing time: 1 minute.


Examples

Best practices

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy