Using Keyboard Triggers in Adobe XD
When designing desktop-based applications, you may want to add an extra layer to your prototyping to allow you and your clients to navigate around using keyboard shortcuts. Let’s take a look at how that’s done in Adobe XD.
WHAT YOU’LL LEARN IN THIS VIDEO
Setting up prototype wires
Working with overlays
Using the new “Keys” triggers to add shortcuts
Previewing your prototypes
Right along side keyboard triggers, you’ll find support for gamepads, like the Xbox One and PS4 controllers
+ VIEW TRANSCRIPT
Hey, everyone – I’m Howard Pinsky – Senior XD Evangelist at Adobe. When designing desktop-based applications, you may want to add an extra layer to your prototyping to allow you and your clients to navigate around using keyboard shortcuts. Let’s take a look at how that’s done in Adobe XD.
Since Photoshop, and many of our other applications are designed using XD, we can start putting keyboard triggers to good use to further improve our prototyping. Starting with Photoshop’s search function, a user may jump straight for a shortcut instead of hunting down an icon, since that’s what they’re used to in other applications. Selecting the magnify glass, I’ll drag the blue handle over to the search window, which is on its own artboard so that it can be used from various screens.
Now, within the properties, you’ll notice the new Keys & Gamepad option under trigger. This will let you set the shortcut you wish to use to transition to the targeted screen. In this case, I can use either ‘F’ to keep it simple, or ‘Command+F’ to align with what will be used within the application.
Keep in mind that if you’re going to be interacting with these prototypes on the web, some shortcuts, like Command + N will not work since browser have priority over those. In that specific case, you may want to use just N.
Once the key has been set, I’ll want to choose Overlay for the action so that I can position my search window over top of the current screen, then for the animation, I’ll stick with a simple dissolve with a quick duration.
When working with overlays, clicking anywhere on the prototype will hide it, but in this case, we may also want to close the window with a key, like esc. Shifting over to the search window, I’ll single click on the blue handle and make sure that Previous Artboard is the selected action. That way, no matter which screen this is being used on, the trigger above will return you to where you started. Just like before, we’ll want to select Keys & Gamepad, but to trigger the close, esc will be the shortcut of choice.
Beautiful. With this now in place, let’s see it in action. Launching the preview window at the top right, I can use the Command + F shortcut to reveal the search window, then hit esc to hide it and return me to the previous state.
I’ve also gone ahead and wired up a few additional screens and overlays, allowing me to open the new document window, change the active tool, and cycle between various views. Let’s wire up one more.
I may also want the curves dialogue box to be activated with a shortcut, but I don’t have any element on this screen that corresponds to that adjustment. Well just like with voice triggers, any layer can be used for these wires. I can either choose a random object that’s part of the existing design, or to keep things fairly structured, I can create something new. Maybe I’ll draw out an ellipse over to the left, rename it to the feature I’ll be triggering, then turn down the opacity to zero so it’s not visible. Now I can drag out the handle just like in the first example, make sure that an overlay is the set action, and place it where the window should appear. Finally, I can set the shortcut. For this one, I actually want to trigger the ‘Repeat Curves’ command, which is Command + Option + M.
One more time, I can launch the prototype and trigger the various displays using just the keys on my keyboard.
And that’s a look at keyboard triggers within Adobe XD. To continue your XD journey head on over to LetsXD.com and subscribe to the Creative Cloud YouTube channel to catch the latest product updates and live streams. I’ll see you soon.
Here’s a design for an email client I’ve been working on, and if you’re like me, most of my actions are done using shortcuts instead of hunting down buttons and clicking on them. For instance, I may want to start an email using Command + N.
Hopping into prototype mode, I already have the button's group linked up for a tap trigger, so I’ll select the ‘compose’ icon, instead, and drag the blue handle over to the screen with the new email window. Single-object multi-wire support is coming this year, but in the meantime, just like with voice triggers which don’t require tapping on specific elements, I can link up just about anything to my destination artboard. Now, within the properties, I’ll choose the new Keys & Gamepad Trigger. Keys for keyboard prototyping, and gamepad if you’re using controllers for Xbox, Playstation, etc.
With that selected, I can now add in the shortcut that I want to transition me to the destination artboard. In this case, Command + N. I can also use just N if I want to keep it very simple or I’m feeling extra lazy.
Let’s hook up a few more. I’ll link the search field over to this artboard using the Command + F shortcut, then I may want to show how an email can be deleted, so I’ll link the active state over here and use Delete for the trigger.
Finally, before I test this out, I’m also going to set up a few triggers leading back to previous artboards. The search results will be cancelled with ESC, then the new email can be closed using Command + W.
Great. Let’s see this all in action. Once I launch the preview, I can navigate the experience using just the keys on my keyboard. Revealing the search results with Command + F, set up a new email with Command + W, then deleting the active one with delete.
And that’s a look at key triggers within Adobe XD, which is available right alongside gamepad support, so if you’re a game developer, you’re definitely going to want to check that out, as well. Check out LetsXD.com to continue your Adobe XD journey and head over to the Creative Cloud YouTube channel to catch the latest product updates and live streams.