Bug when switching variable modes in nested components

Hey @vernikr, sorry to hear this is happening!

It’s hard to be sure exactly why this is occurring without seeing your file.

Are you able to share a link, so that we here in the community can take a closer look?

I’m also having this issue, here are the steps I’ve found that reproduce the issue:

1. Create a component with a text layer
2. (Optional - doesn’t affect the outcome) Assign the text layer value to a text property
3. Create 2 variants for the component (e.g. Device: Mobile & Desktop)
4. Create a variable collection with 2 modes (e.g. Mobile & Desktop)
5. Create a string variable device that matches the 2 variant names (e.g. Mobile & Desktop)
6. Nest an instance of the component in another component
7. Override the nested component string
8. Connect the nested component variant property to the file variable “device”
9. Create 2 sections, each with the mobile or desktop mode assigned
10. Drag an instance of the parent component between the sections and you’ll see the string is reset when the mode changes to the non-default mode.

Hope this helps fix the bug!

This has been a general issue with nesting and variables. it simply doesnt work. I have size variables attached to my icons (they change size based on breakpoints). I nest them like so: icon > navigation item > navigation drawer.
Changing the variables on the icon size does not update the instances inside navigation drawer. Reassigning the icon size on the navigation item ALSO does not update inside ethe navigation drawer. This is a massively distruptive breaking factor in the entire workflow.

Hi. I am having the same issue.

The icon in the button is a nested component, using an instance of components from another Figma library (Brand A and Brand B icons). This nested component has two variants, one for each “brand.”

When used in the Button component, a string variable is assigned to the icon’s property so it can dynamically switch between variants when a variable mode is selected.

I can share my Figma if it helps. Thank you.

The issue I am having is when I switch the variable mode, the icon disappears.

Figma file: click here

Hi EZ, I’m having the exact same issue… the Brand B icon disappears when swapping brand modes.

Hopefully, this gets more traction as it’s a huge benefit to allow designers to easily swap icons from Brand A to Brand B in our UI Kit component.

Hi there,

Thanks for flagging this issue. I shared this issue with our internal team. I can’t guarantee if this issue will be fixed soon, but I will get back to you if there is anything that can share with you.

Thanks,
Toku

Similar problem. We have platforms in variables and a dark theme. With multiple levels of nesting, the components disappear when we switch the theme. I found a temporary solution, if you remove the link in the child component, then when you duplicate the component (which did not disable the link) everything starts working. And at the same time in other child components when double clicking everything appears. I attach a video instruction as I was able to temporarily cure the bug. After updating the file, I have to repeat the actions.

P.S. The bug often occurs when all components are in file A, and working with layouts in file B

Thanks for the additional information! I also shared your recording internally. Really appreciate it.

Hello 🙂 same/similar problem!
Our table should offer different row heights. Depending on the row height, the buttons, inputs etc. inserted in a single cell should also be displayed in different heights (Default, Small or Large). I wanted to solve this with modes instead of a separate variant per cell per row height. This means, for example, that I control the size of the embedded input field via a string variable per mode. However, if I now change the instance of this via Mode, the other properties of the embedded input field are reset. This is of course not the desired behaviour.

Edit: Another annoying thing: when the embedded element in the cell is switched to a bigger/smaller variant the cell resizing which is set to “filled” will be overwritten to “fixed” instead…

See screen recording on YouTube (Forum says 8MB is the maximum, Mac says the recording is 5MB but yeah… xD it’s on YouTube now)