In this first step let's define some interactions between artboards. I'll begin by switching over to Prototype mode. I can do that by coming here in the upper left-hand corner of the application and clicking the word Prototype.
Next what I want to do is set the Home artboard or the beginning of my flow to this first artboard here, "Browse 1". Notice on the left-hand side there's a house and it's greyed out. If I click that house it selects it and defines this artboard as the beginning of the flow. What I want to do now is design a wireframe flow or areas that my stakeholders can interact with to navigate this experience.
I'll begin with a really simple tap gesture to navigate from this first circle that's here over towards this artboard here on the right hand side. To do that I want to come in and just select that top circle. If I hold down the CMD key on Mac or CTRL on Windows and then click the circle, that'll allow me to tunnel through the hierarchal structure and select just the circle. I can tell that I was successful because there's a container, a square here, showing the selection state with an arrow towards the right-hand side.
What I'll do next is click that arrow and press and drag it to the second artboard. I can see by the highlight on the second artboard that I've done it right, so that when I release I've now linked the two artboards together. Here in the Properties Inspector on the right-hand side of the application I want to check my default settings. In my Trigger section I have Tap by default. You can see there are other trigger types -- we'll touch on these a little later in this tutorial. I'll stick with Tap for now. The transition is fine; I want it to transition to that second artboard and the Dissolve animation is fine as well.
With that set, let's take a quick look at the work that we've just done for that. I'll come here to the upper-right-hand corner of the application and click that play icon. I can now come in and navigate through the experience. Notice I can come in and scroll down on the artboard or click that first circle that takes me to that second artboard. When I'm done I can close the Desktop Preview app by hitting the close button here in the upper left-hand corner. In the next step, let's take a look at a different trigger type auto-animate for micro interactions.
Sometimes you just need to link artboards together to create a user flow, but don't need the advanced prototyping features like Auto-Animate. In this tutorial, learn how to use Adobe XD to create basic transitions between artboards for telling a story. Move artboards into position, link them together and then use the Adobe XD Desktop Preview to view the newly created interaction live in real time in Adobe XD.