I was recently building a component that had a horizontal resizing rule of “fill container” and ran into some strange behavior as I peeled off instances from the main component. These observations are nothing more than that; just interesting quirks of auto-layout that I wanted to share with the community and hopefully the good folks at Figma! Here’s what I’ve observed when working with a variant that has an auto-layout horizontal resizing rule of “fill container”
- Instances will respect their original “fill container” setting when placed inside another frame set to fixed width Good! Things are working as I’d expect.
- Instances dropped onto the canvas (no containing frame) are forced to become “fixed width.” Also good! This is logical. Because the object has no bounds to fill on the “infinite” canvas, it is impossible to have a setting of “fill container” in any direction.
- ^ Continuing off of point 2… this is what I’d consider a forced override. It’s not one I’ve made as a user, but one Figma must make because… logic. When I right-click on the instance, I am not presented with a “reset all overrides” option. Yes! This makes sense. I haven’t made any overrides, so even if that option were available to click, nothing would happen. OPPORTUNITY FOR BETTER UX: Figma does nothing at all to explain what’s going on. If I hadn’t slowed down to consider why a fill-container variant is suddenly set to fixed-width when that’s not what I instructed it to do, I might be really confused. I think having some way to know when a “forced override” has occurred would be helpful here.
- This is where things got weird (in my opinion). If I wrap an instance that was placed on the canvas in an auto-layout frame set to either “hug” or “fixed width”, I would’ve expected it to behave like instances did in point 1. But they don’t! they remain “fixed width”
- ^ Continuing off of point 4… what’s worse is I expected to be able to reset overrides thinking that Figma thought my putting the instance in an auto-layout frame is like me opting-in to that “forced override” and accepting it as one I’m making as a user. But no! The “reset all overrides” option is still not available. To get back to a “pure” instance, I have to make some sort of manual adjustment, like stretch the instance, change a color on something…etc. and then I have the “reset all overrides” option.
None of this breaks my workflow or prevents me from building things, but it the experience felt a bit wonky. Again, it all makes logical sense (mostly), but I also think there’s opportunities here for the tool to give me, the user, more feedback and better understand the logic of auto-layout without having to run little experiments. Though, I’ll probably always run little experiments, it’s something I love doing and how I like to learn but some folks don’t! They want a tool that just works and communicates information well, not puzzles to solve.
I’ve recorded a narrated screencast to demonstrate the points above, but having troubles uploading it (I’m going to keep trying; check back for edits)