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
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.
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.
Without the features provided by Auto Layout, customizing these templates is not as straightforward as the Simple 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.
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.
This method seems the cause the least amount of issues with the current version of Interactive Components.
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!
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:
2. Create an instance and customize its variants to your needs.
3. In the design menu, click on the component icon to go to the component’s master.
4. Make changes to the spacing between components by editing the distance in the highlighted space:
5. Do this for each state in your needed variant. Unfortunately, you must do this one at a time.
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!