Create better shadows in Figma in 4 easy steps
The default (drop) shadow settings in Figma don’t really feel right. There are some reasons for this. Let’s look at how you can do shadows the correct way.
Follow for more Figma tips!
0 | AS IS in Figma
The default settings in Figma are as follows:
- 0px 4px 4px rgba(0, 0, 0, 0.25)
Compared to no shadow, it’s solid, yet it doesn’t feel quite right; it’s harsh and unnatural. If you want a quick shadow on a card, Figma’s default settings will do the job. This one is also great for low- or mid fidelity wireframes.
1 | Adjust shadow settings
To fix this, change the settings. In the example below, we adjusted X, Y en Blur settings to give the shadow a natural look. Light isn’t harsh, but soft and blurry. The settings I used are as follows:
- 0px 4px 16px rgba(0, 0, 0, 0.25)
2 | Adjust shadow bg colours & opacity
If you want an even better result, you have to change the colours and opacity of the shadow. The default black…
