Learn how to design and prototype using Auto-Animate with Drag gestures.

Auto-Animate allows you to easily create prototypes with immersive animated transitions. Simply duplicate an artboard, modify object properties, such as size, position, rotation, and apply an Auto-Animate action to create an animated transition between artboards. To use Auto-Animate, ensure that the objects you are looking to animate have the same layer name between each of the artboards.

How does auto-animate work?

Traditionally, designers used multiple transitions across various artboards to wire their prototype interactions.  With Auto-Animate, designers can use XD to create micro-interactions between two artboards by:

  • Duplicating objects between artboards,
  • Modifying their properties such as size, position, rotation, and so on. For information on supported properties, see Supported properties for auto-animate.
  • Switching to prototype mode,
  • Adding Auto-Animate as a new transition, and
  • Previewing the prototype in desktop or mobile.

Like using Tap to trigger transitions, you can combine Drag with Auto-Animate to specify micro-interactions across artboards. New objects fade in and deleted objects fade out during a transition that uses Auto-Animate.

Note:

Currently, Auto-Animate is not supported in a web browser; hence, prototypes with Auto-Animate dissolves on the web.

How does a drag gesture work with auto-animate?

Adobe XD has evolved from a basic click-through application to providing you divergent prototyping options such as Time, Tap, Drag, and Voice.

You can use a Drag gesture to simulate user experiences such as dragging cards or screens. When you select Drag from the list of triggers, XD automatically switches the Action to Auto-Animate.

Note:

Currently, previewing a Drag gesture is supported only on desktop and mobile.

  1. In the Prototype mode, modify the position of the same object on the destination artboard and set the Trigger as Drag.

  2. The start and end position of an object determines the direction of the drag. Drag from left to right in the preview window or mobile app if the object on the first artboard is to the left, and the position of the same object on the second artboard is to the right. You can similarly create a drag event from right to left or top to bottom and so on.

  3. To preview the changes on desktop or mobile, select the Preview   icon  .

     

    Drag gesture at work
    Drag gesture at work

Create an auto-animate transition using a drag gesture for onboarding workflows

  1. In Prototype mode, select all the artboards on the canvas to view the wires across the artboards.

  2. Click and 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.
    • 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. Gesture type to Drag B. Action to Auto-Animate C. Set the destination artboard D. Select Easing options 
  4. To preview the changes on desktop or mobile, select the Desktop Preview   icon.

    Auto-animate at work
    Auto-Animate at work

Record auto-animate transitions

  1. In the XD desktop app, click the Share icon at the upper right and choose Record Video.

  2. In the preview mode, use the record button  to record your animations.

Share and review the prototype link on desktop and mobile

In the desktop app, click Share and choose Publish Prototype or Publish Design Specs. For more information on sharing prototypes and design specs, see Share prototypes and design specs.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy