Close all overlays and open target overlay

I would like a new option for interactions. That can close overlays when I want to open a new overlay. Swap overlay doesn’t work because of the location of the overlay with the interaction.

This is a situation that happens a lot in web applications. Use cases are:

  • Tooltips
  • Context menu’s (interaction to open a model)
  • In an add or edit model for entries and contains an interactions for select dropdowns or comboboxes.

Now I have to make new frames for the page behind the model and add new versions of the model on top of that. The whole point of overlays is that you don’t need to have duplicated screens behind every model.
If I don’t do it this way I have multiple open overlays what will not represent what I want to test with users and the developers to build.

@Figma_Support can you please take a good look at what this can do for you and the prototype powers of Figma :rocket:

10 Likes

That would be really helpful! Voted up.

5 Likes

Also giving this a bump as this has been a feature there’s been no movement on for quite a while now.

@Figma_Support, Something like a ‘Replace overlay’ option would do the job.
Essentially it would be the same as ‘Swap’ overlay but not tied to the position of the previously opened overlay.

Or alternatively extend ‘Swap overlay’ and add the position options you get in ‘Open Overlay’ (Eg… Centred, Top left, Top center etc) to ‘Swap overlay’ ?

Any of these options would be a big help in creating prototypes which work as expected when using the common UI pattern of triggering a modal overlay from a drop down menu.

Thanks and a big vote up!

7 Likes

Big up vote here!!

Either allow for positioning of the ‘swapped overlay’ or a ‘close all open overlays’ option to ‘open overlay’ or something else the issue of wanting to open a new overlay (perhaps in a different location) while closing the prior(s).

There are actually several of this same request worded differently

2 Likes

Thanks @Richard_Austin1 for the upvote and reply. Can you post the links to the other request here? So @Figma_Support can read see that more people want this.

This is especially helpful for toast notifications showing success. I’ve been waiting for a long time for this one.

5 Likes

Yes indeed. For toaster notifications, the current way of the layover function is not useful. Who knows, maybe they listened to this and we will hear on Thursday that this has been fixed :smiley:

This would be extremely handy with the new variables.

1 Like

I really thought that Figma solved this. But unfortunately it doesn’t work as I hoped.

It is now possible to link 2 actions to 1 interaction type such as ‘Click’. So you can now open an overlay and choose the second action close overlay. You just can’t indicate which overlay you want to close. This results in the overlay on which you have the interactions being closed and the new overlay not being opened. Maybe this is a bug @Figma_Support? Otherwise a bit pointless interaction.

3 Likes

There are so many use cases where this needs to happen. A frequent one for me is having a modal launch from a select list. There are several great solutions suggested above – to me, the simplest one is to let people specify which overlay is to close.

In general, it would be great if Figma’s prototype actions adhered a bit more closely to how they are done in JavaScript.

EDIT: I’m getting a prototype ready for presentation tomorrow, one where the user selects options from a series of select lists. I need to show the modal’s fields getting populated, and then eventually click the “Create” submission button. I can’t use variables to populate the select fields easily because the content has a combination of icons, pills, and text in it.

Therefore, I have 16 overlays piled on top of each other – each version of the modal and then each select list that’s been selected from (they won’t close on click because when they open another overlay they shift one layer down, so they’re just sitting there). The prototype gets slower and slower as I progress through each field, until finally at the end… it usually crashes, ironically right before it’s going to get rid of all those overlays and show the page with the saved record on it.

I’m going to skip some steps and hope the stakeholders can follow along. I can understand how 16 overlays might use a lot of RAM (although this is a still-new machine I deliberately bought with a lot of RAM), but I don’t understand why I need 16 open overlays in the first place.

1 Like

I’m having the same trouble here. Even with the new feature of Set variable and conditional I can’t work something there… If it’s work now can we have a tutorial from Figma ?

1 Like

Yeeees, using success or error toast after an overlay is open is frustrating, I need a new frame for every toast i need to show after an overlay is closed.

Please @Figma_Support make it possible!

2 Likes

Upvoted – need this badly!

1 Like

Need this for the same scenario! Would be super useful for toast notifications.

2 Likes

Yes, I know it drives me crazy.

1 Like

+1 This is such a common scenario. Figma needs provide ability to select overlays.

3 Likes

Upvoted! I need this for pretty much every prototype I build.

1 Like

My team and I could definitely use this - upvoted!

3 Likes

Or context menus → where you want to open a dialog … for example :slight_smile:

3 Likes

Updvoted, please make it real Figma Team

1 Like