Dashboard Mode - Inner shadow effect
Goal
Show how to use the inner shadow effect in Figma to highlight key metrics on a BI dashboard, making important numbers stand out with subtle depth.
0
0
Inner shadow effect in Figma - Dashboard Guide
Sample Data
| Month | Sales | Profit |
|---|---|---|
| January | 10000 | 2500 |
| February | 12000 | 3000 |
| March | 15000 | 4000 |
| April | 13000 | 3500 |
| May | 16000 | 4500 |
Dashboard Components
- KPI Card: Total Sales
Shows the sum of sales for all months. Uses inner shadow effect on the card background to create a subtle inset look that draws attention.
Calculation: Sum of Sales = 10000 + 12000 + 15000 + 13000 + 16000 = 66000
- KPI Card: Average Profit
Shows the average profit per month. The card uses inner shadow to create a soft depth effect making the number pop.
Calculation: Average Profit = (2500 + 3000 + 4000 + 3500 + 4500) / 5 = 3500
- Bar Chart: Monthly Sales
Displays sales by month. Bars have no inner shadow to keep clarity. The KPI cards with inner shadow highlight summary metrics above the chart.
Dashboard Layout
+---------------------------------------+ | Total Sales (KPI with inner shadow) | +---------------------------------------+ | Average Profit (KPI with inner shadow)| +---------------------------------------+ | | | Monthly Sales Bar Chart | | | +---------------------------------------+
Interactivity
Adding a month filter updates the bar chart and KPI cards. The inner shadow effect on KPI cards remains to keep focus on key numbers regardless of filter changes.
Self Check
If you filter the dashboard to show only March and April, what are the updated Total Sales and Average Profit values shown on the KPI cards with inner shadow?
Answer: Total Sales = 15000 + 13000 = 28000; Average Profit = (4000 + 3500) / 2 = 3750
Key Result
A BI dashboard showing total sales and average profit KPI cards with inner shadow effect, plus a monthly sales bar chart.