net - UK (2020-05)

PROJECTS
Adobe XD

Above This image shows the two-artboard setup for creating an expanded card animation

of the tool. Now on the S1 artboard, click on the

layer L1 and add an interaction on the right side of

the tool by setting Trigger to Drag, Action to Auto-

Animate and Destination to Artboard S2. You can

also add easing based on your preferences. Test

this interaction by clicking on the play button on

the top-right side of the tool. On the S1 artboard,

click on the layer L2 and add a similar interaction

using the same settings but, in this case, set the

Destination to S3. This interaction will create the

left swipe.

EXPANDING CARDS

The second interaction we will be looking at is

commonly seen on most apps and websites where

you are going through a list or a catalogue of

products and when you click on one of those, you

are taken into a new page with more details about

the product. Auto-Animate makes it super simple to

animate this kind of interaction. For this example,

let us start by creating a product catalogue page. You

can choose any product like, for example a mobile

phone (which is going to be our example), apparel,

etc. For the first artboard (S1), create a header bar

with a hamburger menu and a profile icon.

IMAGE AND DETAILS

Now, create a header text element with the number

of catalogue items. For each of the product cards, we

combine C1 and A1 into a layer L ĝ– so that A1 is on

the right side of C1.

THE SECOND CARD

For the second card – C2 – we are going to add

an add to queue right-swipe action in a similar

fashion. Create a group A2 with icon, text and green

background. Add it to the left of the group C2 and

create a combined layer named L2. Now, the first

artboard (S1) is complete. Let’s duplicate the entire

artboard twice, into two states – S2 and S3. We will

be using S2 for delete swipe and S3 for add to queue

swipe. In order to do that we need to make some

changes for each of these artboards. Here are the

settings for both swipes:

O S1 – Change the Opacity of A1 and A2 to 0% and

arrange L1, L2 so they are centre-aligned.

O S2 – Arrange the L1 card so the right edge of L1 is

aligned with the other cards. Change the Opacity

of A2 to 0%.

O S3 – Arrange the L2 card so the left edge of L2 is

aligned with the other cards. Change the Opacity

of A1 to 0%.

ANIMATE THE ARTBOARDS

Now that the artboards are completely set up, the

next step is to animate them. You can do this by

going into the Prototype mode on the top-left side