I constantly am puzzled why an object isn’t filling a container when set to do so, and then remember that it’s a bug: resizing the object and then resetting it to “fill” fixes the problem.
I used to see this problem only when switching the layout direction of an auto-layout from vertical to horizontal, or vice versa; but now I’m seeing it when choose a new component variant of an instance. For whatever reason, double-clicking the offending layer usually resolves it in the latter case.
I experience this multiple times a day, and each time it’s time consuming to figure out what’s going on and get everything right again. Also, I worry that I have a bunch of misbehaving auto-layouts that I’m not even aware of.
@JosephxBrick im having the same issue, and everyone else, but I dunno why no one is talking about it.
Auto layout is acting super weird and wrong, things are overflowing after a while and you need to enter that shape and click a few times in order to reset.
Widths and heights are reseting to 0, fill changes to fixed.
I CAN’T BELIEVE THERE’S NO ONE FIXING OR TALKING ABOU THIS!
Worse, it happens on component instance updates after publishing library changes. I’m forever finding screwed up instances. I may write a script that finds all instances that are set to fill, change them to fixed and then back to fill again.
It’s impossible not to encounter it when using auto-layout, so I’m certain the Figma folks are aware of it.
Here’s a bit of code that fixes fill-container items that aren’t filling the container. Basically, it finds each item with fill-container and sets it to fill-container again.
I’ve tested it a bunch and it’s caused no harm (and it fixes the problem), and you can always undo after running the plugin to revert any changes.
You will need to install the plugin “Scripter” to run the code
If you run it with nothing selected, it will examine all items on the page; otherwise, it only examines all items in the selection.
// open the console to see progress: Plugins > Development > Open Console when in the Figma client
let nodes = [] as any[];
let fillUpdateCount = 0;
if (figma.currentPage.selection.length === 0){
console.log("Finding all nodes...");
nodes = figma.currentPage.findAll();
} else {
console.log("Finding all nodes in selection...");
const selections = figma.currentPage.selection as any[];
for (const selection of selections){
if ('FRAME|GROUP|INSTANCE|COMPONENT|COMPONENT_SET'.includes(selection.type)){
nodes = [...nodes, ...selection.findAll()];
}
}
}
for (const node of nodes) {
if (node.layoutGrow === 1) {
node.layoutGrow = 1;
if (node.parent.type !== 'PAGE' ){
if (node.parent.layoutMode === undefined){
console.log(`ERROR: layoutMode of parent node "${node.parent.name}" of node "${node.name}" is undefined`)
} else {
console.log(`${node.parent.layoutMode.toLowerCase()} fill updated on node "${node.name}"`);
}
fillUpdateCount++
}
}
if (node.layoutAlign === 'STRETCH'){
node.layoutAlign = 'STRETCH';
if (node.parent.type !== 'PAGE' ){
console.log(`${node.parent.layoutMode === 'VERTICAL' ? 'horizontal' : 'vertical'} fill updated on node "${node.name}"`);
fillUpdateCount++
}
}
}
print(`Done. Nodes examined: ${nodes.length}. Fill layouts updated: ${fillUpdateCount}.`);
It can take several seconds to run. A page with 110,000 fill layouts (horizontal + vertical) took around 45 seconds. Status is output to the Console.
I have this problem too, and checking with my team, the double click solution only works locally, and doesn’t resolve the issue to other team members viewing/editing the fil
Figma should look into this ASAP
