You've built a component with some sort of "size" property that lets you scale it up and down to pre-set sizes. You took an instance of this component and nested it inside another component that's using auto-layout. But when you click through the layer tree and select the instance with the "size" property and try and select a different variant, nothing changes!
To troubleshoot, you might've gone back to check up on the original component. You made sure the variants all have the correct names and they are indeed the sizes you want the component to offer... everything looked fine. You might've even peeled off a copy directly from the main component to try switching between "size" variants on the canvas, and it worked perfectly!
So what gives? Why doesn't the "size" property work when you nest it inside another component?
It's not a bug, it's just that you didn't use auto layout on the variants' frames. In order for a child frame to affect the size of a parent frame that is using auto layout, both the parent and child frames must have auto layout applied. The solution to the scenario I described above is to go back and add auto layout to each of the variants that have the "size" property with the resizing rules set to hug in both directions.
My team recently experienced this problem with our icon components. All our icon components were set up as vector shapes inside regular frames, with two options for different size variants. We wanted to handle size with a variant property because we only allow our icons to exist at certain sizes in our design system. But these variants didn't have auto-layout set up at first, so when we switched the size variant nested in another component (like a button), it didn't appear to have resized at all. When we switched from a 16x16 icon to a 24x24 icon, the overrall size of the button was not affected (as we initially expected it to, because the button used auto layout and was set to hug on all sides). This GIF demonstrates the problem:
As soon as we added auto layout to the variants' frames, our problem was solved!
This one of the reasons why I advocate for folks to make liberal use of auto layout in their component libraries.
If you're interested in poking around the example file I used to make those GIFs, you can grab a free copy from the Figma community and duplicate it to your drafts to play with!
In summary: if a nested component isn't resizing how you'd expect, investigate your auto layout settings for that component and its parent frame!
Probably not.
You're better off using something like number variables. I talk about this more in this other blog post. Here's a link that will jump you straight to the section about using variables for size.
In the example of the icons above, I would set up a semantic-level variable collection named "Spacing". If you don't know what I mean by "semantic-level", you should read my other blog post about 3 levels of variable collections.
The "Spacing" collection would have a group in it named "Icons", and in that group I'd make two number variables:
Then I would set up a mode for each size that I need. My default mode would be named "Small", and the second mode would be "Large", etc.
From there, instead of setting a nested instance's size using a variant property, I could set the mode on that nested layer. Or even a parent layer further upstream!
There's two reasons why this is better than using variant properties:
If you'd like to be notified of when I publish a new blog post, joining my newsletter is a great way to keep up. My readers enjoy bonus behind-the-scenes insights on every post!
