Figma Support Forum

Instances not resizing with variable swaps

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?

1 Like

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 contents constraints.
Resizing options in the right panel: both axis are set to hug contents for the nested instance.

Here is an example:

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.

Frame inside of Auto Layout instance set to Fill container resizing setting on both axis


Much appreciated, this issues gave me some hard time :pray:

@Gleb How are you doing? I try this solve this issue but still can’t get it to work. What can cause it not to work?


Make sure every component you are swapping is wrapped in Auto Layout with Hug Contents. It’s easy to miss some.