Framer and Game Controllers

Using Xbox 360 Controllers with Framer prototypes

Framer has quickly become one of my favourite tools for creating high fidelity prototypes. If you haven’t had the opportunity to try it yet, you should download the trial right now and drop by the incredibly supportive community on Facebook.

While Framer is perhaps most commonly used to create mobile prototypes, it’s also fairly simple to create desktop prototypes that can be controlled with a variety of peripherals, such as game controllers and bluetooth remote controls.

In this short tutorial I’ll show you how to use an Xbox 360 controller to interact with a Framer prototype using ControllerMate.


Before You Begin

  1. Plug in your Xbox 360 controller. Please believe me when I say I’ve discovered the hard way how essential this step is.
  2. Install ControllerMate. This is the program that will translate input from our Xbox 360 controller to keyboard input our Framer prototype can understand.

Getting Started with ControllerMate

Let’s start by opening up ControllerMate and creating a new page.

Select Xbox 360 Wired Controller from the floating palette.

This is your controller.

Now drag and drop Button #14 Building Block and Button #15 Building Block to the empty page from the Controls section of the palette.

These are the building blocks we want.

Right click on Button #14 Building Block on the page and select Create Building Block > Output > Single key in the menu.

Click Capture in the Inspector window and press the left arrow on your keyboard. You’ve now told ControllerMate to trigger the left arrow on your keyboard when you press left on the directional pad of your controller.

Now right click on Button #15 Building Block on the page and select Create Building Block > Output > Single key in the menu.

Click Capture in the Inspector window and press the right arrow on your keyboard. Now pressing right on the directional pad of your controller triggers the right arrow key on your keyboard!

By now your ControllerMate page should look something like this.

If it doesn’t you’re on your own.

The Framer Prototype

Now it’s time to download and open our Framer prototype.

Although I hope the comments are enough to understand what’s going on in the prototype, it’s worth mentioning the document.addEventListener. This tells Framer to listen for specific keys on the keyboard, and is what ControllerMate will be triggering every time we press left or right on the directional pad of our controller.