Skip to main content
Question

Is there an easy way to use variants to navigate to a different frame depending on the selection in a drop-down list?


I have built a drop-down list with variants so that works properly in the prototype.
Now, I want to show a different frame depending on the selection made from the drop-down, but I haven’t been able to figure out how to make that work in the prototype.

5 replies

Haroll
  • Active Member
  • 273 replies
  • May 5, 2023

Hello @KB1

You’ll have to override the interaction trigger on click of the drop-down instance (from the Prototype Panel Shift+E)
image
From there you can connect each item from the drop-down list to a specific frame.

Hope it helps


  • Author
  • 1 reply
  • May 6, 2023

Thank you for the helpful reply. I’m not sure what you mean by ‘override’, but I am able to connect the ‘on click’ prototype interaction, for an item in the drop-down list, to another frame. BUT, my drop-down list already has an ‘on click’ prototype interaction for each item in the drop-down list (to change the selection (the item showing in the list)). So, it seems I need Figma to do 2 things upon selection of an item in the drop-down list: 1. change the item showing in the list, and 2. navigate to a different frame.

I haven’t been able to figure out how to get Figma to do more than one thing upon an on-click interaction. It seems it may not be possible, but perhaps I’m missing something?


SomethingFishy

There doesn’t seem to be a straightforward/elegant way to do this. I’ve been wanting to do the same on so many occasions, and the closest thing I’ve found uses variables. (Seen in this video: https://www.youtube.com/watch?v=FPV70GnKT7U )

But this isn’t foolproof. I’ve tried to integrate component interactions within the components I used for this variable interaction, and the component interactions don’t work. I also tried it with custom property names, but it seems to only work if your property name is “state.” /eyeroll

To be fair, I’m pretty new to Figma, so maybe I’m missing vital info.

My non-dev brain really wants some kind of “tagging” system that I could tie into some conditional interactivity. Like “if the variant property of this component equals “selected”, then show the frames tagged with “selected”.” (Maybe that’s what variables are? 🤷‍♀️)


Prerana_Morey

Hello
I am actually facing this issue. Did you find a way to do this?


TES
  • New Member
  • 1 reply
  • February 14, 2025

Hello @KBI, 

I just ran into the same problem. The only workaround I found was a “Double click” solution. I f.e. chose two events: On tap and Touch up. In my case, touch up navigates to the new frame and On tap changes the state of the dropdown menue. 
It works, but not so smoothly. If you double click the dropdown-item, it looks smooth. 

But maybe there is a better way..?


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings