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?

Issue 1: you aren't using auto layout on the icon 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.

This GIF demonstrates the problem:

But watch this... as soon as I add auto layout to the icon variants' frames, everything works as expected:

This one of the reasons why I advocate for folks to make liberal use of auto layout on all their components. You get more out of the feature (and are less likely to run into auto layout wrinkles) when you use auto layout everywhere.

Issue 2: differing component API (i.e. the variant properties aren't exact matches)

If auto layout isn't your issue, it might be your properties. Here's an example where <span class="figma-component">Flame</span> and <span class="figma-component">User</span> both share a "size" property that matches perfectly between the two... and yet, when I switch from "small" to "large" on the flame icon, and then swap to the user icon, the size reverts back to "small." Watch:

It doesn't matter that I got the "size" property matching. <span class="figma-component">User</span> has an extra variant property called "status badge", and that's what's throwing things off. Figma needs all the variant properties to match in order to preserve variant changes across component swaps.

So what's the fix?

Tactically speaking, the solution here is to not use a variant property for showing and hiding the status badge. Instead, I should have used a component property. And because Figma treats component properties differently from variant properties, my "size" selections will be respected between component swaps.

I duplicated <span class="figma-component">User</span> and made <span class="figma-component">User 2</span> to demonstrate this new set up using a component boolean prop in place of the original variant property:

But there's another problem here...

Yes, yes, the size property issue was solved, but <span class="figma-component">User</span> and <span class="figma-component">User 2</span> being lumped in with icons like <span class="figma-component">Flame</span> is not appropriate.

This issue deserves to be its own blog post, but for now I will say this: your icon components should be as simple as possible. No interactivity. No status badges. No directionality property (looking at you, "arrow", and "chevron").

Instead, nest your simple icon components inside of other components with those interactive and various status properties.

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

Maybe not!

You may be better off using something like number variables and modes. I talk about navigating a decision like this in this other blog post. Here's a link that will jump you straight to the section about using variables for size.

For now let's say you're interested in having "small", "medium", and "large" modes. What would implementing that look like for icons?

In the example of the icons above, I would set up a semantic-level variable collection named "Size."

Real quick, 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 Size 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 "medium", 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. Other elements could make use of t-shirt sizing, and respond to a mode change from a far away parent layer. Take a button label's for example. Maybe the font size and surrounding padding change between a button in "small" mode vs "large" mode. Variables give you 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 if you're building fast, you're open to the risk of sloppy naming:
sloppy naming for a "Size" property across components

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

  • Current version
    • Included a new section addressing differing component APIs being the source of "size" property settings reverting when swapping from one icon to another. Thank you to community forum user Sebas_Mejia for posting this thread revealing the problem, and Yehia for providing the solution-marked reply! Originally this blog post only addressed the issue for size properties not working being due to a lack of auto layout on each icons' variant frames.
    • The GIFs used in this post have also been updated. They use nicer looking components for demonstrations, and show the left and right panels of Figma's UI. 
    • I made some grammatical improvements, and shortened a few sentences for clarity. I also linked to other relevant blog posts.
  • May 1, 2024
    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