By Howard Pinsky
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's done in Adobe XD.
In this example, I have a mobile design with cards extending off my artboard and I may want to 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 card that I want a user to drag and then pull the blue handle over to the artboard where the second is visible. Within the Properties, I can set up a drag trigger with auto-animate. I can then repeat the process, so the first card can be dragged back into view.
Checking out the preview, I can swipe 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 + button which can be pulled to an additional artboard to create a second trigger. Or since I have an expanded state set up for this component, I can click instead.
For this trigger, I'll select tap, make sure that auto-animate is the action and choose the state I wish to transition to.
Now that I have an additional trigger set up, I can quickly switch between them to make edits if necessary. Previewing one more time, I can drag like a did a moment ago, but I can now also tap to expand the card. This same technique can also be used to wire up multiple voice, key or gamepad triggers, all from a single object, instead of spreading them around your artboards. And that's how you can hook up multiple triggers from a single object using Adobe XD.
Design for a variety of user inputs without any duplicative work. In Prototype mode, you can drag multiple wires from a single element to add interactions for different inputs. For example, you can add different actions for “tap” versus “drag” on the same artboard.
