Skip to main content

When creating an overlay for something like a tooltip or notification center, if you use a glassmorphism effect with background blur, you’ll always see what’s behind the overlay in the file. The expected result would be to see what behind the overlay while presenting. For example, if I want to the overlay to open across multiple frames, with different backgrounds, I would have to duplicate the overlay and frame it’s displayed over to achieve this. But, that doesn’t solve the issue if the user scrolls the frame behind it, as the background of the overlay wouldn’t scroll with the page.


Expected:

Screen Shot 2021-03-19 at 4.14.54 PM


What’s happening:

Screen Shot 2021-03-19 at 4.15.08 PM



  1. Does anyone have a work around or a way for the overlay to always show what’s behind it while presenting instead of what’s in the file?

+1 same here, please provide it, would save so much time!!!

@Figma_Support It would be really helpful to include this feature in your next update

+1, this makes any workflow using components (among other things) unusable, we have to make multiple frames for every state that includes an overlay. God help you if you have multiple multi-state objects for each page.

+1 Upvote for this

+1 that’s super important!

@Figma_Support

+1 same here. We need background blur for overlay during prototyping. Thanks! @Figma_Support

@Figma_Support Pls add this feature, would be super helpful! Bumped into it myself a couple of times already.

@Figma_Support +1 Please we need this

+1 here @Figma_Support

This would be amazing

I think its time for an official roadmap and more activity from the Figma officials.

This forum contains tons of great product ideas and also tons of bug reports (for example Interactive Prototypes and Smart Animate), complaints about missing features and discussions about time-consuming workarounds.


To me personally, it doesn’t feel like most of that is on Figmas radar.

Or at least they don’t respond most of the time.

Are you listening to what your customers want and what problems they need you to solve?

Hopefully some kind of roadmap will be established this year.

Another +1 here 🙂

+1, not that it seems to make a difference…

Common guys, please hear the voice of your user base.

Exact same issue. +1

Create a component set. It might be a complex thing. But you can achieve the exact background blur result in overlays.

Hey all!

Now it’s available. Presentation mode already supports background blurring for overlays.

A post was split to a new topic: How to enable a background blur within an overlay?

I think there should be a blur effect option in overlay options while creating one! It could be handful sometimes alongside adding dark background & …

YES! The option to blur the entire background OR only what’s behind the overlay would be huge. The application I design uses a TON of Drawer-like components with blurs, and I can never make it look similar without building a Frame the same size as the current working Frame that instant appears AND having the Drawer slide-in directionally on top of that Frame. It’s a messy & hacky solution.

Yes, we need this functionality badly!

Reply


Terms & ConditionsCookie settings