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

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!

But should you even have a "size" variant property in the first place?

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:

  • <span class="inline-code">width</span>
  • <span class="inline-code">height</span>

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:

  1. I will likely want other elements to also respond to that mode change: like the button label's font size, or padding. I could get the same granular control, all without 2x or 4x-ing the size of the variant set (which eats up file memory).
  2. Guaranteed consistent naming. The collection name and modes only have to be set once. But with variant properties, they have to be named on every single component. This isn't a huge deal, but it can get pretty sloppy:
sloppy naming for a "Size" property across components

<h2 id="change-log">Change log</h2>

  • Current version
    With the release of variables, variant properties aren't as strong an option for managing different sizes a component might need. I added a section at the end of the post explaining this.
  • December 27, 2021
    First publication