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: 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.

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

7 Likes

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

1 Like

@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?

Lieng

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

2 Likes

hacked the “fill” issue I was having with this auto layout suggestion. Much appreciated!

Thanks for sharing this! @Gleb this does not seem to work for me :confused: anything wrong?

The answer is right above:

image

As I said, the instance needs to be set to hug contents.

1 Like

Bummer it’s really unfortunate that keeping original (fixed size) dimensions of an instance seems impossible to solve. There are actually situations where we want to swap in a nested instance, that needs to have a specific size, so we can’t use hug or fill.

It would be great if there were “real” slots in Figma components, where you can control the size of the nested instance and allow it to keep original dimensions. However, it seems super improbable that Figma would be adding something like this…

So for us, the only way is to work with local content components that swap into placeholders. Which is a bit annoying if you just want to customize a footer with let’s say (fixed width) button and an icon.

I think, in general local components with custom contents are a great way to keep components in tact. Just difficult to explain to designers who do not want to invest time to understand slightly more complex structures.

It is possible: just set the instance contents to whatever fixed size you need (no auto layout necessary), the instance itself that is set to hug contents will wrap around the size you defined. But if you want to dynamically resize something inside of instances, vote here: Fully Editable Component Instances

1 Like

Thanks a lot, I voted :slightly_smiling_face: