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.
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.
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
Howerver there is no such criteria when using a group instead of a frame.
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.
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
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.