By Howard Pinsky
Jun 18, 2019 ·
2 min video
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.
Liked the article?
Share the love
Europe, Middle East and Africa