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
- Use the colour for shadow similar to the button. Don’t make it black in case you have a colourful button and vice versa.
- Use opacity less than 40%.
- 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!