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)

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.).

Good afternoon, can you tell me when the problem will be solved? Many people are waiting for this bug to be fixed

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.

Thank you, it really is faster

I have a component with 2 different nested components (a logo and a currency symbol).

The nested components have 3 variants each. Which variant is shown is determined by a variable mode.

When the parent component is placed on another file, the nested variants disappear till they are clicked on or I use the regenerate.

This occurs whether the parent component is placed directly into a file or if itself is a child component.

The components’ instances in the parent file behave as expected.

Thanks.

I have the same issue, the nested variables for the component variations do not sow when I change them in the instance.

It shows only the “default” variable obtains of the core component variant

I have been having a similar problem.

We have created modes for “tvOS” and “CD”.

We also created a text string to swap components based on mode and applied it to our button component.

The modes swap components and overrides perfectly when in a standalone frame, but breaks down when the same setup is applied to a component.

I also have this issue.

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.

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:

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:

Thanks for your understanding.

Toku

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?

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.

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

Video