I love designing, but I am equally passionate about cycling.
So in this tutorial I decided, why not let my two passions collide?
Let's dive back into Adobe Xd and design a fictional cycling mobile app. Working on four iPhone X artboards, I will demonstrate how to design and use Prototyping tools to add a Tap trigger with an auto-animate action to have a sliding experience when tapping on the menu icon.
To make it easier for you to learn all the steps, I am going to break down the prototyping process by artboard as named in the project. Follow each step and you should come to the same result!
Don't forget to test your work as you're prototyping the artboards.
Main Profile
In Prototype mode, click on the menu icon once.
Click on the blue wire handle and drag to the second artboard (Main Profile 2)
Set the Trigger to Tap
Set the Action to Auto-Animate
Set the Easing to Ease In-Out
Set the Duration too 0.3s
Main Profile 2
Click on the Menu icon once
Click on the blue wire handle and drag to Main Profile artboard to loop back when clicking
The Interaction settings should be the same as above. If not, repeat steps from Main Profile settings.
Click on the Feed icon and drag the blue wire handle to the third artboard (Main Feed)
Set the Trigger to Tap
Set the Action to Transition
Set the Animation to Slide Left
Set the Easing to Ease In-Out
Set the Duration to 0.3s
Main Feed
Click on the Menu icon once
Click on the blue wire handle and drag to the fourth artboard (Main Feed 2)
Set the Trigger to Tap
Set the Action to Auto-Animate
Set the Easing Snap
Set the Duration to 0.3s
Main Feed 2
Click on the Menu icon once
Click on the blue wire handle and drag to the Main Feed artbooard to loop back when clicking
The Interaction settings should be the same as above. If not, repeat steps from Main Feed settings.
Click on Profile icon and drag the blue wire handle to the first artboard (Main Profile) - This will bring the user back to the main profile page
Set the Trigger to Tap
Set the Action to Transition
Set the Animation to Slide Left
Set the Easing to Ease In-Out
Set the Duration to 0.3