Multiple overlays + interact with area outside overlay

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.
31 Likes

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 :frowning: ( don’t check my math )

6 Likes

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.

4 Likes

I would love to see this feature! When building a prototype for a search/filter experience this is so critical.

We need this functionality to build realistic prototypes, not just click-through prototypes.

3 Likes

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.

4 Likes

This tutorial may be helpful! https://www.youtube.com/watch?v=plD2XRrK7hw&ab_channel=SketchTogether

1 Like

Add On Click > Close All Overlays

4 Likes

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.

1 Like

Yes, please! I’d like to be able to open several overlays at a time and then move to the next screen with those selections open.

1 Like

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!

1 Like

Hello? Figma? Anyone there?

I too have the need to have more than 1 overlay open at a time.

2 Likes

Yes please! Would love this functionality :grin: thanks Figma!

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.

3 Likes

Does anyone have any updates or know of a workaround about this matter? :slight_smile: i am desperate for a way to interact with my overlays without being limitet

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.

Anyway, hope this maybe helps someone :man_shrugging: