Inner shadow effect in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer working with your marketing team.

📋 Request: Your manager wants you to create a visually appealing KPI card with an inner shadow effect to highlight key metrics on the dashboard.

📊 Data: You have the KPI values such as Sales, Profit, and Customer Satisfaction scores to display on cards.

🎯 Deliverable: Design a KPI card in Figma that uses the inner shadow effect to make the card stand out and look modern.

Sample Data

KPI	Value
Sales	$120,000
Profit	$30,000
Customer Satisfaction	85%

1

Step 1: Create a rectangle shape in Figma to serve as the KPI card background.

Use the Rectangle tool, set size to 300px width and 150px height, fill color #FFFFFF (white).

Expected Result

A white rectangle appears on the canvas sized 300x150 pixels.

2

Step 2: Add the KPI text and value inside the rectangle.

Use the Text tool to add 'Sales' and '$120,000' with font size 24px and color #333333.

Expected Result

The KPI name and value appear clearly inside the rectangle.

3

Step 3: Apply the inner shadow effect to the rectangle to create depth.

Select the rectangle, go to Effects panel, click '+' and choose 'Inner shadow'. Set color to rgba(0,0,0,0.25), X offset 0, Y offset 2, Blur 4, Spread 0.

Expected Result

The rectangle shows a subtle dark shadow inside its edges, giving a recessed look.

4

Step 4: Adjust the inner shadow settings for a softer effect if needed.

Reduce the shadow opacity to 15% and increase blur to 6 for a gentle inner shadow.

Expected Result

The inner shadow looks smooth and enhances the card without overpowering the content.

5

Step 5: Duplicate the card and update KPI text and values for Profit and Customer Satisfaction.

Copy the rectangle and text, change text to 'Profit' and '$30,000', then 'Customer Satisfaction' and '85%'.

Expected Result

Three KPI cards with consistent inner shadow effect and updated data appear side by side.

Final Result

┌───────────────────────────────┐  ┌───────────────────────────────┐  ┌───────────────────────────────┐
│ Sales                        │  │ Profit                       │  │ Customer Satisfaction         │
│ $120,000                    │  │ $30,000                     │  │ 85%                          │
│  (inner shadow effect)       │  │  (inner shadow effect)       │  │  (inner shadow effect)       │
└───────────────────────────────┘  └───────────────────────────────┘  └───────────────────────────────┘

✓Inner shadow effect adds depth and focus to KPI cards.

✓Consistent styling improves dashboard visual appeal.

✓Subtle shadows help highlight important metrics without distraction.

Bonus Challenge

Create a hover state for the KPI card that intensifies the inner shadow effect to highlight the card when the mouse is over it.

Show Hint

In Figma, duplicate the card, increase the inner shadow opacity and blur, then use prototyping to switch states on hover.