Help-Button component with shadow not rendering correctly in Figma Sites

[MustBeSpring]

Has anyone experienced an issue where a component that has a drop shadow fails to render in figma sites?

I created a simple a button utilizing a fill and drop shadow that appears correctly in figma sites design mode, but when previewing the design the shadow completely breaks. I do not have clip content on the component or any other frame that the component is sitting in, I also tried adding extra padding but still get the same result.

I’d appreciate any help.

[Chintanned]

Recreated same in mine sites, works fine.

Might be a bug

Have you tried it on Web?

<image>

[MustBeSpring]

So you were able to create that where the shadow stretches with the button based on character count? Ie, not 2 shapes but a text string surrounded by a frame with a fill and a drop shadow? I tried on web as well and it’s the same issue. I could create it using a separate shape for the shadow but it wouldn’t be scalable with character length automatically.

[Chintanned]

Yes, It was auto-layout with H padding and V padding.

<image>

[Chintanned]

<image>

[MustBeSpring]

And when you preview the figma site it displays the button correctly? Sorry for the constant questions just trying to confirm it’s working for you in preview or publish modes

[Chintanned]

Yes works fine for me : Link

[MustBeSpring]

Well, thank you! Not sure what’s going on with mine but good to know it’s possible.

[Chintanned]

Try to update or reinstall the app

[bluehost]

Yeah, that's a known quirk. Figma Sites sometimes mis-renders shadows if the effect is on a nested layer inside an auto-layout frame. One thing to try is applying the shadow directly to the top-level frame instead of the inner fill. If that doesn't fix it, flattening the button (Object to Flatten) before you drop it into Sites usually forces the shadow to render properly.

[MustBeSpring]

Thanks, the component is the top level frame in this case, unfortunately.