A Step-by-Step Guide to Applying Blur in Figma

Hi, everyone!

In this post, we will discover how blur effects can improve user interface (UI) design and overall user experience (UX) and learn how to apply them to backgrounds and images in Figma!

I’ll guide you through a quick and easy step-by-step guide and give you some tips and tricks to help you master these awesome skills!

This post is based on one of the classes from my Figma Essentials course. When you become a BYOL member, you gain access to this course as well as my 30+ additional courses on After Effects, Photoshop,Illustrator, Lightroom, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

Why should we use blur effects in UI?

Blur effects create a sense of depth in a layout. For better results, it’s important that we don’t have too many elements in our design. We can find blur effects applied to abstract backgrounds to screens or specific interfaces, like login or signup frames.

We can also apply blur effects to overlapping elements, like top navigation or sidebar menus, keeping our designs clean and easy to read and flow through.

Blur effects can also enhance buttons in modern and elegant design interfaces. These will lead users into taking specific action without overwhelming their experience with too many elements to observe.

If used wisely, blurred backgrounds are also great for hierarchy, contrast, and accessibility. Adding a blur effect to the background of key information panels or decisive call-to-action interfaces will make them stand out and capture a user’s attention.

Mastering these skills takes time. Too many blurred elements can cause distraction and reduce readability, heavy pain points for user experience. Look for UI case studies online, check out how top brands handle blur effects on their websites, and experiment to become more familiar with when to apply a blur. 

1.      Layer Blur in Figma

Layer Blur is easy. As an example, I’ll use this photo from this Product Details page. First, we select the image by clicking on it with the Move tool, which you can find on the top toolbar or use the shortcut key “V” to activate. Next, we move to the right sidebar and, under Effects, click on the Add button, the one with the “+” sign.  

Finally, we click on Layer Blur and that’s it! Our image is now blurred. We can adjust blur effect settings, we’ll have a look at that a bit down the road.

Another use case for the Layer Blur effect: we can apply it to multiple images, arrange them together and assign them different values to set hierarchy and depth. Let’s use the three images as seen below. After adding the Layer Blur effect, we’ll click on the effect settings button and give each one a value.

As we can see, there is a depth of field look to this composition. The top image is fully focused, and has our full attention. The second is a bit blurred, and the last is pretty much out of focus, making them less distracting while keeping the user aware of their presence. It’s a great trick.

Timeout #1

Check out this article to learn more on Blur and Shadow effects in modern UI design.   

2.      Background Blur in Figma

Let’s move on to Background Blur and how to best apply it to our prototype. We’ll use the background from this Confirmation page and an overlaid element that will be blurred to allow users to comfortably observe them both. We’ll start by creating a frame over the map background, using the Rectangle tool, select it and fill it with white.

Then, keeping our frame selected, we move to the Effects panel on the right sidebar and add the Background blur effect.

Nothing seems to change, huh? For us to see the effect, our frame’s Fill needs to be a bit transparent. To do this, we move up to the Fill panel and change the Opacity value next to the Hex code. Let’s try 50%.

It worked! We’ve changed the frame’s background. We can see the part of the map below the frame but it is a bit blurred. Let’s click on Effect settings and adjust the value until we are happy with the effect’s intensity.

Timeout#2

Get inspired with this article on 10 of the best UI case studies in 2024. See if any of them could be improved by adding or removing blur effects.

3.      Creating an Effect Style in Figma

Let’s say we need to add this background effect to many different elements along the design process, throughout multiple pages. Things like buttons, overlaying panels, and pop-up information cards. Do we need to take all these steps again for each one of them?

No! We can create an Effects Style from the settings we’ve set a few paragraphs above! How can we do this?

Easy!

Let’s go back to our Confirmation page and select the frame we’ve been working on. I’ve added a drop shadow effect for extra depth and visibility. Let’s save all these settings as a Style. We move to the Effects panel, click on the Styles button and then on the Add button, inside the Effect Styles dialog box.

Next, we give our new style a name – it should be easy to remember or easily identifiable to any other member on your team. When you’re done, click on Create Style and it’s done!

How do we apply this Style to a new frame? Let’s have a look!

I’ve created a new frame on the homepage. Nothing much, just a rectangle with a gray solid fill. Let’s change it in a flash. We move back to the Effects panel, click on Styles, and finally on the style we’ve just set up.

Nothing happened! What are we missing…? You’re right, we have to change the frame’s Fill Opacity to less than 100% to make it transparent. Let’s go for 50% once again and…

Success! Our new frame’s background is now blurred and transparent, allowing us to catch a glimpse of what is below it without overwhelming our senses! Isn’t this great?

And there we have it!

We’ve covered Layer and Background Blur effects in Figma, and have a clear idea of how blur effects can transform our designs, making them smarter and more accessible to your end users. This is a valuable skill for modern UI, so take your time and practice.  

What 's Next?

To learn more about UI and Figma, join BYOL and you will gain access to my Figma Essentials and Advanced courses as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Get started here.  

See you in class! – Dan