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.
Yes! I explored this set up compared to icon-wrapper method, and using number variables and modes. If you want to read more about all the things I thought through, you can check out this post.
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!
I use my own natural, human intelligence to ideate, write, and edit my blog and newsletter.
