Maybe the overlay functionality was originally designed to simulate modals.
But two (unnecessary?) limitations limit their power for other applications:
The fact that I cannot have more than one overlay open
The fact that I cannot interact with the area outside the overlay is very limiting
Please allow for having multiple overlays and for interactions outside of an active overlay. If you need regular modal behavior, you can still have that by checking a checkbox (off by default) in the Figma UI.
Limitations like this mean I have to back & forth between Figma & Protopie. I fully realize that Figma may not be aiming for HiFi prototyping (text fields, conditionals and even sensors). But just a couple of well designed tweaks and features will enable me (and probably others) to do 90% of my prototyping in Figma…
Example:
Image you have an image grid with smaller images.
Clicking an image will make it go full size.
A prototyping execution for this is loading an overlay with the bigger version of the image
You can browse the bigger images via “Swap overlay” with buttons on the overlays.
You can close the bigger image via “Close overlay” with a close icon on the overlay
Limitations
You cannot navigate to a completely different screen if the nav that triggers that screen is not on the active overlay. I have to close the overlay before I can use that nav.
You cannot browse the bigger images via “Swap overlay” with buttons that are not on the overlay.
I would also find this suggested feature very necessary.
I often make UI’s that have multiple toggle buttons on the same screen and would love to find an easy solution to have a user toggle on and off as many buttons as their hearts desire and move on to the next screen. Right now I am working on a meal planner that involves the user picking the days of the week they want to have a specific meal. You can toggle on and off all 7 days. Meaning I would have to make 2!7 ( 2x2x2x2x2x2x2) = 128 different combinations screens ( don’t check my math )
I also really need this feature. My use case is a user interface where the user can toggle on/off 5 different buttons. Each button opens a specific overlay that has to stay open, also when other buttons are toggled on.
Hi All, I agree… it’s the biggest requirement at the moment. Figma please check this out. I am sure, It’s not that complicated to create this feature.
Just chiming in to say “yes, please!”. As much as I love Figma, I’m quickly realizing that the prototyping options are severely limited causing a lot of bottlenecks in our workflow.
Any update on this? As stated many times, it’s easy to open an overlay, and swap out an overlay, when it’s the same size and in the same position. I need a button in that overlay (Dropdown menu) to launch a new overlay (pane/modal) in a different location and with different dimensions AND close out the original overlay. I can get the new pane/overlay to display, and I can figure out how to manually position it (though it is a bit trial/error/tedious) but I cannot figure out how to close that first overlay (the dropdown menu). It really ruins prototypes for colleagues when you’re trying to show intended functionality. Seems an easy fix and a known problem for at least two years now. Figma, hello? Thank you!
Yes, please. I needed to create an overlay with an overlay for the animation of a keyboard and bottom sheet. Right now I have to use smart animate which makes the designs harder to manage
I’m running into this limitation too—my overlay is a modal with a filter dropdown. I want to click a “filter” button in the modal, have it open the filter dropdown, make a change to the filters, and then click “apply” in the filter dropdown to take me to the next state of the modal overlay.
I know it’s been quite some time since this was posted, but I found sort of a workaround.
While you can only open one overlay at a time, you can have overlays open overlays. So if you open one overlay, set that one to delay of 1ms, then have it open another overlay, this gives the impression that two open at the same time. I believe you could also have a button on the overlay set to open another overlay as well. You’ll have to be creative with how you create the overlays though, to make sure the placement works.
You also can’t close them all at once, but you can create the overlay so that the frame covers the entire screen, then set it to on click, navigate to the same page it is on, thus seeming like they all disappear.
So for my use, I wanted the keyboard to slide up into place and for the search bar to change instantly. I had to have the keyboard pop up first, then it instantly opens the search bar change, so it all looks completely normal. I then made the frame of the top overlay (search bar) take up most of the screen and set it to tap>navigate to>same page it’s on, so it just looks like doing so clears the overlays.
I’m fairly new to Figma, but this was the only way I could figure out how to make it look normal. It also still has the problem of only being able to interact with the topmost overlay.
I found this thread as I also needed to have a graph focus when selected (checkbox) clicked and needed to do this for multiple instances together.
Here is my work around - Create a symbol (small picture in your case) - add hover/click behaviour as a variant (big picture), click variant to return to default/normal state
Hope it helps.
( don’t check my math )
thanks Figma!
i am desperate for a way to interact with my overlays without being limitet
