Shadow effect gets in the way when "combining" instances

I have two instances. First is a message thread frame and the second is a message box frame that shows up when expanding the topic box. Both of these have a drop-down shadow effect.
The problem is that I want the first message in a thread to seem like an extension of the thread box, but the top part of the shadow effect makes it look like there’s a grey gap between them. (See the arrow pointing in the screenshot)

This is problem I’ve encountered several places when creating a design system for a new product. I could remove shadow effect, but it will make the product not look the way I want it to :cry:

Does anyone know of a way around this that doesn’t evolve spending extra time editing away the grey lines before sending it to developers?

Let me just add that combining them into a union makes the whole thing really weird. Might be because the instances consists of several auto-layout frames.


I’m not sure these suggestions are correct without looking at the file, but the problem seems to be that the expanded selection is filled white and is on top of the header section. By default, auto-layout puts the lower nodes on top of the higher nodes.

Try reversing the “canvas stacking” of the auto-layout frames to set it to “first on top”

Another solution is, instead of filling the expanded message white, give it no fill, and give its parent (auto layout) frame a white fill.


Also, rather than giving both the header and the expanded message a drop shadow, instead try giving the header a drop shadow and the auto-layout frame containing both a drop shadow, setting this outer frame to clip content. Again, though, I’m just guessing a bit here.