Skip to main content

Multiple overlays + interact with area outside overlay

Koen_van_Niekerk

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.

18 replies

Cian_O_flynn

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 )

Madiha_Zaidi
Jorge_Lozano_Cerrato
Cedric_DELMOTTE
6 people like this
  • Madiha_Zaidi
    Madiha_Zaidi
  • Jorge_Lozano_Cerrato
    Jorge_Lozano_Cerrato
  • Cedric_DELMOTTE
    Cedric_DELMOTTE
  • ng_K
    ng_K
  • Xuan_Tu_n
    Xuan_Tu_n
  • Gladdys_Choo
    Gladdys_Choo
Sophia2
  • Sophia2
  • 1 reply
  • December 5, 2021

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.

Madiha_Zaidi
Cedric_DELMOTTE
B
5 people like this
  • Madiha_Zaidi
    Madiha_Zaidi
  • Cedric_DELMOTTE
    Cedric_DELMOTTE
  • B
    bartlett_goodell
  • Xuan_Tu_n
    Xuan_Tu_n
  • Nuria_Salarich
    Nuria_Salarich
Katie_Donahoe

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.

Madiha_Zaidi
Cedric_DELMOTTE
2 people like this
  • Madiha_Zaidi
    Madiha_Zaidi
  • Cedric_DELMOTTE
    Cedric_DELMOTTE
Madiha_Zaidi

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.

Louis8
1 person likes this
  • Louis8
    Louis8
Alex_Williamson

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

R
1 person likes this
  • R
    Ryan_Vallette
Darren_Beason1

Add On Click > Close All Overlays

V
Barry_McMillan1
Scott8
3 people like this
  • V
    VYXL
  • Barry_McMillan1
    Barry_McMillan1
  • Scott8
    Scott8
Darrel
  • Darrel
  • 3 replies
  • July 22, 2022

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.

Sharon12
  • Sharon12
  • 1 reply
  • September 9, 2022

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.

Joy_Guo
1 person likes this
  • Joy_Guo
    Joy_Guo
Scott8
  • Scott8
  • 2 replies
  • September 24, 2022

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!

Joy_Guo
1 person likes this
  • Joy_Guo
    Joy_Guo
King_Cody_ESI

Hello? Figma? Anyone there?

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

C
A
2 people like this
  • C
    Claire8
  • A
    Angela_Clemente
E

Yes please! Would love this functionality 😁 thanks Figma!

Ilarraza_William_CORP

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

Catherine_Yochum

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.

Jessica_Witmer
Joshua_Schar1
T
3 people like this
  • Jessica_Witmer
    Jessica_Witmer
  • Joshua_Schar1
    Joshua_Schar1
  • T
    Tim_Blanke
M

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

MGibson
  • MGibson
  • 4 replies
  • May 10, 2024

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.

Joy_Guo
Pooja_Martina_Lakra
2 people like this
  • Joy_Guo
    Joy_Guo
  • Pooja_Martina_Lakra
    Pooja_Martina_Lakra
MGibson
  • MGibson
  • 4 replies
  • May 10, 2024

Screen01
Screen02

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 🤷

Shalini_Singh

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.

Cedric_DELMOTTE

This video does not cover the subject in question in this thread

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings