Layer blur in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a sales dashboard for your company.

📋 Request: Your manager wants the dashboard to have a modern look with blurred background layers behind key sales figures to improve focus and readability.

📊 Data: You have a dashboard design file with multiple layers including charts, text boxes, and background images.

🎯 Deliverable: You need to apply layer blur effects to specific background layers behind sales figures to create a visually appealing and clear dashboard.

Sample Data

Layer Name	Type	Position	Current Effects
Background Image	Image	Bottom	None
Sales Figures Box	Frame	Middle	Drop Shadow
Blur Layer	Rectangle	Behind Sales Figures	None
Title Text	Text	Top	None

1

Step 1: Select the 'Blur Layer' rectangle behind the sales figures box.

Click on the 'Effects' panel, then click '+' and choose 'Layer Blur'.

Expected Result

The 'Blur Layer' now has a layer blur effect applied.

2

Step 2: Adjust the blur radius to create a subtle blur effect.

Set the blur radius value to 10 pixels in the 'Layer Blur' settings.

Expected Result

The background behind the sales figures is softly blurred, improving focus on the figures.

3

Step 3: Ensure the 'Blur Layer' is positioned directly behind the sales figures box.

In the layers panel, drag the 'Blur Layer' below the 'Sales Figures Box' layer.

Expected Result

The blur effect appears behind the sales figures, not covering the text.

4

Step 4: Preview the dashboard to check the visual effect and readability.

Use the Figma preview mode to see the blur effect in context.

Expected Result

The sales figures stand out clearly with a blurred background, enhancing the dashboard's modern look.

Final Result

Title Text

↓

Blur Layer (blur radius 10px)

↓

Sales Figures Box

↓

Background Image

✓Applying layer blur behind key figures improves focus and readability.

✓A blur radius of around 10 pixels creates a subtle but effective effect.

✓Proper layer ordering is essential to keep text clear and visible.

Bonus Challenge

Try applying different blur radii to multiple background layers and compare their impact on readability and aesthetics.

Show Hint

Use the 'Effects' panel to adjust blur radius and toggle visibility to compare different settings.