Hi there. Running into an issue prototyping: I have Component A with 6ish variants. AA, AB, AC etc. Within these variants, there are a few different hover states where I’m using a “change to” transition. Everything is working great, but within the component, I want to have a drop down menu where users can select a different variant to appear (changing from AA to AB).
I think I need to use open overlay and a separate frame to achieve this, and I can link from the component to the overlay just fine, but now I’m finding I can’t link BACK to the original component and it’s variants. I.e, the user clicks on the drop down menu, selects AA, but I can’t link that frame back to the correct variant. Any work arounds here? Or do I just need to abandon the components and build out separate screens with each state to make this work?
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
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.
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.