By Dani Beaumont
Let's focus now on how we can add some interactivity to bring this design file to life.
I'll go ahead and close out the Layers panel since I won't be needing it right now. For that I can just come and toggle the panel closed by clicking on the icon. Alternatively I can use a keyboard command so CMD on the Mac or CTRL on Windows and the letter "Y" will toggle that panel closed. Next I'll hit the spacebar and move the content so I can see it a bit more clearly, and I'll actually pinch to zoom in a little bit more tightly. When you look at the two artboards that I have here on the right-hand side the one on the left is a bit taller than the one on the right and both are as a whole bigger than the normal height of a device that I'm simulating, which is an iPhone X. In order to simulate what would fall "below the fold "as it's called in screen design I want to define the default height of my prototype or what's known as a viewport. To do that I need to select both of the artboards. I'll come over and click on the title of the first artboard then holding the shift key I'll click on the title of the second artboard from here in the Properties Inspector. I want to come in and set some of the common attributes between the two artboards. Notice in the scrolling section I have a drop-down menu with a dashed line that's indicating that the two artboards have different values.
The right one is taller than the other, so it has different height values. If I were to click off on the side and then click on one artboard I see that the scrolling value is set to none. On the second artboard the scrolling value is set to vertical. I want to set them both to the same value so for that I'm going to go ahead and click to select them once again so holding the shift key select the first and second artboard. Now in the drop-down under scrolling I'm going to select vertical and then in the viewport height I want it to have the same viewport height and I'm going to set that value to 812. So I'll type 812 and then hit return. Notice now on the design canvas there's a pretty subtle dashed line on both of the artboards. If I click off and then select just one artboard, there's actually a handle to the left-hand side indicating where that viewport value is currently set. If instead of working with a numerical value, I wanted to visually decide where my viewport ended I can press and drag this guide until I get it to the position that feels right to me.
I'm going to go ahead and click off and then under Edit select Undo because I want to revert it back to that same value that we had before. Now that my content is pretty well set, I'm ready to define the interactions between my artboards. To do so I want to switch from the current mode I'm in -- "Design" -- which I can see here in the upper left-hand corner over to "Prototype" mode. To do that I'll just click on the word Prototype which toggles me over to prototype mode. For the most part the XD interface has not changed.The difference here is that the Properties Inspector on the right-hand side now shows me interaction properties rather than design properties. What I want to do is design a wireframe flow where areas my stakeholder can interact with to navigate the experience. I'll begin with a really simple tap gesture to navigate from this first circle here on the left to the second artboar. What I want to do is come in and select just the circle, so to do that I'll click off to make sure there's nothing selected. Holding CMD on the Mac or CTRL on Windows allows me to tunnel through the design and get right on top of that circle.
I'll go ahead and click and release to select it. I can tell that I've selected just the circle because it has this blue bounding box around it and there's an arrow on the right-hand side. What I want to do is drag a wire from that first object,t so I'm going to press and drag on that arrow to the second artboard. One thing you'll notice is if I drag up or to the right the artboard is going to automatically scroll. See if I can get out of this now - let me see more of the content on the design canvas. I'm going to go ahead and stay in the selected mode so I'll press and drag that arrow to the second artboard, and then I'm going to release it. If you happen to click off a little too much and you no longer see the wire don't worry about that. You can hold that CMD/CTRL key again and click on that circle. If you've dragged the wire it'll be visible to you. If you haven't you can just press that arrow key and drag to the second artboard. Once again notice that with that object selected here in the Properties Inspector I see specific interaction properties that I can work with In the trigger drop down here towards the top I want to make sure it's set to Tap. You may notice that I have lots of other trigger types -- drag, keyboard, game pads and voice for example. These are all lots of fun for you to explore as you become more familiar with the application. For now let's just stick with tap.
I'm now ready to take a quick look at the work that I've done. The only other thing I want to do is make sure I've set a starting point or the home artboard for my flow. You'll notice that here on this browse to artboard there's a little blue house to the left-hand side This is going to define even if I had many many artboards in my project where it is that I want my preview or my prototype flow to begin. If for example I wanted it to begin on this second artboard instead, I could click on the name then click to the left-hand side to set the start of the flow with that artboard. I do want it to be "Browse 02", so I'm going to go back and click on that title and click once again on the Home icon to the left hand side. I'm now ready to come in and navigate through my experience.
To bring up the Desktop Preview I'll come here towards the upper right-hand corner of the app, and click on the play button. This brings up the Desktop Preview app. I can now come in and navigate through my experience. Notice as I press and drag I get a scrollbar there on the right-hand side, indicating that it's a tall page. If I press and drag back up towards the top it's gonna scroll me up back towards the top and notice if I roll over the area where I defined a hyperlink or click spot that cursor changes to a hand tool. If I now come in and click, it's going to go ahead and transition from that first artboard to the second artboard. When I'm done I can just close the Desktop Preview app by clicking on this close button in the upper left-hand corner. From here I'd likely continue to add additional links to let's say this back button here on the second artboard or the close box at the top of either of the artboards.
For now we're going to go ahead and leave the Prototyping features as they are so that I can go on to show you some ways to organize your design content into reusable parts.
Bring your designs to life with interactions in Adobe XD. Taking designs from static layouts to interactive prototypes in Adobe XD is easy to do in Prototype mode. Adding transitions and interactions between artboards is done with the drag and drop of a prototyping link. Interactions can be customized in Adobe XD to use various triggers like tap, drag, voice, and gamepads.
Up next, QuickStart Design Step 04: Organize and reuse elements in the Assets panel.
