Figma Tips: Blur Effect
Figma is beating its way through to become a top player in UI/UX and Wireframing market. Today we would discuss two cool blur effects in Figma.
Frost Background effect
- Start by importing a sample image in Figma.
2. Now add a “rectangle” by pressing the rectangle icon(Shortcut : R).
3. Now, lets add a background blur to the rectangle. In the design settings tab on the right, change the fill transparency to 1% and add effect -> Background Blur with Blur amount as 35 (could be any value).
4. You get the below effect:
5. Now, add an Inner Shadow effect with the following settings:
6. Great! The frost pane is ready for you to add some content in it!
Layer-Blur Glow effect
- Start by importing a sample image in Figma.
2. Duplicate the layer and place it below the original layer.
3. Now select the duplicate layer and in the design properties, add a layer blur of 45.
4. Great! Now you have a cool background effect. Add some spice to suit your needs:
Hope you enjoyed the story. Post your images/links in the comments section and if you have any other questions, let me know!:) Until next time…
