How EA Uses Framer To Prototype UI For Games

An in-depth look at how we use Framer to design UI tailored for gamepad environments.

Emil Widlund

Emil Widlund

April 28, 2017

Prototyping User Interfaces is starting to get easier than ever. Triple-A games usually have a lot of progression and persistence layers built into them, which requires quite a lot of screens. In order to build solid menu flows, that people really understand, there has to be a way of testing them early.

So, how can design teams that are responsible for a game UI, incorporate prototypes into their workflows? Well, there are a few great prototyping tools out there like Origami & Framer, that have great support for phones and such. Some of them also have good compatibility for desktop prototyping, but almost none of them are compatible with prototyping a gamepad/TV environment.

The design team I belong to at DICE (an EA-studio behind titles such as Battlefield and Star Wars Battlefront) faced this problem recently, as we were working on the Battlefield Franchise UI. We have our platform running on Xbox One, Playstation 4 and PC, so we had to come up with a solution for prototyping our designs in a gamepad/TV environment. Our solution: Framer Library.

Framer Library is an open source JavaScript framework for high fidelity prototyping. We use it with a custom module that enables gamepad-support and a whole lot of other handy features.

We are using Framer in combination with the excellent State Management library MobX. With these two libraries, we can build solid, customized prototypes. Any crazy idea we might have is now limited by JavaScript, not by an application, which often is the case. If it’s doable with JavaScript, we can build a high-performant prototype of it with the use of Framer’s wonderful APIs. On top of that, Framer has amazing documentation over at framer.com/docs. As you might see, Framer is written in CoffeeScript, but we are using JavaScript & ES6 to gain flexibility.

In order to create a gamepad-compatible prototype, there were a few fundamental components that we had to build on our own.

Gamepad API

The Gamepad API is responsible for capturing input from a connected gamepad, and turn them into events. We can then fire certain functions when buttons are being pressed. An example of a library we can use for this would be Gamepad.

Focusable Elements

In order to “focus” elements on the screen (since we don’t have a cursor or touch input to rely on), we need elements on the screen which can be focused. A “focusable” always have a clear, pre-defined state which the user clearly can see as selected. A focusable box for instance could be black as default, but as soon as it is selected, we switch the box’ state to “focused” which perhaps is white. This is how we declare a focusable:

Prototype of EA Gamepad

Focus System

The Focus System keeps track of all focusable elements within the current view. It also receive navigation-events from the Gamepad API, and figures out which focusable should be selected. We’re capturing all focusables’ X & Y positions relative to the viewport and by using Pythagoras Theorem we can calculate which the closest is.

Action Handler

When we have a focusable selected and press “A” on the Xbox Controller, we might want to trigger a certain function. It’s up to the Action Handler to keep track of all actions that are bound to the selected focusable. It also handles actions that are bound to a view (like “Back” which would transition back to the previous view).

App Wrapper

This is the heart of the prototype. It handles all transition logic, initializes FocusSystems & renders an appropriate canvas to show your prototype on. It’s built as an extension of Framer’s FlowComponent, which makes it incredibly easy to transition between screens. We can also define our own transitions!

Prototype showing Flow Component used in EA Gamepad

Grid

We have a grid which we use to define sizes, margins, paddings, etc for components. 24 columns within the safezone. The safezone is 90% of the viewport. This is to ensure that the content rendered won’t be clipped due to different TV-manufacturing standards. So, on all views we have, we always import a safezone and mount our layers & components onto it, and then we define sizes and margins with the grid. Here’s an example of the grid class:

We use the getWidth & getHeight methods to define sizes and margins for our components. Who doesn’t love perfectly aligned UI elements?

Components

Of course, we need components that are built to be used in a TV Prototype. So yeah, we pretty much just extend the components offered by Framer, to build our own cards, buttons, lists, popups, etc. Most of these components are extensions of the Focusable class, as you would want to be able to focus them.

These are the primary building blocks we built to support our needs. We also built a small server that serves mocked data to be used in any of our prototypes; like game assets, profile information, recommendations, etc. We might publish our core modules that we built for this purpose, so you can get a better insight of how we approached this. I hope that you found this article somewhat interesting, and inspired you to take gamepad/TV prototyping to the next level.

To learn more about how Framer can improve your product team’s workflow, check out all the features included in their integrated design, prototyping and collaboration tool. Or talk to them to find out more about the additional features included in our Team plans.

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.

5 Ways Facebook Scales Their Design System

Read more ›

Design Systems in Framer X

Read more ›

Creating Code Components

Read more ›

Try Framer X.

The world’s most advanced tool for interactive design has arrived. Get started with Framer X today.

Try it for free › Learn about teams ›

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.