Test your Menu Flow in Minutes with an Xbox or PS4 Controller using Adobe XD

If you are a UX Designer working in the game industry and looking for a quick way to prototype the menu flow of your game with a controller; maybe this would be helpful for you.

But before I begin, here’s a disclaimer;
This is not an official solution, but it is a workaround I found while waiting for Adobe to provide support for controller in XD. *still dreaming*.
If you are still looking for the official support, you can keep an eye on this (old) thread.

These are the steps to setup the prototyping environment in Adobe XD:

Bind each key to a button

The key objective is to link each keyboard key with a binding that will execute a click on the “Xbox Controller Input Bar” in Adobe XD.

To do this, download Auto Mouse Click (Mac / Win) Free: murgee.com/auto-mouse-click

Download and open this Adobe XD file.

We are going to use Auto Mouse Click to record the coordinates of each button box in the “Xbox Controller Input Bar” at the bottom of our Adobe DX file.

Let’s start by binding the “LT” (Left Trigger) button of our “Xbox Controller Input Bar” with a key of our keyboard.

Save your file first (e.g., LT.MurGaa) inside a folder that we’ll name “Xbox Buttons”.

In Adobe XD press “Play” on the top right of the page (inside the red circle).
Now Extend the Preview mode to full screen.

Click on “Start/Stop” to execute an action that will bind “LT” to a key on your keyboard; we’ll use “3” for this example.

Click on “Pick & add.”

Switch to XD’s fullscreen file preview and click on the LT button area.

You should hear a beep sound after clicking. That means the coordinates are recorded. Refer to the video below for a step-by-step demonstration:

Repeat for all the other buttons.

If you have a MacBook 13", you are lucky because you have the same screen resolution that I have, which means you can download the files here.

Controller mapping

Download Joystick Mapper for Mac ($ 4.99): joystickmapper.com
or Keysticks for Windows (Free): keysticks.net/site/

Next, let’s use Joystick Mapper to map our key actions to each button.

This step is pretty simple. Create anew preset first and name it “Xbox One”. Click on “Edit this preset.”

Now bind the key “3” to the “LT” button.

Repeat these steps for all the other buttons that you need.
When you are done check the preset that we just created.

Create and Test your Game Flow in Adobe XD

For this example, we will simulate moving a selector on a vertical list using the UP / DOWN buttons to navigate between the screens.

Open Finder and locate the “Xbox Buttons” folder .

Run all the “.MurGaa” files that you previously mapped or, at least, Up / Down.

In Adobe XD, switch to Prototype mode and click on the “Down” button over the “Xbox Controller Input Bar” and drag the interaction wire to the screen containing the next navigation state.
Do the same for the “Up” button by wiring it to the previous screen.

Go to Preview mode in full-screen to see your navigation menu finally working.

There we go. Enjoy testing the UX of your menu systems.