Bug when switching variable modes in nested components

[Lisa_Morellini]

I’m also having this issue.
I have a ‘wireframe’ layout for a component, and then a more detailed ‘mockup’ version with text and images within it. The goal is that I can wireframe a layout, and quickly, when needed, swap to a mockup.
Using a boolean variable seems to work for a few components, but then after applying it to a few components and testing, eventually I start getting blank components, making it appear as if it’s just disappeared when I change the mode of a block.
Then, as I scroll around my file, the others I previously swapped fine, start to disappear as well.
It feels to me like it’s an issue with loading/memory usage.

[YSluimer]

We have somewhat the same issue. We’ve setup the component with a viewport token to determine which variant it should use. We then input the correct into the instance and drag it to the mobile frame. As soon as it’s dragged into the mobile frame it resets all the content to the base content of the component.

The result:

[y_toku]

Probably our support team needs investigate with your file access. Could you submit a bug report detailing the steps that led to this issue? You can do so by following the link:

Submit a bug report

Thanks for your understanding.
Toku

[Sean_Cooley]

Having the same issue. Have to run “Regenerate All Instances (Slow)” on a regular basis to get nested variants to show again after changing a variable mode. We are using it to manage brands and switching the logos and icons used. The instances dissapear on a regular basis when changing the mode.

I’ll have to document this for my team, but definitely not the behavior I would expect. Seems like a bug to me. Is the team aware?

[Sean_Cooley]

Found a fun tidbit hidden in the prototyping section of variables:

A nested instance does not transfer overrides if its variant is changed due to an attached variable changing values.

So you can’t apply overrides to anything you plan on switching with variables. I had to end up baking the overrides as variants of the component itself.

It seems odd that Figma buried this info, and that the default behavior of variables is very different from manually changing a variant instance.

Use variables in prototypes

[bogdanovjn]

Same problem with deeply nested instances when switching modes, but without any variables.

Video

[Fred_Tinsel]

Hello.
Same here, and it’s really annoying in a design system used by others designers…
Off course, they are complaining!

Edit —
I tried to use Text string and Numbers as variables… the same reset happens.

[Lee_Hayward]

I’m having same issue of icons with variables assigned disappearing on theme switch.

[Dario1]

Same issue for my Team.

[Sanny]

Same issue here:

Major nested component bug

I have several components in my library that share the same problem. When I change properties on an instance of the component, sometimes it resetts the text. Then I undo, and change the same property again, and now the text isn’t resetted anymore. Since it only occurs randomly, and after undoing it works properly, it looks like a bug to me. But maybe someone elese had the same problem?

Figma’s reply:

This is a known limitation of variants nested in other variants. I’ve gone ahead and added your details to the report so they can continue tracking impact.

I’m also going to forward this to our product development team for review. While we can’t guarantee implementation, please know that your feedback is highly valued and will be taken into consideration for future updates. You can check out our Releases to stay up to date on all of our major product news.

What’s the purpose of component-based design systems if the components fail to work?
I think debugging this one needs to be the main focus for the Figma dev team. Who cares about AI, new UI, and Figma slides releases if the core of your main product is buggy?
Sorry, just a little bit fed up with this one.

[Marino_Panariello1]

Same problem here, someone found a workaround?

[AntoineP]

Hi, I have a similar issue:

• I create nested overrides inside a variant set
• I bind this variant set’s property to a variable that has modes matching the property’s value
• When switching modes on an instance of my component, nested overrides carry over
• But when inserting that instance inside another component, and switching modes on an instance of that other component, overrides on the (double) nested instance are reset

Everything is explained in this Draft

It track with the behavior quoted by @Sean_Cooley above, but really shouldn’t.

Yet another example of heavy limitations to the variable feature, that doesn’t pair well with other features such as variants and overrides. Another reason why variables should never have moved out of beta.