Bug with "fill container" not filling container is getting worse

@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

I’m having this issue as well, as are other members of my team.

This topic was automatically closed after 30 days. New replies are no longer allowed.