Rules to Perfect Button Shadow on Figma

Effects serve a number of purposes from the aesthetic to functional. They can enable you to signify that an element is interactive, like making a button look clickable by giving the rectangle a shadow.

Blurs can shift identify inactive or inaccessible elements, like thumbnails for an unlocked game levels. Or provide visual hierarchy to focus a user’s attention on a dialog box.

In Figma, you’re able to apply four types of effects to a layer or object:

• Drop shadow
• Inner shadow
• Layer blur
• Background blur

Shadow effects

There are two types of shadow effects in Figma: drop shadow and inner shadow.

Drop shadows are a great way to add depth and dimension to your designs. You can do this by creating the shadow of an object on a surface behind or below it.

Drop shadows can vary in opacity, depending on the effect you want to create.

Use drop shadows to:

• Create distance between objects
• Set the direction of a light source
• Make your designs stand out against a background
• Make objects looks three-dimensional
• Stylize text and icons
• Add borders around a layer or object

3 Rules to Perfect Button Shadow

1. Use the colour for shadow similar to the button. Don’t make it black in case you have a colourful button and vice versa.
2. Use opacity less than 40%.
3. Make the shadow smaller than a button.

Perfect Formula For A Button Shadow

If you have any comments, feel free to leave them below.

Follow, clap and share if you like the story!