Hi @Matthew_Schwartz! Do you really need to use an overlay? If your overlay is a menu, then you can create a Component set with open and closed variants for the navigation menu without using an overlay. You can see an example in this post:

2m

Thanks for the reply but this did not solve my issue. The design in your examples is different and did not solve the problem for me of wanting to have an icon dynamically change when clicked, but also having the click trigger a modal overlay. Also, it doesn’t solve the issue which is that even if I use two different interactions on the same element, it doesn’t work. I used on click and on mouse up, but only one works. That seems like a bug to me. If needed I can try to share a basic wireframe to illustrate my desired design and functionality.

There are various limitations in the beta version of Interactive Components. Maybe this is a similar topic: When using an interactive component in a prototype, "Click" doesn't execute

Could you send a link to an example file of what you want to do?

What @tank666 said. You may check this reply, I’ve had good success with it.

Attached is a visual of what I want to accomplish, and the two results I am currently able to get that are wrong. The hamburger/X is an interactive component, and the blue menu is an overlay that slides in with animation when the hamburger is clicked.

I tried various combinations of interactions within the interactive icon component and for the prototype action that opens the menu overlay. Various combos such as click for the menu overlay, and mouse up for the interactive icon swapping component. And a few other combos I tried. Nothing allows me to get BOTH the icon swap AND the menu overlay slide in at the same time.

Thanks. I think some of this issue is due to limitations in the components at this time. Please check my main thread reply with more info and a visual of what I want to accomplish. Thanks again!

@Matthew_Schwartz, I don’t understand why the previous file didn’t suit you, because it works the way you want.

I made one example for you on the third page that doesn’t use the “Open Overlay” action, but it works as it should (excellent), and one example on the fourth page using the “Open Overlay” (it turned out not very nice).

Design file:

Thanks for clarifying and linking to the specific examples that look like what I wanted.

I can see in all examples that you included the menu bar within the components or overlays. That is where I was confused. I was trying to keep the menu bar as a separate component from the side navigation.

I guess due to the limitations currently we have to put them together. That will work for now, but hopefully eventually Figma will improve some of the issues with not being able to do multiple actions and interactive components separately. Thanks again for the help

There is one more method that I demonstrated on the fifth page of the file.

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