Adobe XD
are going to have one image, the name of the phone,
price and ratings. We can call these cards C1 to C6.
The best way to do this is to create the first card
(C1) and then use an amazing feature of XD called
Repeat Grid, which is found on the top-right corner
of the Tool panel. This enables you to duplicate
items with ease, keeping the alignment and spacing
intact. The set up of this artboard is complete.
We are going to animate the second card, so it is
important to ungroup the elements of that card so
XD can perform Auto-Animate.
DESIGN THE SECOND ARTBOARD
Now to get to work on the second artboard.
Duplicate the first artboard and delete cards C1,
C3-C6. We are going to use the existing card C2 to
build this page, so the names of the layers are the
same. First, expand the background of the card so
that it covers the entire page below the header bar.
We can now arrange the other items in any way
that we want – the basic idea being that it should
be different from how the card was in the artboard
S1, because that’s when you can see the transition.
For that reason, let’s bump up the name of the
mobile to 25px and make it bold. Similarly, increase
the size of the price and place it below the mobile
name. Next is the important part – the image of
the mobile phone. You have to increase its size
significantly and also align it in the centre.
FINISHING TOUCHES
To tidy everything up and finalise the design,
arrange the ratings and the stars below everything
and to the left. Since this artboard represents
the detailed version of the product, you can now
include additional information about the phone
such as memory, the available colours of the phone,
accessories given with the phone and so on, based
on your preferences. Everything else will follow as
you scroll the artboard. You can also change the
header icon of the hamburger, to enable the user
to go back to the previous artboard S1. Remember
When Auto-Animate was first released by Adobe XD, tons of
designers went in and crafted animations. Once designers
get familiar with the Auto-Animate feature, they can start
exploring other complex animations that can be achieved using XD.
There are lots of websites and experienced designers who have
created tutorials for most of these animations. They can get you
started with the basics and then you can customise based on your
needs. The best way to follow recent updates in Auto-Animate is
to go to the XD website where XD evangelists post a lot of tutorials
on new developments.Let’s XD
https://letsxd.com/prototyping
This is a wonderful resource that introduces you to basic
prototyping in Adobe XD. Also, there is a series that is going to
add more transitions into your designs. You’ll learn how to create
basic transitions, add motion using Auto-Animate, use the Drag
trigger, how to save space with overlays and much more. There
are also custom kits created such as animated logos that you can
download and break down to see the setup.Adobe XD: Animations
https://www.skillshare.com/classes/Adobe-XD-
Animations/1850234034
This is a great course that uses the Auto-Animate feature to create
animations for an example email product. The videos cover a wide
variety of animation tips and tricks that can be applied to other
user interfaces too. They have examples such as mask animations,
button states, sliders, scrolling, text effects, overlay states, etc.ANIMATE EXAMPLES
RESOURCES“The Repeat Grid feature
in XD enables you to duplicate
items with ease, keeping
the alignments and
spacing intact”