![adobe xd prototype adobe xd prototype](https://i.ytimg.com/vi/VhYYqzX294s/maxresdefault.jpg)
As an example, we may want this friends list to slide in when the profile icon is tapped on. 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.Īuto-animate can also be used to create beautiful interactions that can trigger from a single artboard. Then down under Type, I'll want to choose Previous Artboard. Since the B button is typically used to go back, I'll enter that in. So, I'll use this main component so that it pushes the interactions to all others. And when using keys and gamepads, any object can be used as a trigger. Before we move on, this is great opportunity to wire up a Previous Artboard transition. 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. Then, back within the Properties Inspector, a keys and Gamepad trigger can be selected. To go along with the Tap trigger that was just set up, an additional one can be dragged out to the same artboard. That looks great, but since this experience is focused on gaming, let's also add in Gamepad triggers. Previewing the prototype and tapping on the trigger will kick off the animation. 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. This time however, Auto-Animate should be selected as the Type. 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. And I was able to use Stacks to make this process a lot quicker and more seamless. These two artboards contain the same layers, but the position and scaling on many of them have changed to create the next experience. When a simple transition just isn't enough, Auto-Animate can take your prototypes to new levels. And tapping on the wired up object will take us to our destination. To see this in action, the Play button at the top right will launch the Preview. 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. Down under Action, choosing Transition will allow you to select from a variety of animations: Cut, Dissolve, Slide, and Push. First up, we need to determine how the transition will be triggered. Then the interaction can be customized within the Properties Inspector to the right. Selecting the object that you want to trigger the transition, the blue handle can be dragged to the destination artboard.
![adobe xd prototype adobe xd prototype](https://xdguru.b-cdn.net/wp-content/uploads/2020/08/Sharing1-1-300x183.jpg)
While we all love fancy animations, sometimes all you need is a simple transition and it all starts within Prototype mode. 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. Hey, everyone! I'm Howard Pinsky and in today's video, we're going to walk through the various prototyping features in Adobe XD.