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?
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.
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.
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:
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:
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!
