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. You can also use the improved search experience to show only relevant layers and artboards containing a keyword, without the layers structure (example-expanded groups).

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, and rotation. 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.


  • Prototypes using Auto-Animate have certain limitation with text animation. We currently do not support animating character spacing, line spacing, and paragraph spacing on the web.
  • We currently do not support drag gestures on web. Prototypes that use a drag trigger will dissolve on tap.

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.


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


Prototypes using Auto-Animate does not support animation playback and dissolves between the start and end of an artboard when viewed on the following browsers:

  • IE 11 browser
  • Edge 12

As a workaround, open the prototype in any of the other supported browsers listed in the System requirements.

Dette arbejde har licens under en Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Opslag på Twitter™ og Facebook er ikke omfattet af vilkårene for Creative Commons.

Juridiske meddelelser   |   Politik for beskyttelse af personlige oplysninger online