Skip to main content
Question

Shadow on component clipping

  • November 29, 2021
  • 8 replies
  • 3027 views
THNDRX

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?

Screenshot 2021-11-29 at 17.42.40

Screenshot 2021-11-29 at 17.43.49

This topic has been closed for comments

8 replies

Marko_Kosovic

@THNDRX 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

Eda1
Rubem_Pechansky
2 people like this
  • Eda1
    Eda1
  • Rubem_Pechansky
    Rubem_Pechansky
THNDRX
  • THNDRX
  • Author
  • 7 replies
  • November 30, 2021

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.

Marko_Kosovic

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?

THNDRX
  • THNDRX
  • Author
  • 7 replies
  • December 1, 2021

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 🤪 I’m losing it

THNDRX
  • THNDRX
  • Author
  • 7 replies
  • December 1, 2021

@Gleb plz help

Marko_Kosovic

@THNDRX 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

Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • December 1, 2021

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

A
  • Anonymous
  • 0 replies
  • December 31, 2021

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

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings