By Dani Beaumont
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 on 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 grayed out. If I click on 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 on 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 on 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 on 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 on 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.
