<div class="blog-post-update-to-come">⚠️ Heads up! This blog post needs a refresh after everything that was announced at Config 2023. The information in this post is still good, but I am re-writing it to include the latest feature announcements. I've published a separate blog post covering the general changes I need to make to this post and some others. If you'd like to be notified when I publish a new version of this post you can sign up for updates by joining my newsletter.</div>
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!
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. Readers get extra insight behind every post.
