Add background blur when opening overlay

Share an idea
1

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)

Existing functionality:

“Add background” only has the option to add a color.

Desired functionality:

“Add background” also allows to add a blur effect to the layer on the background.

Possible workaround

  1. Suppose Frame1 contains the overlay content
  2. Put Frame1 inside Frame0
  3. Resize Frame0 to take the full size of the screen
  4. Make it so that “Open overlay” targets Frame0 instead of Frame1
  5. Manually position Frame1 (the overlay content) inside Frame0 (the overlay)
  6. Add the desired background color and blur to Frame0

Problems with workaround

  1. The “Close when clicking outside” functionality is lost since Frame0 takes up the whole screen.

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

Screenshots

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

screenshots
screenshots1514×1018 155 KB

2 Likes
2

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

3

Hi @Celine_Figma,

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.

2 Likes
4

Thank you for the clarification! :heavy_check_mark:
PS: Don’t forget to also Vote for your feature request, so we can accurately gauge interest from the community! :point_up:

1 Like
5

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

7

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

1 Like