Get in touch.

Nevermind
Thanks for reaching out! I'll be in touch soon.
Close
Yikes! Looks like the form is busted. Check back later, or try getting in touch with me on twitter
Close
Close

This is probably why your Figma variant's "size" property isn't working

Alice threw this one into the void on
December 27, 2021

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:

GIF demonstrating how the "size" property works as expected on the canvas, but not when adjusted on an instance inside a component using auto layout

As soon as we added auto layout to the variants' frames, our problem was solved!

After adding auto layout to the variants, the "size" property works as expected while nested in other components

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!

Interested in more?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.