Steps to reproduce
Click to add an “
Open overlay” interaction. Two options will be shown:
- Close when clicking outside
- Add background behind overlay
(see screenshot in the end)
Add background” only has the option to add a color.
Add background” also allows to add a blur effect to the layer on the background.
Frame1 contains the overlay content
Frame0 to take the full size of the screen
- Make it so that “
Open overlay” targets
Frame0 instead of
- Manually position
Frame1 (the overlay content) inside
Frame0 (the overlay)
- Add the desired background color and blur to
Problems with workaround
The “Close when clicking outside” functionality is lost since
Frame0 takes up the whole screen.
Manually adding an on-click “
Close overlay” interaction to
Frame0 would not work as intended.
This is because the entire
Frame0 would respond to the click, not just the part of
Frame0 that is not covered by
Frame1. More specifically, any part of
Frame0 which does not consume the on-click event (a button inside
Frame1 would consume it) will trigger the “
Close overlay” interaction.
Note: adding an on-click “
None” interaction to
Frame1 does not consume the on-click event.
Left: existing functionality (no blur but
"Close when clicking outside" works)
Center: desired functionality (blur but
Back button is the only way to close overlay)
Right: relevant options menu
Hi @Alexman ,
We have launched 32 Little Big Updates, including the background blur effects on overlay frames. It is now display correctly in prototypes.
Here below the workaround:
For more information about the others Little Big Updates, please check the release notes here: Figma product news & release notes
Thank you for your quick reply. I’m afraid I haven’t adequately analyzed what my idea entails.
The problem I’m facing is that I want to have both:
- A background blur (as shown in my screenshots and the video you provided)
- The “Close when clicking outside” functionality of the overlay
The “Close when clicking outside” functionality is lost because on both the workaround you and I provided, the overlay takes up the entire screen (in order for the background frame to have the blur effect) and therefore there is no “outside” to click to close the overlay.
Thank you for the clarification!
PS: Don’t forget to also Vote for your feature request, so we can accurately gauge interest from the community!
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
Love this idea, I also want to be able to add a background blur and still use the “close when clicking outside” feature, this would save me up so much time and extra frames