Skip to main content
Question

Using "Navigate to" on a non-default varient in a component


Paige_Johnson

Hi, I’m having trouble using “Navigate to” overrides on component variant interactions. I’m trying to make a component where a non-default variant will navigate to a different frame (while the rest just change between the varients).

For example. I have a list that you can navigate up and down with the arrow keys (the arrow keys here are changing the list component between variants of each other. When you press up from the top of the list, it navigates to a new frame, when you press down at the bottom of the list, it navigates to a new frame.

For some reason, this only works for the variant that is set first when starting the prototype (whether the first or last item is selected by default). Is this a bug? As designed? Any workarounds other than having individual frames for each list item being focused?

Figma – 30 Jun 22
This topic has been closed for replies.

5 replies

Francois_Coucke

Same issue here, it seems that non-default variants still don’t keep track of the navigation they are linked to. Are there any improvements about that or any workaround that might have been found ?


I have the same issue. Specifically when using a drop down menu. I am creating a dashboard with a filter. When the filter is open (variant state) I can’t use the variant to navigate to a new page (filtered state). Instead I have to build the component as two components. That’s the only work around I’ve been able to find so far.


I don’t know if I had the same issue as you, but I intended to use one of the variants of my component to take the user to another frame with the same component ‘in another variant,’ and it wasn’t working either. I noticed that changing the name of the component variant within the second frame made it work. I recommend you give it a try! If you can, please respond letting me know if it worked 🙂


Chris_Ko_Hoffman

Just tried this before searching. While renaming the layers let me embed different links by swapping to/from different variants, when going back to the default variant and into a prototype, the non-default variant just has no link attached.

It’s weird because even switching to that variant in the file, I can see the link there, just in the prototype it seems to be overriding… Yet, there isn’t any overriding set to reset the component to default. I’m stumped!


SiDsBiZ
  • 1 reply
  • November 20, 2024

I wanna share the solution which was working for me: If you have a dropdown component where the “open state” is a menu with nested components, it helped me to wrap the nested component into an “interaction-helper”-frame which i then could use for prototype “navigate-to” connections within the Design


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