Figma now allows parent hug >< child fill <> combo?

My understanding has been that the combination of child frames set to fill while the parent is set to hug is incompatible. @Mr.Biscuit demo’d a clever workaround to achieve this at Config 2021 in his bi-directional hugging, but recently when I’ve tried executing that workaround it’s failed. I figured Figma pushed an update that negated it, but didn’t do any formal investigating.

Today when I was working with some auto layout frames, I purposefully set some child elements to fill and their parent to hug to demo the forced override, but to my surprise that little toast at the bottom of the interface never showed up! The settings were applied. No conflict.

Does anyone know:

  • When this became possible?
  • What the new “rules” are when it comes to incompatible auto layout resizing settings? For example, if I set those text layers from “hug” to “fill” the Container layer does get forced to a fixed width…
1 Like

I got the same experience and was wondering whaaaat :smiley:

But passed it and didn’t think it’s something to investigate

I’d appreciated if someone could explain details.

Same thing here, I have a file created 2 years ago where it works. In a new file created this week, I’m replicating the exact same component, and it doesn’t. No idea how to workaround that

Hi there, Thanks for reaching out about this. I empathize with your frustration when the previous workaround no longer functions.

Currently, if any child objects within an auto layout frame are set to “Fill container”, the parent frame will no longer Hug contents and become “Fixed” for the axis. Unfortunately, it is not possible to set the parent hug while the child is set to fill.

Please review the resizing options for Auto layout below to see if any of them can serve as a workaround for your design: Explore auto layout properties - Resizing

​​I also attempted the workaround demonstrated in the video linked in the original post, but it seems to be ineffective at the present time. However, I came across a auto layout plugin from the speaker of the video. I am not certain if it will meet your requirements, but you may be interested in it: Pro Layout Panel

If the options provided do not assist in reaching your design goal and you require a child object to retain the “Hug contents” within the “Fill container” Parent object, please consider providing feedback at: Share an idea - Figma Community Forum

Thanks again for reaching out.

2 Likes

Appreciate the details and reply Junko, thank you!

I was wondering if you’re able to help explain how myself, @Moon_Rat and @SohrabNiroo were able to stumble into a hugging parent + filling child combination in prior years? My best guess at the moment is that the development team may put out unannounced releases that impact auto layout, and occasionally those releases allow us to get the “impossible” frame combination of a hugging parent + filling child. But then this gets noticed and corrected in a subsequent release.

In any of these cases where a fill child is working inside a hug parent, are you setting a max with on the child?

Not in my case–great clarifying question to ask though, I appreciate that.