Variants in nested components do not change size

Hi.

for a long time, we used a so called “Content” component, which contains a Headline, Text and a button.

The button itself is also a single component, in 3 different sizes.

With the latest Figma update, the height of the button it not changing anymore, if I change the button variant to “large” or “small” (if I use the nested “Content” component). The button itself works fine.

Right side: Component with Button component
Left side: Detached component (it works here).
Top: Content with “default” button
Button: Content with “small” button.

Any idea if this is a bug or a (new) feature?

Thanks!

Sorry! I mixed left and right :wink:

Correct version is:
Left side: Component with Button component
Right side: Detached component (it works here).

Hey Bernhard, I was just emailing Figma’s support team about this after having submitted a bug report for the same issue.

In my case, I was using a nested variant called “minimum width bar” (a simple frame with auto layout, two variants, each a different width, and named after those widths) which I intended to nest inside of other variants. Just like you described, whenever I adjusted the nested instance of my “minimum width bar” while it was inside another instance, I wouldn’t see any change. But when I made the same adjustments to an instance of “minimum width bar” on the canvas or inside a regular auto layout frame it worked perfectly.

The response I got back from Conor from the support team was:

Unfortunately this a long standing feature limitation. Instances using auto-layout can not yet respond when you swap between instances of a nested instance.

Our Engineering and Product teams are aware of this and it is something we want to tackle, however it’s tricky as it would need to be in such a way that old files/designs are not impacted. We’re trying to figure out the best way forward but as of now I can’t share a concrete ETA unfortunately.

I’m going to experiment with component swapping or some other method for my particular use case, but for your button I imagine you’ll want to keep your “size” property… this is a tough one. It’s a bit repetitive, but you could create a “button size” property to the “Content” component? A quick example to illustrate:

2 Likes

Thanks for your reply Alice!

Well, thats annoying somehow.
Its impossible now (without workaround), to create components with (for instance) a button in different sizes… :frowning:

1 Like