How to Fix Cropped Shadows in Figma

[rank_math_breadcrumb]

Fix Cropped Shadows in Figma

In this quick tip I’ll show you how to fix cropped shadows and overflowing elements that you sometimes get in Figma. This can be a common issue when you create a group, or apply auto-layout to specific elements.

Fixing Cropped Shadows or Overflowing Elements

Here’s a complete video version of this Figma quick tip.

Begin With an Object

Let’s assume that you’re creating a button, and you add an auto layout to it so that the proportions can stay true even when scaling.
Give it a color, and a sizeable drop shadow:

Button Object Figma / How to Fix Cropped Shadows in Figma
How to Fix Cropped Shadows in Figma

Then duplicate the button, select both versions, then apply an auto layout to the both of them.

auto layout to buttons Figma
How to Fix Cropped Shadows in Figma

Immediately you can see that the drop shadow has been cropped around the objects. It’s visible between the button, but nowhere else.

Here’s Why

When you create an auto layout group in Figma it’s done by making a frame from the objects in question. The boundaries of frames are clipped by default, so we need to turn that off.

With the objects selected, go to the properties inspector and deselect the Clip contents checkbox:

Clip contents Figma / How to Fix Cropped Shadows in Figma
How to Fix Cropped Shadows in Figma

Clip contents Figma / How to Fix Cropped Shadows in Figma
How to Fix Cropped Shadows in Figma

Problem solved!

Problem solved Figma

Overflowing Objects

The same applies to overflowing objects. For example, these buttons are themselves within a frame. And if we want them to be visible beyond the boundaries of the frame we’d need to make sure Clip content for the frame is unchecked.

Buttons Figma

That’s How to Fix Cropped Shadows and Missing Overflowing Elements in Figma.

How to change multiple colors in Figma

30+ Best Shipping & WooCommerce Pricing Plugins
20+ Best WordPress Family Blog Themes

Share:
Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Leave a Reply

Latest posts
Subscribe To Our Monthly Newsletter
No spam, notifications only about new products, updates.
Related Posts