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!

1 Like

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

@Bernhard_Gorlitz, I think this got fixed!! I was tested it out again today and had success :partying_face: a nested Button with a “size” property does affect! Look:

button affects size

@Figma_Support if y’all are able to confirm this has been officially fixed that’d be fantastic :pray:

Still doesn’t work on my side.

1 Like

How to bump up a thread ?
Having this feature would immensely help avoiding doing ‘Detach Instance’.

1 Like

I’m surprise seeing to working in the demo your showed.
I tried the same setup (I think so) and it doesn’t work on my side.
Is it possible to share your demo ?

Hey All,

As @AlicePackard mentioned, this is a known limitation where swapping or changing the state on nested instances does not change the instance size. Our engineers are working on long term fix for this, but as it would impact the behavior of existing autolayout frames, it will likely be some time before this improvement is added.

For now, if you add auto layout to each state of your set and assign the correct constraints you should be able to swap and see your frames correctly resize. Where elements are stacked on top of one another (eg. the states with images) you’ll need to apply Absolute position to the element sitting on top as explained in Explore auto layout properties.

1 Like

@dvaliao So how does absolute position factor in here? I have an identical situation as the people above when trying to make cards with image variants with specific aspect ratios.

So far I have tried absolute position and instance swapping and it doesn’t seem like a solution or work around exists, aside from just not building a parent/container component that needs to be resized by a variant.

Hi guys,
we found out it works if the height of the button is “hug” instead of “fixed”. So we changed our way of working a bit.
Cheers!

3 Likes

Thanks for replying! I restarted my testing from scratch and realized that my nested variant had a hidden frame using absolute position in it and it consequently was effecting my parent component layout.

Works the way I need it now!

1 Like

Indeed, the HUG property does helped me sorting this issue as a workaround.

1 Like

Perfect, thanks!