Figma Support Forum

Has anyone figured out a way to hack auto layout so that a frame is constrained to the parent, while everything else adheres to auto-layout?

This is a niche problem but I’ll describe it in detail below.

Normally, if I apply a solid background and shadow to a frame and added auto-layout, this would be fine, and I wouldn’t have a problem. However, in Figma, when a transparent layer has a shadow, the shadow appears beneath the transparent background (it does not do this in HTML/CSS).

In order to work around the shadow affecting the background, I created a “layer” component that contains the shadow with a mask that removes the shadow from the contents. You might be able to see where I’m going with this.

I want to apply this style to a parent frame with auto-layout. My current solution is to put this layer component inside a zero-height frame, which is then inserted inside the parent auto-layout container. Whenever the parent container changes sizes, I need to manually adjust the layer component to match the size of the parent.

Is there a way to make this layer component constrained to the parent auto-layout style without me having to resize it every time?

See demo here

As a note, if the shadow effect ignored the frame background, this wouldn’t be a problem at all.

For your hack to work, you need to do it on each side separately. I edited your example:

Very clever, good solution. Thanks Yury!

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