Shadow on component clipping

I get this weird clipping when I place a shadow on a component with an icon component in it. The weird thing is, sometimes it happens, sometimes it doesn’t, and I can’t recreate it exactly the same every time.

So what I did was:

  • I created an ‘add’ icon component with a simple vector in it
  • I made an ellipse, placed an instance of the icon component on top, and created a component (let’s call it a FAB) from those two
  • I then added a shadow to this new FAB component

The shadow sometimes seems to be clipped with the frame of the icon component. Now I’ve tried to recreate the same thing with some things different (like creating a background (BG) component first) and when I apply the shadow on the ellipse instead of the component it doesn’t clip.

In these examples I did the following:
Component 1: added the shadow to the underlying ellipse >> no clipping
Component 2: added the shadow to the component >> no clipping
Component 3: added the shadow to the component (exactly the same as component 2) >> clipping!
Component 4: created a BG component with a shadow >> no clipping

I don’t understand how 2 & 3 can be the same but have different results. Please help, what am I not seeing? Am I doing something wrong?


@Tom_Hendrickx the clipping comes from “Clip content” option on some of the parent frames. This options hides anything that overflows the frame where it’s applied. Including all the shadows.

Make sure when you use the instance or override something in a component instance — that this prop stays off.

image

1 Like

Hi @Marko_Kosovic , thanks for responding. I wish it were that simple, but I’d already checked every frame and component, ‘clip content’ is already off everywhere.

And to top it off, when I opened the same Figma file just now, component 2, 3 AND 4 all had clipped shadows!

It seems like you’re just not meant to put shadows on component but only on underlying layers.

That seems super strange. Shouldn’t be the case… Can you share this in some throw away file and add edit rights so I can copy and see if I can reproduce it?

Sure thing, here it is .

It keeps getting weirder too. When I copied all of it to the new file, only component 3 had clipping :crazy_face: I’m losing it

@Gleb plz help

@Tom_Hendrickx Seems like a bug. Hiding and showing all the layers in Layer visibility control seems to fix the bug.
image
image

In some places it was top layer, in some instances the last child.

  1. So you can start at top level layers. Select them all
  2. Press “Enter / Return” on keyboard to select all children
  3. Toggle — Show → Hide.
  4. Repeat until you clean up all the children.

Seems to fix the problem but it seems like a bug.

@support

Report a bug with the file link to Figma support team via the bug report form.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.