Bug when switching variable modes in nested components

Ask the community
, , ,
1

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.

10 Likes
3

Hey @Roman61, 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?

6

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!

3 Likes
7

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.

4 Likes
9

Hi. I am having the same issue.

image

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.

2 Likes
10

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

Figma file: click here

image
image1080×744 56.5 KB

2 Likes
11

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.

2 Likes
13

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

2 Likes
14

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

1 Like
15

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

1 Like
16

Hello :slight_smile: 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)

1 Like
17

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

18

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

2 Likes
19

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.

20

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.

1 Like
21

Thank you, it really is faster

22

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.

1 Like
23

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

24

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.

25

I also have this issue.