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.Īuto-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. 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.