Bug when switching variable modes in nested components

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.

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

Same issue for my Team.

Same issue here:

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.

Same problem here, someone found a workaround?

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.

My temporary workaround, worked on my case is,

to create another component set with your component nested with the variants you want to manage with variables or modes.

It will preserve the overrides, and dynamic with modes and variables:

Solution:

1. button got size variable with small, medium and large attributes
   

   

2. I am switching them with my layout presets via modes.
   

   

3. When I change the modes for the instance, it resets the overrides (text)
   

   

4. I create a component set, with my components manually set the sizes and and created size variations with same attributes
   

   

5. Used the component instance and applied the variable for that top level component

6. I can preserve the overrides that way and use modes

It adds a level of complexity but can be used as a last resort, temporary, till the bug fixed

This is a major issue, and I still can not get how it is noticed or fixed.
That single bug ruining my well planned project, I am creating custom components with different texts and properties and using them.

Adding a data point to the issue.

It happens to several nested instances within the same component I made, with and without variables. All the remedies require adding a great amount of complexity to the component, or we have to break the nested instances.

Hope the team prioritize the fix of this issue soon.

I encountered an issue while implementing an avatar system for a chat and friends list in a personal project. The system is designed to dynamically update images based on the selected value within nested components.

Initially, I suspected the issue stemmed from using strings for the value, so I switched to numeric inputs. However, the problem persisted, and despite spending two hours troubleshooting, I have yet to identify the root cause or resolve the bug.

Same issue, please fix this figma!

Same issue for us,

• Component A is a basic text field with a text string mode defined.
• Component A is used in Component B.
• Component B is then used in Component C as a swapped nested instance. The string in component A doesn’t maintain it’s value when the modes are switched.

I’m happy to share a Figma file that shows an example; still unacceptable for Figma to not have solved this already as big and complex design systems require this to work in order to leverage the full potential of components and local variables. I hope someone from Figma can give us an update on this issue’s status.

Same issue here.

This is a really critical bug that almost negates the point of variables entirely.

Components with variable properties, when nested inside other components with variable properties, seem to reset their content to default when switching the variable properties of the top-level “parent” component – despite being set up in a way that layers are consistently named and those “child” item variables switch seamlessly if not nested inside another component.

Come on Figma, is there any update on this?

Having the exact same issue.

I have 2 versions of the same button, dark and light mode. The background of those buttons is actually a separate component. If I change the parent to dark mode, the child, nested component within it, does not change mode.