Figma Support Forum

Adding a 'regular' interaction for only 1 of the variants of an interactive component

I would love to be able to add a regular (non-component) interaction for only 1 of the variants of an interactive component.

Users can press a button in my app to update their status (think ‘home’, ‘at desk’, ‘in meeting’, ‘at lunch’, ‘finished work’), while the rest of the app screen stays the same. An interactive button component is perfect for that! But in my prototype I want the final variant of the button to have an additional interaction: I want it to open a subscreen in the app. (Example use case: when the user says they ‘finished work’ they should be directed to their timesheet.)

This seemed impossible because all interactions of the interactive component (button changes) in my prototype were overridden by the interaction to open the subscreen. As a result the subscreen was immediately opened instead of only once the ‘finished work’ button variant was on screen.

My solution was to create the component interactions at a ‘deeper level’ - i.e. a frame within the button instead of the entire button. Then for the interaction of the button opening the subscreen, I used the entire button. Figma seems to execute the ‘deeper-level’ interactions first, and voila, the button cycles through all its states until finally it reaches the ‘finished work’ variant (which has no component interactions) and then it executes the regular interaction for the button.

Maybe this will help someone with the same issue, but Figma team, it would be really great to have the option to add a ‘regular’ interaction to an interactive component instance which is executed ONLY for a specific variant.