Adobe XD: putting auto-animate to the test – UX Collective

Shane Williams

Adobe recently announced their updated version of Adobe XD at Adobe Max in October and introduced a new feature called ‘Auto-Animate’.

As Adobe describes it — Adobe XD has evolved from a basic click-through application to providing you divergent prototyping options such as Time, Tap, Drag, and Voice. Designers can use auto-animate combined with drag gestures to create micro-interactions across art-boards for rich prototype experiences such as on-boarding flows, animations for carousels, cards and lists or progress indicators. Deceptively simple to use, auto-animate creates stunning effects and transitions that help you communicate an animated end user experience. Drag Gestures in XD takes the auto-animate feature one step further by allowing you to simulate the drag experience of touch-enabled devices.

I decided to take this new feature for a test drive and created a few experiments. These are pure UI experiments testing the auto-animate feature, so please don’t judge the usability of these concepts ;).

Here’s the result and learnings from what I created…

1. Carousel Activity Feed

Using some of my Medium articles, I created this carousel with image parallax effect using Adobe XD’s auto-animate and drag features #MadeWithAdobeXD

This animation consists of 3 cards that animate when swiping across the screen. The images have a parallax effect on the swipe. I created this by offsetting the images within a mask on an in-between slide, the drag auto-animates to this in-between slide with a timed transision of zero seconds to the final state. This also allowed for the pagination dots to have an elastic effect on the transition, moving from a circle, to an elongated shape, back to a circle.

My Adobe XD setup:

My auto-animation art-board setup

If you are interested in reading the articles in this animation, you can view them here:

  1. Branding needs to evolve for the digital age
  2. Defining brand design principles, a how to guide
  3. Are your designs adding value, or are you feeding an addiction?

2. Apple Music — Dark Mode

Crafted entirely in Adobe XD using auto animate with a drag and a timed transition. 
#MadeWithAdobeXD.

I was playing with the Music app on my iPhone, switching between the different modes and wondered if I could build this in Adobe XD. I jumped into XD and was amazed at how easy this was. I later changed this into a dark mode, intrigued as to what a dark mode Music app would look.

My Adobe XD setup:

My auto-animation art-board setup in two different visual executions.

3. Animated Bar Graphs

#MadeWithAdobeXD

A nuance with Adobe XD is that it does not transition between colours, but rather switches to the new colour first before animating to the next state. In order for the above background colour transition to have a fade effect, I had to create the backgrounds blocks and change their opacity down to 0% or up to 100% to create the background fade transitions.

My Adobe XD setup:

3. 3D Carousel

A carousel listing Unsplash images using 3D parallax effect. Animated entirely with Adobe XD’s auto-animate #MadeWithAdobeXD

Although simple, this was a little tedious to set up. I set up the different image cards, scaling them to different sizes in the z-index and adjusting their opacity. Clicking the arrows transitioned between these states giving the illusion of 3D depth. All the images where pulled from Unsplash, and photographers credited in the prototype.

I created a simple on-boarding timed transition at the start with the instruction to “Tap arrows to navigate” to help explain the interface.

My Adobe XD setup:

Simple on-boaring setup
Interaction art-board setup

4. Effect Slider

A slider used for a side by side comparison of a black and white image effect and the original image crated in Adobe XD using drag and auto animate. #MadeWithAdobeXD

Also using an image from Unsplash, I thought of creating a slider that allowed for a side by side comparison of an image in two states with a simple slider. The photographer is credited at the bottom of the image.

Using animation rather than instructions, this prototype starts with a loading sequence transitioning in the slider and image caption before being able to drag the slider back and forth.

My Adobe XD setup:

loading sequence setup using a timed transition between art-boards
slider art-board setup

5. Inbox Concept

Inbox prototype concept using Adobe XD’s auto-animate features. #MadeWithAdobeXD

Using a drag gesture users can drag from the edge of the screen to reveal actions in a mail application. Selecting an action reveals futher details. This allowed for an interesting animation where icons move into a different position in the UI. The list that appears below reveals in a cascading fashion, this was achieved by setting an offset on each element being further away from the previous element.

My Adobe XD setup:

6. Swipe to Delete

#MadeWithAdobeXD

