In my previous tutorial, I went over how to create a Repeat Grid in Adobe Xd.
This is a continuation of that lesson, only this time, I am going to demonstrate how to prototype a top story in this fictional Travel/Lifestyle news app for iPhone.
With the design and layout of this app in place, I am going to primarily be working in the Prototype tab in the upper left hand corner of the Adobe Xd workspace.
Here's an overview of how to link up a story on the first artboard to the second artboard, which contains the article of how Germany has become a hot place to visit.
Adding a Transition Tap
In Prototype mode, select the object you want to have a user click on to create a tap experience. In this case, I grouped the main image and headline together.
Once selected, click and drag the blue wireframe handle to the desired artboard where the trigger will be applied to. In this case, I dragged the handle to the second artboard.
In the Interaction settings on the right-hand side menu, the Trigger will be a Tap and the Action will be set to Transition. The Destination has already been set to the second artboard.
The animation will be set to None because we just want a simple tap transition experience
Add a Auto-Animate Tap
On the second artboard, select the Back button, which we'll prototype to take bus back to the landing page.
With it selected, instead of dragging the blue wire handle back to artboard one, just click on the blue arrowhead once.
Leave the Trigger setting to Tap, but change the Action from Transition to Auto-Animate. This will create a fading effect when tapping to go back to the home page.
Change the Destination to the first artboard and in the Easing settings, select Ease Out with a Duration of 0.2 seconds for a quick transition once the back button is tapped.
Here's an overview of the steps explained above.
Finally, you are able to preview your work pin Adobe Xd. Simply navigate to the top right-hand side where you see the play button. This will bring up a window to test out your links and see if the prototype process works as intended.
Here's a look at the preview from my tutorial example.