Drop shadow effect in Figma - Dashboard Guide

Dashboard Mode - Drop shadow effect

Goal

Understand how to use the drop shadow effect in Figma to make dashboard elements stand out visually.

Sample Data

Element	Shadow Color	Blur Radius (px)	X Offset (px)	Y Offset (px)	Opacity (%)
KPI Card	#000000	10	0	4	25
Bar Chart	#000000	8	0	3	20
Table	#000000	6	0	2	15

Dashboard Components with Drop Shadow

• KPI Card: Rectangle with drop shadow color #000000, blur radius 10px, X offset 0px, Y offset 4px, opacity 25%. This makes the card float slightly above the background.
• Bar Chart Container: Frame with drop shadow color #000000, blur radius 8px, X offset 0px, Y offset 3px, opacity 20%. This adds subtle depth behind the chart.
• Data Table: Frame with drop shadow color #000000, blur radius 6px, X offset 0px, Y offset 2px, opacity 15%. This gently lifts the table from the background.

Dashboard Layout

+----------------------+----------------------+
|      KPI Card        |     Bar Chart        |
|  (Drop shadow 10px)  |  (Drop shadow 8px)   |
+----------------------+----------------------+
|                      Data Table               |
|                 (Drop shadow 6px)             |
+----------------------------------------------+

Interactivity

Drop shadows are visual effects only and do not change with filters or slicers. They consistently highlight each component regardless of data changes.

Self Check

If you change the drop shadow blur radius on the KPI card from 10px to 20px, how does the card's appearance change?

Answer: The shadow becomes softer and more spread out, making the KPI card appear more elevated and prominent.

Key Result

Dashboard with KPI card, bar chart, and data table each enhanced by drop shadow effects for visual depth.