Hey, everyone! I'm Howard Pinsky and in today's video, we're going to walk through the various prototyping features in Adobe XD. Whether it's a simple transition to another artboard, reusable micro-interactions, or even a gaming experience using a controller, let's take a look at how we can breathe life into our designs.
While we all love fancy animations, sometimes all you need is a simple transition and it all starts within Prototype mode. Selecting the object that you want to trigger the transition, the blue handle can be dragged to the destination artboard. Then the interaction can be customized within the Properties Inspector to the right. First up, we need to determine how the transition will be triggered. For this example, we want users to tap. Down under Action, choosing Transition will allow you to select from a variety of animations: Cut, Dissolve, Slide, and Push. Easing and Duration can also be set. And, while I encourage you to experiment with these options, Ease In-Out with the Duration between 0.4 and 0.8 seconds should give you a smooth result for Slide, Push, and Dissolve. To see this in action, the Play button at the top right will launch the Preview. And tapping on the wired up object will take us to our destination.
When a simple transition just isn't enough, Auto-Animate can take your prototypes to new levels. These two artboards contain the same layers, but the position and scaling on many of them have changed to create the next experience. And I was able to use Stacks to make this process a lot quicker and more seamless. Back within Prototype mode, the process starts just like with transitions: by selecting the object which will trigger the interaction and dragging the handle to the next artboard. This time however, Auto-Animate should be selected as the Type. This will instruct XD to look at the differences between the wired up artboards and animate the changes using the Easing and Duration options set below. Let's try out a Snap this time. Previewing the prototype and tapping on the trigger will kick off the animation.
That looks great, but since this experience is focused on gaming, let's also add in Gamepad triggers. To go along with the Tap trigger that was just set up, an additional one can be dragged out to the same artboard. Then, back within the Properties Inspector, a keys and Gamepad trigger can be selected. Within the text field, a key on your keyboard can be assigned or, if you have an Xbox or PlayStation controller connected your computer, the various buttons or stick directions can be assigned as well. Before we move on, this is great opportunity to wire up a Previous Artboard transition. And when using keys and gamepads, any object can be used as a trigger. So, I'll use this main component so that it pushes the interactions to all others. Since the B button is typically used to go back, I'll enter that in. Then down under Type, I'll want to choose Previous Artboard. Checking out the Preview, I can not only use my controller's stick to transition to the next artboard, but I can also press the B button to go back.
Auto-animate can also be used to create beautiful interactions that can trigger from a single artboard. As an example, we may want this friends list to slide in when the profile icon is tapped on. To accomplish this, we'll want to place both elements into a component. Selecting each, a component can be created either within the Libraries panel, the Command or Control+K shortcut, or from the Properties Inspector. Now, since we don't want the friends list to be visible initially, I'll jump into the component and pull it off to the side. Next, we'll want to create the state where the list slides in. So, over within the Properties Inspector, a new state can be added by pressing the plus button. With that created, the list can now be brought back onto the artboard.
Looking at the overall design, it's possible that this element may blend in with certain background images. Luckily, we can add in layers to our states. So with the Rectangle tool, I'll draw out a shape across the entire artboard, change the color to black, reduce the opacity just a touch, then make sure it's behind the rest of the elements. Perfect.
With both states complete, it's time to add our interactions within Prototype mode. Since this will transition between states, clicking on the handle instead of dragging it, will allow you to choose the destination state within the Properties Inspector. Just like with transitions, the Easing and Duration options can be tweaked. And for micro-interactions, you'll likely want to keep them nice and quick. With one complete, we can switch over to the second state and then wire it to go back to the first, just like we did a moment ago. And now that the interactions have been added to the main component, any additional ones that you either drag out from your assets or copy and paste, will be wired up automatically. So no matter which artboard is previewed, the profile photo can be tapped on to reveal the friends list. And if any components or scroll groups exist within this state, they too can be interacted with.
In addition to standard states, hover states are also available to you and can be created just like we did with the friends list. But you'll notice that they're wired up by default, as indicated by the lightning icon to the right. I can now dive in and make changes. And for this state, I'll tweak the background color a touch and alter the icon. Switching back to the default state, this artboard can now be previewed and hovering can take place.
While most of your interactions will be created from within Prototype mode, Scroll Groups can be set up straight from Design mode. Towards the bottom of the screen there are numerous cards that extend off the artboard. To allow users to scroll to the left and right, we'll want to enable a horizontal Scroll Group from within the Properties Inspector. This will add two handles on each side, to help you set the window where the content will always remain visible. And when you launch the Preview, scrolling within the group can take place.
If you're building out landing pages with content that extends vertically down your artboard, you may want to include the ability to quickly navigate to various sections. And this can be done using anchor links. Selecting the object you wish to use as a trigger, a prototype wire can be dragged to a layer or group on the same artboard. And since we'll be sticking with a Gamepad trigger here, any object can be used. Once the destination has been chosen, the interaction can be tweaked within the Properties Inspector. And most of the options follow what we've been exploring... but you'll notice one new one: Y Offset. This will let you choose where the top of the viewport will be, once scrolling completes. Since I want a touch of breathing room at the top, I'll shift it up, either using a value to the right or visually on the canvas. Great. I'll add one more anchor link back to the top. Now when I preview, I can quickly jump down to the next section, then right back up.
With vocal interactions becoming increasingly popular these days, you may want to include spoken commands to further boost the real world experience of your prototype. On this artboard, a Tap and Gamepad trigger have already been set up. But an additional wire can be dragged out, to either the same destination or a new one. Within the Properties Inspector, you'll now be able to switch the trigger over to voice, which will join the other two at the top of the panel. Under the Trigger, you now have the ability to enter in the command that XD will listen out for. And in this case, we'll go with: Log me in. I've gone back and spent a bit of time making sure that the layers on both artboards match up, so Auto-Animate should look great. Now when the Prototype is previewed, I can tap, use my Gamepad, or hold down the spacebar and say the command: Log me in.
Before we wrap up, let's take a quick look at two more prototyping features: drag and overlays. I started working on the onboarding experience for the companion app and want users to swipe between the various cards I've set up. Similar to the other examples, we'll want to drag the wire from the object that we moved over to the next artboard. Then within the Properties Inspector, instead of Tap, we'll want to select Drag. This will default to Auto-Animate and you don't need to worry too much about the Easing options. The same can now be done for the second card.
Before you preview, I may also want a keyboard to pop up whenever a text field is selected. And for that, we can use an overlay. Over on this artboard, I have the keyboard I want to use, and to make sure I don't need a separate artboard for each interaction, setting the Type to Overlay will allow me to set where the keyboard will land by dragging the green bounds. Then I can set how it will enter the frame. In this case, I want it to slide up. All right, one last preview. Click and drag over to the second card, back to the first, then any of the Text Field components can be tapped on to reveal the keyboard.
And that's an overview of prototyping in Adobe XD and how you can bring your designs to life. Thanks for watching everyone, and I'll see you all in the next video.