Skip to main content
Question

Shadow effect gets in the way when "combining" instances

  • January 11, 2023
  • 2 replies
  • 689 views
Caroline_Malme_Foss

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 😢

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?

Screenshot 2023-01-11 at 14.57.00

This topic has been closed for replies.

2 replies

Caroline_Malme_Foss

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.

JosephxBrick
  • JosephxBrick
  • New Participant
  • 67 replies
  • January 11, 2023

Hi!

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”

image

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

[Edit]

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.

Terms & ConditionsCookie settings

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