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