Musings on Drop Shadows in Figma

Drop shadows have been around since the 80’s, back in the heady days of PageMaker, FreeHand and Quark Xpress. And yes I used them all, and still wax nostalgic for them occasionally. And yes I’m old.

Needless to say the basic interface and tools have remained relatively unchanged since then, outside from obvious improvements such as edge refinement. Most current designers are most familiar with the drop shadow options available in Adobe Creative Suite, and Figma has stuck with the general menu options established there.

First off a quick review of Figma’s drop shadow options. They do improve on a few things right off the bat, at least in regard to access. Drop shadows in Photoshop are still buried several menu layers down. Not so with Figma; Drop Shadow is the default option under ‘Effects’ :

Clicking on ‘Drop Shadow’ allows for quick customizing of the X and Y axes, Blur, and Spread, as well as options for gradients and opacity. The only thing missing is a ‘preview’ option. You can ‘shut’ the open eye (above) to turn off the effect at least. The default settings can be tabbed through as usual:

Finally by clicking on the ‘raindrop’ icon next to the close-X you have access to the Photoshop-esque effects that have long been industry standards. Not the most intuitive icon option but once you use Figma a bit you get used to it:

You’ll rarely use some of these options, though having access to them is great. A minor tweak in Hue or Luminosity can really help a drop shadow pop off a color background.

Here’s a simple example of a drop shadow using the default settings. I usually tweak these as I prefer a more ‘traditional’ drop shadow (offset to the lower right a bit more), but this works well for most quick applications, such as a document screenshot.

So even with little or no experience with Drop Shadows one can quickly add and adjust them in Figma. While an easy effect to overdo, they are essential elements in modern design, UI and UX especially. I’ll delve deeper into some of the differences between Sketch and Figma’s options in my next post.