welcome to this tutorial today we are going to create these beautiful
on-boarding screens and animate them in Adobe XD. Open Adobe XD and create a new
art-board with iPhone 10 dimensions and name it 1. Set white as the fill color,
and turn on the grid. Open assets panel, and import the status bar, and place it
in the art-board
Using the rectangle tool, draw a button and make the corners round. Use the text
tool to add button text, and apply the character style from the assets
panel.
Make three circles using the ellipse tool and keep them forty points apart.
Duplicate these by clicking and dragging while holding the Alt key
make three more of them and place them above the first three in the layers
panel.
Make another circle on top of the button, this could be later used to animate the
screens. Group the entire shapes, and move the button outside of the art-board while
placing it in the group. We would only need the button to appear on the third
screen. Add text using the text tool and apply the character styles from the
assets panel.
Import the illustrations from the assets panel, make them into a group, and
align everything in the first screen.
Duplicate the art-board by clicking-and-dragging it while holding
the Alt key, and rename it to 2 move the group of illustrations to the left, and
the page indicator circle to the right.
Duplicate the second art-board to repeat the same process.
Now bring up the button in place it.
Now add another art-board to animate the button click using our hidden circle
layer. Move the button layer to the top in the layers panel and resize the small
circle to fill the screen. Adobe XD can understand the relative position of
shapes and multiple art-boards, and animate them automatically if they have
same names. Now add the required text into the design.
Now we have completed the design head on to the prototype section and rig the
screens together. We can use timed transitions with a two-second delay, and
Auto animate with snap transition with one second duration. In the third screen
select the button, and trigger to tap.
Connect the fourth screen back to the first screen. Now we have completed the
prototype. Let's preview the screen by pressing the desktop preview button.
You can vary the results by adjusting the speed and style of transitions.