Playing with the idea of a swipe to delete, I added in an extra detail using lines to cross out the text of an element during the swipe. Using a timed delay, I was able to reveal an undo action, allowing users to cancel the action, animating to the original art-board. If no action is taken the timed delay transitions to a final state moving the list up to cover the open space.

To create a looping animation, I linked the last art-board to the first art-board using a delayed timed transition, this reset the sequence moving the deleted list item back into view.

My Adobe XD setup:

7. Loading Sequence

Loading bar and graph build up. #MadeWithAdobeXD

For the loading sequence I played with gradients. Hidden within a mask, I created a large rectangle and changed its position creating an animated gradient transition.

The graphs were animated from 0% opacity to 100% and the graph numbers on the verticle axis revealed using a mask and changing the position of the number list.

My Adobe XD setup:

8. Day/Night Slider

#MadeWithAdobeXD

The sun to moon transition was created with two circles, one intersecting with another. The lines around the sun fade in from a short dots to lines and the background simple fades in and out.

The drag slider was created using a mask and a white rectangle linked together with a drag action set to auto-animate.

My Adobe XD setup:

Sun and moon transition setup
To art-boards make up this sequence

9. Build with LEGO

I created this little lego man builder in Adobe XD using auto animate and the drag feature #MadeWithAdobeXD

This little lego man is brought to life by dragging the different pieces to fit together using a drag action with auto-animate. After assembled, I transition with a timed delay between art-boards to create the smile and blinking effect.

My Adobe XD setup:

10. Credit Card Wallet

Created and animated in Adobe XD. #MadeWithAdobeXD

This sequence took several artboards to setup. An initial art-board with all the cards, a list other artboards with each cart at the top of the screen and the remaining lower down.

I also wanted to reveal a little bit of detail about each card, so after tapping a card, I set up another timed transition using auto-animate to slide the details out from below the cards. The rest of the prototype simply had to be wired up to allow for selecting a card from any art-board state.

My Adobe XD setup:

10. Radio Frequency Select

Using the drag feature and auto-animate in Adobe XD. #MadeWithAdobeXd

I’d seen a few number counters being created in Adobe XD and wanted to give it a try. I created this by using a 3 vertical lists of numbers and a mask to create the counting effect. This was then enabled by a drag on the frequency line.

My Adobe XD setup:

11. Parallax Scroll

A simple parallax effect created using auto animate and drag features in Adobe XD. #MadeWithAdobeXD

This setup was created by offsetting various layers, shapes with a vertical offset, and the text with a horizontal offset. I then created a draggable element to transition between the two art-board states.

My Adobe XD setup:

12. Emoji Reactions

I redrew these emojis in order to animate the various elements like the eyes and mouth. I copied and pasted different elements between art-boards changing their position and opacity to allow for the auto-animate to work its magic.

The art-boards were then wired up using a tap event and timed-transitions.

My Adobe XD setup:

13. Pull to Refresh

#MadeWithAdobeXD

This sequence springs into action after using a drag action that sets off a number of time-transtions between art-boards. The background circles that are revealed use a large area of circles in a repeat grid that are positioned and offset between art-boards.

The water droplet then transitions to a wireframe circle in the list item as the next list item is revealed.

My Adobe XD setup:

The background circles that are revealed use a large area of circles in a repeat grid that are positioned and offset between art-boards.

14. Waveform Slider

#MadeWithAdobeXD

I created the wave by changing the position of a flat waves on different layers. The wave lines are different lengths allowing for each wave to move at a different speed while being transitioned.

I then used the drag feature on the slider coupled with auto-animate to move between the two art-board states.

My Adobe XD setup:

Learn More

To learn more about auto-animate, watch the below video by Adobe.

Auto-Animate in Prototypes with Adobe XD
Hello! Today I'm going to show you how to use one my favorite features in Adobe XD - Auto-Animate within prototypes.link.medium.com

Additional inspiration on Dribble

Adobe XD Playoff: Design. Rebound. Win!
Bring your prototypes to life! We recently rolled out auto-animate in Adobe XD which allows you to quickly animate…dribbble.com

Download Adobe XD for free here and try it out yourself:

https://www.adobe.com/africa/products/xd.html

Author: Shane Williams

Collect by: uxfree.com

Comment

Top