Design Interactive Projects with Micro Animations in XD
Design by Codify Design Studio.
by Chris Converse
posted on 02-22-2019
Designing interactive content can be challenging to envision with static screen layouts. Learn to create interactive animated prototypes of your designs using Adobe XD.
The Auto-Animate prototyping feature in XD automatically creates an animated transition between artboards. This unique workflow opens up new possibilities for designing and demonstrating more engaging interactive content.
Create multiple artboards with common elements
In order for the Auto-Animate action to work, you need to make sure you are using the same elements, or symbols, across your artboards. These elements, in turn, will become animated when you change certain properties on different artboards. Properties that can be converted to animations include color, scale, opacity, and position.
One of the easiest ways to ensure you are using the same elements is to duplicate your artboard layouts, then make adjustments to each layout. In the example above, the background map has been scaled up and repositioned on each artboard, as well as the navigation indicator (tan oval). Since these items are used on each artboard, they will become animations when using the Auto-Animate action in the prototype.
Create links between artboards using the Auto-Animate action
Switch to the Prototype workspace in XD and select one of the navigation buttons. Create a link between the button and another artboard, then select the Auto-Animate option from the Action menu in the link properties dialog box.
The Auto-Animate option will create an animated transition between the current artboard and the destination artboard. Modified properties between common elements of the two artboards will become animations when previewing the prototype.
Click the preview button in the upper right of the XD window to interact with the prototype. Test your animations by clicking on the links that navigate to different artboards. As shown above, elements shared across artboards will have their modified properties animated when interacting with the prototype.
Learn more layout and prototyping techniques in this e-learning webinar recording
XD allows you to prototype advanced interactive experiences with ease. Fixed elements, varied-sized artboards, overlays, and a built-in cloud service provide you with the tools you need to create, experience, and share your vision with anyone around the world.
Join us online and get a first-hand look at some advanced techniques that will help you bring your interactive visions to life.
In the Advanced Prototyping Techniques with Adobe XD webinar you’ll learn to:
- Go beyond the basics with the Repeat Grid.
- Control your navigation with a Google spreadsheet.
- Nest symbols to control layouts across artboards.
- Use Auto-Animate to create engaging prototypes.
- Create voice-driven prototypes.
Products: Photoshop, Creative Cloud, XD