Background blur distorting in prototype

Please I’ll need your help. I’m new to Figma and whenever i try to make use of background blur on a frame it applies well but when prototyped it becomes a mess.

Am I not doing something right?

Could you share a screenshot of how it looks like in prototype vs design?


The first picture is the design with the triangle that has the bg blur effect perfectly covering the frame.


This is what the prototype always looks like

This is really odd. You can try a few things to troubleshoot this. Try making the blur layer smaller and see how the prototype would change. Try moving it to the left or to the right and see how the prototype would change.

I think this might have something with your prototype screen size settings. With nothing selected, on the right panel click on prototype and see if you have selected anything under device. make sure it’s set to none.

you can also try duplicating the frame and resizing it to see if you can get this effect replicated.

As a last resort you can try changing the top layer’s constraints to this:
Screen Shot 2022-06-11 at 9.22.17 AM

1 Like

Thank you for this. I’ll give it a try

1 Like

Did this work. have you found the solution?