How EA Uses Framer to Prototype UI for GamesHow EA Uses Framer to Prototype UI for Games

An honest look at how our design team is incorporating Framer into our workflow.


Emil Widlund

March 2, 2017

The following is a guest post by Emil Widlund, Product Designer at EA. A longtime Framer community member, Emil has over five years of experience in the gaming industry, with a huge passion for brilliant user experiences.

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. 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:

new Focusable({
width: 100,
height: 100,
backgroundColor: 'rgba(0, 0, 0, .66)',
animationOptions: {
time: .2,
curve: 'ease-out'
focusProperties: {
backgroundColor: '#fff',
animationOptions: {
time: .2,
curve: 'ease-out'
actions: [
keyCode: 2,
label: 'Select',
function: () => {
App.transition(view, Transitions.goIn);


Defines the animation when going from the focused state back to the default state.


Essentially the equivalent of a Framer state. Properties defined in this object are properties which will be applied when focusing the layer.


This array contains actions that will be fired when the keyCode specified is pressed on the gamepad. The label is used in the prototype footer where contextual labels & button icons usually goes. That’s the area where the user can see which buttons to press to perform actions like “Back”, “Apply Filter”, “Read More”.

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!


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:

class Grid {
constructor() {
this.columns = 24;
this.columnWidth = 62;
this.columnGutter = 10;
this.rowHeight = 10;
this.safezoneWidth = 1718;
this.safezoneHeight = 970;
getWidth(cells) {
return (this.columnWidth * cells) + (this.columnGutter * (cells - 1));
getColumnGutter() {
return this.columnGutter;
getHeight(rows) {
return this.rowHeight * rows;
getSafezoneBounds() {
return {
width: this.safezoneWidth,
height: this.safezoneHeight
getSafezone(parent) {
return new Layer({
parent: parent,
width: this.safezoneWidth,
height: this.safezoneHeight,
backgroundColor: 'transparent',
export const grid = new Grid();

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


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.

Sign up for our newsletter

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