Shadow doesn't appear with autolayout

[falsesymmetry]

I’ve created a bar component with a shadow applied, and then the image below. All stitched together vertically with auto layout, with no spacing between them. The problem is, no shadow of the bar component is visible as a result. How can I fix this and keep the automatic layout enabled?

Demo:

https://www.figma.com/file/zXGeHNz795qnK58ZAgySfo/Shadow-issue-demo?node-id=1%3A5

[Constantine_Zuev]

This is a known issue with auto layout. The problem is that the next item in the list is at higher Z-index. So if it is opaque your shadow from previous item is never visible because if is below in Z-index. (Imagine you copy pasted rect on top of it, then moved rect down)

You can try either:
A. Not use auto layout and place bar on top it using constraints. Works best when bar has fixed size regardless of its content.

B. Wrap your bar in another frame, make it 0.0001px height. And make sure frame is not clipping it. This will eat up a portion of your image, so use another auto layout on image to add padding. This works best when bar height is fixed but you need the width to grow with content text.

C. Separate the shadow from bar (make it a gradient rect) and use A or B to place it on top of your image. This will let your bar grow both vertically and horizontally depending on content.