Skip to main content
Solved

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?


Charlie_Wu

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

Best answer by tank666

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

Figma – 1 Jul 21
View original
This topic has been closed for comments

4 replies

Charlie_Wu
  • Author
  • 3 replies
  • July 1, 2021

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


tank666
  • 4857 replies
  • Answer
  • July 1, 2021

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

Figma – 1 Jul 21

Charlie_Wu
  • Author
  • 3 replies
  • July 1, 2021

Very clever, good solution. Thanks Yury!


  • 0 replies
  • July 31, 2021

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


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