I’m trying to switch a variant of component instance by switching variable mode. This works perfect once the component A is on top level and not nested.
But if I nest component A into component B and then change the variable, the instance of component A still changes the variant as supposed but this also resets all other other properties of comp A to their defaults.
This doesn’t happen when comp A is not nested.
Tried with several components even with the simplest created from scratch.
This topic doesn’t relate to prototypes and interactivity.
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.
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.
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.
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
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)
It looks like an error in the assignment of variables, in my file the text is switched automatically, because its size is embedded in the token, and the token is not connected to propertes, but to numeric values (height, text size, etc.).
Having a related issue with modes and variables, if a nested component is set to a different mode to the parent component then the variable doesn’t change when clicking on interactions (eg. I have a counter that should go up by 1 every time I click a button but the counter stays at 0)
Switching the nested component to ‘auto’ or manually setting it to the same mode fixes this.
Took me ages to figure out what was wrong as I had mass set the mode on a bunch of screens yesterday and didn’t think there would be a connection to the issue.
Hi @Alexey_Kolesnikov, I’ve also had this issue and found the command (CMD+/) “Regenerate all instances” can sometimes help fix disappearing content without having to unlink the variable from the prop.