Background blur in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working with the marketing team

📋 Request: Your manager wants a dashboard design with a clean look where the background behind pop-up filters is blurred to keep focus on the filters

📊 Data: You have a dashboard layout with charts and a pop-up filter panel that appears on top

🎯 Deliverable: Create a Figma design file that applies background blur effect behind the pop-up filter panel to improve readability and focus

Sample Data

Element	Property	Value
Dashboard Background	Image	City Skyline
Pop-up Filter Panel	Size	300x400 px
Pop-up Filter Panel	Position	Center of screen
Pop-up Filter Panel	Background	White, 80% opacity

1

Step 1: Select the pop-up filter panel frame in Figma

Click on the pop-up filter panel layer in the layers panel

Expected Result

Pop-up filter panel is selected and ready for editing

2

Step 2: Add a background blur effect to the pop-up filter panel

In the right sidebar under 'Effects', click '+' and choose 'Background Blur'

Expected Result

Background behind the pop-up filter panel becomes blurred

3

Step 3: Adjust the blur intensity for clarity

Set the blur radius to 20 pixels for a soft blur effect

Expected Result

Background blur is noticeable but does not obscure the overall dashboard

4

Step 4: Ensure the pop-up filter panel background color has some opacity

Set fill color to white with 80% opacity

Expected Result

Pop-up filter panel background is semi-transparent allowing blur effect to show

5

Step 5: Preview the design in presentation mode

Click the 'Present' button in Figma to see the effect live

Expected Result

Pop-up filter panel stands out with blurred background behind it, improving focus

Final Result

-----------------------------
|        Dashboard           |
|  [City Skyline Background] |
|                           |
|   +-------------------+   |
|   |  Filter Panel     |   |
|   |  (Blurred BG)     |   |
|   +-------------------+   |
|                           |
-----------------------------

✓Background blur helps keep the dashboard visible but reduces distraction behind the filter panel

✓Semi-transparent white background combined with blur improves filter readability

✓Blur radius of 20 pixels balances clarity and subtlety

Bonus Challenge

Create a toggle button that switches the background blur effect on and off for the pop-up filter panel

Show Hint

Use Figma components and variants to create two states: one with background blur effect and one without