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

Ask the community
1

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.

1 Like
2

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

1 Like
3

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?

1 Like
4

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? :woman_shrugging:)

5

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