Multiple Triggers. One Object.
As you start to bring your Adobe XD designs to life and expand upon your prototypes, you may find yourself wanting the ability to wire up multiple triggers from a single object.
WHAT YOU’LL LEARN IN THIS VIDEO
How to wire up an object
Add additional triggers from a single element
Dive into Component States
Component States in Adobe XD allows you to save elements for future use and create additional versions of your buttons, toggles, fields, and more.
Download my latest UI kit to get started.
Bring your charts to life
Let’s face it. Charts are typically not the most exciting elements to design and work with, so in this videos, let’s take a look at how Adobe XD’s Auto-Animate can add a touch of life to your designs.
+ VIEW TRANSCRIPT
Hey, everyone – I’m Howard Pinsky – Senior XD Evangelist at Adobe. As you start to bring your designs to life and expand upon your prototypes, you may find yourself wanting the ability to wire up multiple triggers from a single object. Let’s take a look at how that can be done using Adobe XD.
In this example I have a mobile design with cards extending off my artboard, and I may want a user to not only swipe through to the next one, but also tap on it, if they choose.
Hopping into Prototype mode, I’ll select the group that contains all the card’s elements, then pull the blue handle over to the artboard where the second card is visible. Within the properties, I’ll want to select “Drag”, which will default to Auto-Animate for the action. I can then repeat the process so that the first card can be dragged back into view.
Checking out the preview, I can drag to the second card, and back to the first. Great – but I also want users to be able to expand this card with a tap. Selecting the first group one more time, I’ll now see a plus button which can be pulled to an additional artboard to create a second trigger. For this one, I’ll select Tap, make sure that auto-animate is the action, the set my easing accordingly.
Perfect. Previewing one more time, I can drag like I did a moment ago, but I can now also tap to expand the card.
Before we wrap things up, let’s add one more. What if, in addition to touch navigation, users could also interact using a gamepad? Just like earlier, I can pull out another wire leading to the second artboard, but this time I’ll choose Keys & Gamepad. I can now use my connected Xbox One or DualShock controllers to set which button to use. I’ll also make sure to hookup the other interactions, as well.
Now when previewing, users can either tap or use a gamepad to navigate around, and all the wires are nicely organized under a single object.