Skip to main content
Koen_van_Niekerk
Koen_van_Niekerk
April 29, 2021

Multiple overlays + interact with area outside overlay

  • April 29, 2021
  • 19 replies
  • 17123 views

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.

    19 replies

    Show previous replies
    Emily_Tillett
    May 1, 2023

    Yes please! Would love this functionality 😁 thanks Figma!

    Ilarraza_William_CORP
    Ilarraza_William_CORP
    New Member
    May 2, 2023

    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
    Catherine_Yochum
    New Member
    May 10, 2023

    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.

      Maya_Maria
      October 26, 2023

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

        MGibson
        MGibson
        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
        Shalini_Singh
        July 30, 2024

        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
        Cedric_DELMOTTE
        New Member
        November 4, 2024

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

        Mike Hnr
        Mike Hnr
        New Member
        February 16, 2026

        Hy Guys,
        When handling multiple overlays, one practical approach is managing focus and pointer events carefully so users can still interact with the background when needed. Setting pointer-events: none on specific overlay layers and controlling z-index stacking usually solves most outside-click interaction issues. I’ve seen similar UX considerations when building structured content layouts, especially for menu-heavy pages like https://thepandaexpressmenu.com where layered elements, popups, and nutrition calculators need smooth interaction without blocking the main page. Clean event delegation and clear state management make a big difference in keeping everything responsive and user-friendly.

        Terms & ConditionsAccessibility statement