Adobe XD has powerful prototyping capabilities—so long as you know the work-arounds to auto-animate. Understanding the quirks around auto-animate will help save time and prevent common glitches such as blinking objects, awkward fade transitions, and rearranging objects. The single most effective method to prevent these glitches from happening is simple at the start and a pain to fix later on down the line of a ten-frame prototype animation.

‍

‍

In this video, Sarah covers how to avoid these issues from the very start using a simple diagram that shows how auto-animate fills in the gaps between your designated frames. Naming layers properly so that Adobe XD can recognize similarities between artboards is the first and most crucial step towards achieving seamless, auto-animate transitions.

‍

‍

‍

We also cover mask transitions, where auto-animate automatically reveals shapes via expanding and collapsing masks. Ellipse masks offer a great opportunity for unique, dynamic transitions in prototypes for buttons, panels, and hover states.