Keyboard and Game Controlled Prototypes
Learn how to leverage unique triggers like keyboards or game controllers to control your prototypes.
Framer allows you to prototype with non-traditional devices by using the Key & Gamepad triggers.
Not only will these new triggers allow you to customize your prototype's experience, but you're able to combine multiple different triggers from 1 screen to create a truly native experience.
Keyboard and gamepad triggers only take a few clicks to set up, so let's take a look at how we can add these new triggers to our designs.
Adding a keyboard trigger
In order to add Keyboard or Gamepad navigations, you'll need to first understand what type of elements you're able to attach these triggers to.
Adding Keyboard and Gamepad triggers are only available to Screens laid down on the canvas, and not from within any nested elements.
Since you're able to attach multiple interactions based on the different key(s) you might press, keeping your transitions available from the top level is important for organization.
After selecting the Key and Gamepad trigger, you'll be prompted to choose the key you'd like to control the trigger. Clicking into the box will activate it, and save whatever key you press into its selection!
You're also able to use modifier keys like CMD, or different triggers from game controllers if one is plugged in and available.
Navigating between screens
Now that we know how to add a keyboard or game trigger, all we need to do is add a them into a prototype to see it in action.
In this example project, we're using a smart component with two different variants(Default and Selected). If we use a Magic Motion transition between the two screens, Framer will automatically animate the component between the variants we have defined, making a truly seamless experience when previewing the prototype.
Try in Framer
Framer allows you to add powerful interactions to your prototypes and components, without needing to write any code.
One thing to keep in mind, is that you're able to set multiple transitions on your screens. Having duplicate events set across your prototypes might cause some unexpected behavior, so make sure you double check the places you set your transitions to make sure your prototype will work correctly.
You can always read our guide on understanding Animations, Transitions, and Interactions in Framer to learn more.