Interaction templates for gamepad and controller prototyping in Figma

May 11, 2021

Don’t have time to read the whole article? Check out my Controller Prototyping Templates here: https://www.figma.com/community/file/973739479806359976/Controller-Prototyping-Template

Auto Layout Woes

You may skip this section if you’re not a giant Figma nerd.

At the time of writing this, Interactive Components is in an opt-in Beta phase. While it has allowed for plenty of new possibilities in Figma, there are still some limitations, especially for gamepad prototypes.

The main limitation that I have seen brought up is the lack of compatibility that Interactive Components have with Auto Layout, an important tool for creating responsive designs in Figma.

In my case, the issue came up when creating gamepad interactions for menus that contained multiple widgets. There’s currently no way in Figma to set a component as ‘Focused’ besides having it at the top of the lists’ layer hierarchy. If we place our widgets in an Auto Layout frame, we will not be able to change the order of the layers between variants.

For this reason, I was forced to create two types of templates.

Simple menu templates allow you to create gamepad menus with Auto Layout's flexibility.

Controller navigable menu created with the Simple template.

Due to the current limitations of the Auto Layout frame, Simple templates are unable to be used with widget-like components.

Widget menu templates allow you to create gamepad menus supported by flexible interactions with nested components.

GIF of a Card selector widget working with the Widget menu template.
A card selector using the Widget menu template.
GIF of a Difficulty selector widget working with the Widget menu template.
Difficulty selector using the Widget menu template.

Without the features provided by Auto Layout, customizing these templates is not as straightforward as the Simple templates.

Using the Templates

This is what you came for…

First off, go duplicate the file here: https://www.figma.com/community/file/973739479806359976/Controller-Prototyping-Template

The template is similar for both the Simple and Widget menus. Place ‘Normal’ and ‘Focused’ state versions of your desired component into the list_(type)_(orientation)_item component set.

GIF of components being droppped into the corresponding component states to populate the interaction template.
Drag your components into the corresponding component states to populate the interaction template.

To create multiple menus with this template, I recommend adding components to the list_(type)_(orientation)_item as new variants then creating a copy of the list_(type)_(orientation) component set for that new variant.

Add your component to the list_widget_horizontal_item component set as a new variant. Here we add the ‘Counter’ component
Image of multiple copies of the list template.
Now I create a copy of the list_widget_horizontal component set and set it to use the new ‘Counter’ Button Type.

This method seems the cause the least amount of issues with the current version of Interactive Components.

Customization

This is really what you came for…

We can now create an instance with an overrideable auto-layout frame for our Simple list. Changes to the auto-layout frame’s properties will persist across states, so there is no need to individually edit each one.

Grab the Widget list from the Asset menu, drop it into your frame and customize!

GIF of the creation of a list using the Simple list template.
Grab the Widget list from the Asset menu, drop it into your frame and customize!
GIF of the Simple list menu working properly with minimal configuration.
The list works right out of the box!

With the loss of flexibility from our auto-layout frame, customization for the Widget list is a bit more manual. To change the distance between our components, we’ll need to go to the corresponding variants in the component set and change the spacing individually.

To make the process easier, do the following:

  1. Place the component into the template.
Image of the two Counter components in the list item component set.
My ‘Counter’ widget in the list item component set.

2. Create an instance and customize its variants to your needs.

An image of the Counter list instance.
Customize your variants in the Property menu on the right side.

3. In the design menu, click on the component icon to go to the component’s master.

Property controls for the instance.
Go to the main component to edit the spacing of your widgets.

The menu instances master component being shown.
The selected component being highlighted.

4. Make changes to the spacing between components by editing the distance in the highlighted space:

Image of the section I recommend changing the spacing.
The highlighted section will change the spacing of your widgets.

5. Do this for each state in your needed variant. Unfortunately, you must do this one at a time.

An image of the completed component set after customization.
Looking good!

6. Test!

GIF of the working Counter Widget list.
Success!

While the process isn’t perfect, it sure beats dragging all those interaction arrows every time I want to create a menu!

Figma has mentioned that auto-layout compatibility is high on their list for the full release of Interactive Components. I look forward to this article needing an update!