Bug when switching variable modes in nested components

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.