Skip to main content

Add background blur when opening overlay

A

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

6 replies

Celine_D
Figmate
  • Celine_D
  • Community Support
  • 3418 replies
  • April 14, 2023

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

1 Attachments
A
  • Alexman
  • Author
  • 1 reply
  • April 14, 2023

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.

Anastasia70
Rojin_T
2 people like this
  • Anastasia70
    Anastasia70
  • Rojin_T
    Rojin_T
Celine_D
Figmate
  • Celine_D
  • Community Support
  • 3418 replies
  • April 14, 2023

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! ☝️

dvaliao
1 person likes this
  • dvaliao
    dvaliao
P

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

Josh
1 person likes this
  • Josh
    Josh
M
  • Mireia3
  • 2 replies
  • August 15, 2024

Just changed from Sketch to Figma and I miss the background blur for overlays. Hope this feature will be added soon…!

Bryce_Driesenga

​@Alexman One workaround — set your overlay frame to the size you want with clip content turned off. Then, create a background blur frame that is larger than your overlay frame (i.e. the full page size). This allows the “close when clicking outside overlay” setting to still work. 

The one caveat I know is that this will not work great if you’re using any “move in” effects on the overlay as the background blur frame will also be affected by those.

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