Prototyper

About this plugin

Create game controller and keyboard navigation prototypes in seconds with Prototyper. Used and trusted by designers at PlayStation, Riot Games, Blizzard, Epic Games, Amazon, Microsoft and more.

Learn how to use Prototyper

In this Game UI Prototyping talk, learn how to build a Game Inventory, Skill Tree and Quest Log prototype in under 10 minutes with Prototyper.

Create a prototype from existing mockups (demo)

1. Select all top-level frames of your mockups.
2. In Prototyper, go to the Link tab.
3. Click Link.

Create a prototype from a single mockup (demo)

1. Create components for the UI elements you would like to navigate in your mockup. For each component, add a component property to change between an unfocused and focused visual state. Now replace the UI elements with instances of the components you just created.
2. In the top-level frame of your mockup, select the component instances.
3. In Prototyper, under Navigation Focus type the name of the component property that controls focus, and the values that represent the unfocused and focused states.
4. Click Generate.

Prototype interactions will be automatically assigned based on how the selected elements are arranged. For example, mockups or elements arranged horizontally will be navigable with left and right inputs.

Privacy & Network Access

Prototyper is completely private. It runs locally in your file and does not make any network calls. All stats are also calculated and stored on your computer.

Open Source

Prototyper is open source and contributions are welcome!

Contributors

1. Alex Tokmakchiev - PlayStation Controller Keycodes
2. Antoine Plu - PlayStation Controller icons