Solved

Instances not resizing with variable swaps

Forum|Forum|5 years ago
March 12, 2021
18 replies
17735 views

I have created a Component form using multiple variables. You can swap out the different Variables on the form, and the auto-layout will resize and shift things around depending on what variables you’re using. This works perfectly well on the Component itself, but it doesn’t work on the Instances of that Component. It only works if you detach the Instance and use it as a Group instead of an Instance. Here’s a video doing what I’m trying to describe:

Am I doing something wrong here?

dd145beca850ddd1f4570394480d5aff38f5e83e.zip

Ask the community

This topic has been closed for replies.

Best answer by Gleb

This is happening because nested instances keep their size upon swapping. There is no way to avoid this key mechanic. However, there is a workaround: the instance needs to have auto layout enabled with Hug constraints.

Resizing options in the right panel: both axis are set to hug contents for the nested instances

Example file: https://figma.fun/pI2KuG

Unfortunately, if you want to keep this component manually resizable like without auto layout, you would also have to adjust its contents to fill container manually since fill container and hug contents are incompatible with each other. Or you can set it to fixed + fill container by default but then change it manually in nested instances to hug contents.

Show previous replies

Dinko1

The workaround doesn’t work when I try it. Component is in an auto-layout set to hug in both directions, and still the auto-layout frame does NOT resize in the instance.

Gleb

Power Member

The component itself (Avatar) needs to have auto layout set to hug. Not Frame 973.

Dinko1

Figma does not allow me to set hug to the component itself – only fixed width and fill container.

Gleb

Power Member

This needs to be done in the main component, not the instance.

Dinko1

Thank you, that did indeed work!

M

Mikolaj_Glowala

Hello,

I try for long time to make component in Figma with instance swap and force it to elastic sizing dependntly of various nested elements. I try do it in way described by Gleb, but it doesnt work for me.

“Base” component is a frame and has auto-layout and Hug-contents
“Container” component has instance swap (“Base”)
“Blue” component (with hug-contents and auto-layout) I want put to switch and keep its oryginal size.

What I made wrong?