Does that mean that every single time you want to create a dropdown for example, you can't just use a component, you have to take the component and add floaty links to it?

@FigmaBites

Ай бұрын

No, you don’t have to use this technique at all. It was a pretty specific issue when there were multiple interactions in the same element. And I think it could’ve been fixed in a different way, too. Are you having a similar issue with your dropdown?

Very useful

@FigmaBites

Жыл бұрын

Thank you!

How would this work in a component that is animating open / close submenus and so positions are not static? Having this issue now where I have a component as an outer menu that opens and closes from a hamburger button. Within that outer menu component, each top level menu item inside is also a component with open/close variant states that when open, shows a sub-menu with child links below it. So nested components within a component. In prototype testing, the outer menu opens and closes from the hamburger button as expected, and the inner menu items also open and close as expected from their + triggers. They open almost like an accordion style so it expands downward. When I try to link the sub-menu child links to their associated pages it does not work when playing the prototype flow. The links just aren't there even though I can see them mapped correctly in the prototype design layout. It just does not honor the link through the state changes of the inner menu items opening and closing to show their child links. Very frustrating. The problem with floaty links is that it assumes things are static in position, not changing shape on variant swap (open/close). I can't just have the pink boxes chilling out on top of there because they'll be OVER the other menu items. Hard to explain which makes it hard to find a solution but hopefully you followed the explanation.

@FigmaBites

Жыл бұрын

I think I understand what you are saying. Do you have a link to a file you can share? Doesn't have to be the real one but a copy with any personal info removed. If you don't want to post it here, you can also email it to me.

@RoarHGF

Жыл бұрын

@@FigmaBites Thanks for the speedy reply! Sure, I threw this somewhat ugly example together quickly: www.figma.com/file/SdaHrajJOFb9oPRCS5N1Wl/Components-within-Component-Menu-Proto-Example?node-id=0%3A1&t=Eu6uooTgB55lpkFP-1

@dave_poore

4 ай бұрын

@@FigmaBitesLove this video, thank you! I'm actually working on something similar to what this comment mentions. Did you ever look into it? If not, I'd be happy to send something your way.

@FigmaBites

4 ай бұрын

​@@dave_poore I never got a link to the file so I could take a look. If you wanna send something my way with some notes and the issues you are seeing I'll try to help you out.

Sorry, I could not understand the logic behind this fix. How is it possible that placing a square can fix the issue with nesting interactive components and having interactions on different layers. Thanks for the video enyway!

@FigmaBites

Жыл бұрын

Well it turns out what actually fixed it was removing the 0% opacity layer that was tied to an interaction.

@FigmaBites

Жыл бұрын

@UCULYNIzhf9DWZVcp4aKaaTA Yes.

@inspectaeclectic1706

Жыл бұрын

@@FigmaBites I still don't get it. How does it work?

@FigmaBites

Жыл бұрын

@@inspectaeclectic1706 It is just taking the connection and putting it on another element so that Figma didn't trip up over multiple hover interactions. The file is linked in the description if you want to check it out. This video definitely isn't a typical use case ;)

@user-djsxkdlxmfem

Жыл бұрын

@@FigmaBiteswhere can I find the file attached?

Basically remove the hidden button or element from your variant set because it cannot keep track of states

@hatefulcrawdad1

2 ай бұрын

Essentially