Variant Instances and Overlay Prototyping Issue

If you could provide an example, it would be better, But as far as I understand your situation here is what you can do

Make a variant component containing the DRP option button and its hover state option, then have TEXT and Icon ( if applicable ) properties for it

Now, create another varient component and make your dropdown Open state by the previous component and make a clone for each option closed state, change the TEXT and Icon of each button

Now prototype Like this:

Main: (Closed State Empty)
By Click: (Open State)
By clicking on any dropdown option : ( change to chosen closed varient )

after the DRP is closed the chosen data will replace and again by clicking change it back to the Open state

Remember: if to use this in a frame it has to be above the layer of what’s under it, so that prototype works correctly.

Important: If you use auto layout in your frame the Open state varient size must be as the size of the close state and uncheck Clip content, Or else your prototype will act as auto layout which causes unwanted movement in your prototype.

You can add a Mouse leave prototype as well to close the DRP if the mouse left the area

I hope this works for you

Thanks, this helped set me in the right direction. I still couldn’t create a separate component of just the dropdown because it won’t let me link two separate components. I had to just create every single state, like you suggested, as variants within the same component. Seems crazy that in an effort to reduce this kind of work that Figma still isn’t giving us the option to link different components together or link together a component with a frame overlay.

Your very Welcome

Well, Figma is growing every day, We should remember that it is still a Startup, it has already done a massive job and I’m sure over time features get more fascinating than ever.
Of course, If Adobe does not ruin it.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.