Why do auto-layout setting reset when swapped to a particular component variant?

See video: Untitled - Figma 2021-02-03 15-43-34

I have the following mock setup:

Content - A simple component that contains content.
Layout - Auto-layouted component with a header, grid placeholder, and a link (marked with red for illustration purposes).
Content blocks - Pre-made combinations of content that I intend to swap out the placeholder instance in “layout” for.

All the content blocks have their autolayout height set to “hug content”. The placeholder instance has its height set to hug content. When I start swapping out the placeholder for blocks, you can see how the entire instance grows and shrinks vertically, as intended. However, when I swap for the 1280px variant, then suddenly the instance autolayout height is set to “fixed” which breaks vertical layout as you can see with placeholder instance not growing after the content block height.

Why does the instance reset to “fixed” height despite both the variant and instnace it is swapped into have their height set to “hug content”? The only difference is that one is auto-layouted vertically and other horizontally, but why would it matter?

File: Figma

:sweat_smile: Hey @miggi

1 Like

Just seeing if maybe I am doing what you are intending.
I added a video as well. So you can see me attempting what I think you are attempting.

  1. I replace the grid place holder component with your component with variants
  2. Swap the variants in the properties menu
  3. It seems to be adapting the heights when changed

Please clarify, If I am not reading the question correctly.

Thanks

1 Like

Hi Miggi, thank you for looking into it!

Actually, you got it exactly right and I have no idea why it is suddenly working as intended in both your video and in the document, but when I try replicating the behavior in another setup I added above the old one in the linked doc, I am back to the 1280px switching to “fixed” when the variant is activated. See the video.

Am I missing something in the setup, or is this some random bug I can’t get away from?

Bump, anyone knows what could be causing the bug those some times but not others for Miggi?

Edit: Figma team was able to reproduce the bug after some testing, and filed a bug report. Just posting here for reference if anyone else stumbles upon the topic.

4 Likes

I’m having the same issue. Any info whether this should have been fixed already or any info on the root cause of this?

4 Likes

Same here. It’s auto layout but when I swap a component with [hub content] to a component with [fixed height] - Figma maintain the height of the previous component which was on [hug] so I’m getting large space below.

The expected behaviour is the newly swapped component to take his original [fixed height] size.

2 Likes

I’m having this issue as well. I’ve got nested auto layouts in a product tile with variants that I’m designing. I’m trying to make some of the variants responsive to content length in other tiles that they will be in a tile group with, so that they’re all the same height even if some have longer content. I’m trying to lock the “Add to Cart” button to the bottom, and to do that I need the outer-most frame to be Hug Contents, but the button frame to be Fill Container.

However, when I select “Hug” for the outer frame, and then go to the button frame, the button frame is set to “Fixed.” When I change that to “Fill,” and then go back to the outer frame, the outer frame is set to “Fixed.” It’s just an endless circle of frustration.

Hey @Grahame_Beresford, if I understand you correctly, you can see a similar example file in this post: Same height Cards (Auto layout) - #4 by tank666.

I am also having this problem. I change the master component to Fill, test it, make a couple other unrelated changes, and Fill is now set to Fixed and the component is broken.

Hello @Dave_Nelson, Thank you for flagging this! We would like to offer more assistance, but it’s a bit challenging to investigate the cause of this issue without a bit more context.
Would you mind sharing a quick video recording or screenshots of the issue?
It would be helpful to have the full Figma screen visible, including the left and right panels to show the properties and layers panels, as well as expanding the relevant layers.
This will enable us to better visualize the issue and see if we can reproduce the same behavior.

Hope to hear from you soon! We welcome any insights or suggestions from the other community members!

Thanks,

@Junko3 I think I have figured it out, the unrelated changes I have been making are not unrelated.

When changing the auto layout settings of a nested object any parent objects “Fill,” “Hug,” and “Fixed” settings may be changed to accommodate the changes to the nested object.

Hi @Dave_Nelson, Thank you for replying. I’m glad that you figured it out!