Component are not showing by using Modes and Variables

Hello! We recreated our Component Library with Modes and Variables. Unfortunately when I wanna use my components in working file (Libraries are added to File) some components aren’t appearing by switching the modes. It seems to have issues with nested components and changing properties with modes when a component variant is “reloaded/lazy loaded”. Works only fine for the first mode. It’s a massive issue now since we aren’t able to work properly.

First I thought it has to do with hidden component (we are using _parts oftentimes) but even after publishing the part component it doesn’t work.

Are there anybody with the same issue and a solution? Seems like a bug for me

Edit: I detached the breakpoint property and set it manually on “basic” now it’s showing. So I assume it has to do with the property variable

Edit2: It works with the browser bar. the difference: theres no nested component

1 Like

Hi @Denise_Hagenow, Thanks for reaching out and sharing those screenshots with us!
I’m checking internally to see if there are related reports, but without seeing the actual file, it’s a bit challenging for us.

If possible, could you please share a video recording of the issue switching the modes?
Make sure to include the whole window, with the properties and layers panels in view, and expand the relevant layer and select any layers you’re having trouble with, that would be super helpful for us to check any relevant settings.

Additionally, could you please share screenshots of the related variants you’re using for changing modes and those applied to the nested instance?

We use these videos and screenshots to try and reproduce the issue in our own files, so showing all the steps needed to reproduce the behavior is very helpful.

Hope to hear from you soon! If there’s anything I misunderstood, please let me know.
Also, if anyone in our community has any insights or suggestions, feel free to jump in!

Thanks for your support here!

1 Like

Hello @Junko3 thanks for responding quickly. I reported this as a bug via the contact form as well and since I was asked to share the files, I invited support-share@figma.com to our libraries and the example working file. Do you have access to that? Otherwise I could do a screen recording.

Hi @Denise_Hagenow, Thank you for submitting a ticket regarding this issue! I’ve located your ticket (#980935) in our system.

We truly appreciate you sharing the files with support-share@figma.com. If you could kindly double-check to make sure they’ve been added as an Editor. No need to worry, it won’t affect your billing in any way.

I also noticed that the direct links to the related files seems not included in your ticket. Could you please send those direct links through the ticket? This would enable our support team to take a more detailed look!

Moreover, it would be really helpful if you could share a video recording of the issue as you switch modes within the ticket.
This will assist our support team in reproducing the issue and investigating the cause.

Thank you so much for your assistance!

Hello @Junko3 I shared the files and recordings via E-Mail with support@figma.com

1 Like

Hi. Is there any solution here? I’ve been encountering exactly the same problem where my component instances have missing/hidden layers. The missing layers are usually a property binded to a variable. Like @Denise_Hagenow , it only appears once I detach that property from a variable or I switch modes. Most of the time, when I reload my page, the layers disappear again. :woman_shrugging: Hoping for a response. Thanks!

1 Like

Hi @Patricia_Ibasco, Thank you for bringing this to our attention!

In order to better support you, we would like to see details of the affected files. Therefore, I have gone ahead and created a support ticket on your behalf. The ticket number assigned is #1073162. Please respond directly to the ticket with the requested information.

Thank you for your understanding and cooperation in this matter!

I have encountered the same issue while investigating on another related to variable binding.

See demo file (the nested property issue is described at the end)

In another prod file that I can’t share with much more complex structure this goes as far as locking the content and not allowing to override a nested text layer.

This is now three different bugs I have found with bound variables. Such a mess.

Hi there! Thanks for getting in touch. It’s really great that you sent that file our way – we appreciate it.

I’ve gone ahead and shared your case with our team internally, and it looks like what you’re experiencing might be tied to a bug we’re already looking into.

I totally get that this can be frustrating, and sorry for any inconvenience this has caused you.
While we can’t offer an immediate fix right now, but our engineering team knows about the issue and will work on finding a solution in the future.

Your understanding and patience in the meantime mean a lot to us.

2 Likes

Hi, I’m having the same issue. Any updates on this?

Thank you so much for getting in touch.
As of now, there aren’t any updates to pass along, but I really appreciate your understanding!

Following. Our team is experiencing the same issue : elements are not displayed in a template when switching between variables modes when our component is called first and our user-segment variable modified second.

PS : It seems to be mostly the first mode that is buggy (out of three user-segments) in our file and don’t display the header component inside the template that is bound to multiple modes also.

1 Like

Hello, I have the same problem. Is there any solution?