Drop shadow effect in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a business intelligence analyst creating a dashboard in Figma.

📋 Request: Your manager wants you to add a drop shadow effect to key KPI cards to make them stand out visually.

📊 Data: You have a dashboard design with KPI cards showing sales, profit, and customer count.

🎯 Deliverable: A Figma dashboard design with drop shadow effects applied to KPI cards for better visual emphasis.

Sample Data

KPI	Value
Sales	$120,000
Profit	$30,000
Customers	1,200

1

Step 1: Select the KPI card frame in Figma that you want to add a drop shadow to.

Click on the frame to highlight it in the layers panel.

Expected Result

The KPI card frame is selected and ready for styling.

2

Step 2: Open the 'Effects' section in the right sidebar.

Click the '+' icon next to 'Effects' to add a new effect.

Expected Result

A new effect layer is added to the selected KPI card.

3

Step 3: Choose 'Drop shadow' from the effect type dropdown.

Set the effect type to 'Drop shadow'.

Expected Result

The KPI card now shows a default drop shadow.

4

Step 4: Adjust the drop shadow properties: color, opacity, blur, X and Y offsets.

Set color to black with 25% opacity, blur to 10px, X offset to 0px, Y offset to 4px.

Expected Result

The drop shadow looks soft and subtle below the KPI card.

5

Step 5: Repeat steps 1-4 for each KPI card you want to emphasize.

Apply the same drop shadow settings to all KPI cards.

Expected Result

All KPI cards have consistent drop shadow effects making them stand out.

6

Step 6: Preview the dashboard to ensure the drop shadows improve visual hierarchy without clutter.

Use Figma's presentation mode to view the dashboard.

Expected Result

The KPI cards visually pop out, improving user focus on key metrics.

Final Result

Dashboard

┌─────────────┐ ┌─────────┐

↓

✓Drop shadows create depth and help KPI cards stand out.

✓Consistent shadow settings maintain a clean and professional look.

✓Visual emphasis guides users to important metrics quickly.

Bonus Challenge

Experiment with different shadow colors and blur levels to match your company's brand style.

Show Hint

Try using a subtle colored shadow with lower opacity to create a unique but soft effect.