I noticed a bug that has recently appeared sometime in the past two weeks dealing with autolayout and nested components.
Our team uses master components so that we can push style changes to all variants quickly. It works great and helps keep things tidy. The only issue with this is that if you want a full-width component (for instance, a button you want to expand to the size of the mobile screen), you would normally have to take these steps:
Drag a variant instance onto the frame
Double click to go from the variant to the master button frame
Change Resizing from “Hug Contents” to “Fill Container”
Adjust the width of button width as necessary
This has historically worked but now whenever these actions are done, trying to set any Resizing option automatically chooses Fixed Width. This breaks resizing nested components.
You can view this process in the video below. I created a new master button and a small variant set, and then show how the base button width responds correct, but the variant button instances cannot be changed to a different resizing option.
Experiencing the exact same issues with my libraries and components rendering most of them broken/useless now (I filed a bug ticket with Figma already). Also hoping for a fix soon as it does seem like a particularly nasty bug
I have found a temporary fix (that long term might cause more issues) :
select the nested component within the main component that won’t respond to auto-layout overrides anymore (sometimes this means selecting multiple nested instances and performing the steps below)
choose any different auto-layout prop than it currently is and then switch back to what you want it to be by default
you’re effectively creating an override state here within the main component on the nested component that figma can recognize and respond to again.
now your instances auto-layout properties will be able to be overridden again as it worked before
but be careful as you will need to do this trick on both axes (width and height) if you want those to be able to be overridden later and this can create problems with children as sometimes this forces them into different auto-layout modes such as fixed (you can reset/fix those too of course, but these are also then treated as overrides as well … so you just need to be aware that causes problems too potentially)
this also means that your original main components auto-layout props are no longer connected to your nested instances anymore as they have been overridden, which breaks a lot of utility of using nested components in the first place and its pretty time consuming / impossible on very complex large libraries to do this without breaking a lot of stuff.
Update: recorded a video demo of the above method but can’t post it because i’m not trusted enough to post links (support is looking into it, hopefully can post it soon)
I am still having issues. I’m trying to understand if this is related to this bug or not.
any help would be greatly appreciated.
Basically I’m using a “Placeholder” component nested in another component and I want to be able to swap out the placeholder with just about anything else, and have the parent component adapt according to what is inside of it.