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.
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?