Adobe XD
Above This depicts the artboard setup for the swipe example of creating micro-interactions
animations like tools such as Principle. This helps
designers to craft rich prototype experiences, from
onboarding flows, animations for mobile carousels,
progress indicators and more. The best part about
this feature is that it’s simple to learn and execute.
Auto-Animate works on a simple principle of state
transition, which means that when there are two
artboards connected, for each layer in the artboards
the feature will check the properties that change
in the artboards and then animate accordingly. So,
designers need not worry about writing complex
logic to create animation. But it is critical to plan
ahead with your animations and make sure to keep
it simple. For Auto-Animate to work between layers,
they need a shared name and to have the same
group architecture. For example, on artboard A, if
you have a layer L1 in group G1 but then in another
artboard you place layer L1 in group G2, the feature
will not be able to auto animate because of the
name discrepancy. So it’s important to ensure you
maintain a proper structure.
In this article, I will be explaining how to create
simple micro animations using the Auto-Animate
feature. We will be looking at both gesture-based
and tap-based interactions.
SWIPE GESTURES TO ADD TO FAV
OR DELETE
Swipe interactions are one of the most commonly
used micro-interactions on mobile apps. These are
an essential part of a mobile ecosystem because
gestures help you to free up screen space by hiding
these actions and enable the user to learn about the
UI. Some common swipe actions are deleting and
adding to a queue.
For this example, let’s look at a music playlist.
For the first artboard, we’re going to create a
playlist screen with five songs in it. Each song is
an individual card and essentially when each card
is swiped left, it should remove the song from the
playlist. When a card is swiped right, it should add
the song to the queue.
Let’s get started and create the first card. You
can add basic details such as the name of the song,name of the artist, length of the song and the
rating. Now group all these elements into a single
layer. Duplicate it until five of the similar cards are
made. You can edit them based on your taste.
For the first card – C1 – we are going to add a
left swipe for delete action. So, let’s create a small
square with a red background, add some Delete
text and an icon as shown in the screenshot below.
Group all these items into a layer called A1. Now“A u t o -A n i m a t e w o r k s o n s t a t e
transition, which means that when
two artboards are connected, the
feature checks for properties that
change and then animates”