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?
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.
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.
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.
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.
@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.
hacked the “fill” issue I was having with this auto layout suggestion. Much appreciated!
The answer is right above:
As I said, the instance needs to be set to hug contents.
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
Thanks a lot, I voted 🙂
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.
The component itself (Avatar) needs to have auto layout set to hug. Not Frame 973.
This needs to be done in the main component, not the instance.
Thank you, that did indeed work!
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.
What I made wrong?
link to file - https://www.figma.com/file/O72J7O5cKXOb7P593O9hdv/powielanie?node-id=18%3A26&t=WAUiz5OGlMDyyjF4-1
Just a quick note, I have found out that even the component you’re swapping to needs to be wrapped in auto layout, otherwise it doesn’t work.
That helped. Appreciated.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
