Skip to main content
Question

Drop shadows appear in design but missing in prototype view


gj-jay

Inherited drop shadows show in the design file but don’t properly appear in prototypes. You can see in the image of the design the avatar and campfire image both show the drop shadow, but in the prototype the drop shadow is missing on both.

Design:

Prototype:

An effect style is enabled on the container component that both the avatar and image inherit. When I apply the effect directly to the component’s sub-elements they appear in the prototype, but that defeats the purpose of applying the effect style to the container component to avoid having to micromanage each individual element inside.

This topic has been closed for comments

6 replies

Haroll
  • Active Member
  • 273 replies
  • May 1, 2022

Hello @gj-jay

Could you share us the layer view of your project? It looks like the parent with the shadows property is a frame and that probleme could be resolve by changing the frame to a group

TL;DR transparent frame blocks children shadows beneath it whilst group doesn’t

When using a frame as a parent to pass shadow to its children, the children’s shadow will render but will be masked by the frame surface unless the frame meet on of the following criteria:

  • Only fills with less than 100% opacity
  • A stroke, but no fill
  • A fill or stroke with a blend mode that isn’t Normal
  • A center or outside stroke with less than 100% opacity
Figma Help Center

Howerver there is no such criteria when using a group instead of a frame.


gj-jay
  • Author
  • 8 replies
  • May 2, 2022

Hi Haroll,

Here’s a picture of the component structure - you can see the shadow is applied to the main component, which has no fill background.

Is there any reason why frames (or more specifically a component in this case) have different behavior than groups? I’d like to keep things as a frame so constraints behave properly as this component is used in multiple different screen sizes.


Haroll
  • Active Member
  • 273 replies
  • May 3, 2022

Hello @gj-jay

I’m sorry it seems that I accidently I cut off a part of my previous message. There is an option in the box shadow window that allow you to trick the system

By checking Show behind transparents areas checkbox your prototype should match your design

On the “why frame behave differently than group” question, I’m afraid I too do not have an awser 😦

Let me know if it helps


gj-jay
  • Author
  • 8 replies
  • May 3, 2022

No worries, appreciate it! I tried toggling ‘Show behind transparent areas’ off and on and reloading the prototypes affected - unfortunately it doesn’t fix the issue in my prototypes but thank you for the suggestion.


Ahmed_Hazem

i think it happens when you use backgroud blur effect i have the same problem and when i removed background blur it worked but how to fix backgroud blur not showing in prototype
?


  • 0 replies
  • June 24, 2022

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


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