Trying to make a prototype that has two interactions on one element, as follows:
An interactive component icon which changes state when interacted with AND when clicked it triggers an overlay to open
The end goal, for reference: When you click the hamburger, I want it to open the overlay, and at the same time I want the hamburger icon to change into an “X” icon (the other variant in the interactive component), which can then be used to close the overlay.
I am aware that I can’t use “on click” for both interactions, so I did “on click” to open the overlay, and within the interactive component I used “mouse up” to swap the icon variant.
This isn’t working though. When I click the icon and then release (mouse up), it changes state, but the “on click” isn’t registered and the overlay isn’t opened.
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:
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.
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).
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
