Bug: Components instances with variant properties bound to variables not rendering correctly

Howdy, I’ve been running into an issue/bug where components that have variant properties which are bound to a variable with multiple modes are not rendering correctly on load or after edits. This seems to happen most often with instances of components that have multiple levels of nested components. It’s a pretty specific use case, but I happen to run into it frequently.

You can see this here.

Upon opening the design file, often the instance nested components fail to render properly. (in this example, the numbers in the colored boxes in the instance section often do not appear until you select them).

Also, if you change the color of the text in the “content” component, it fails to update correctly in all of the instances below.

I’ve been able to reproduce this on a couple of different design files and with several of my teammates.

2 Likes

Hey @Adam_Bursey, thank you for reaching out!

Thank you for providing a file link, I’ve duplicated the file and tested this on my end but I wasn’t able to experience the issue you’ve mentioned " the numbers in the colored boxes in the instance section often do not appear until you select them". I might have missed a step. Are you able to send a screen recording so I can see what you’re experiencing on your end.

Thanks for your help!

Sure thing! Here’s a screen recording.

I believe I’ve ran into the same bug, I have made a topic which may help showcase the issue.

This is a hard one to describe, so bear with me.

For clarity, I’m having multiple bugs with scaling, components, and variables (light and dark mode) and do currently have another open topic on another scaling instance bug.

Here however, I’ve encountered a bug that seems to happen with ‘frames’ not updating until clicking on them. These frames are typically (but not always) a scaled instance that consists of a variable somewhere within them.

I have attached two videos to highlight the issue - the first video being that the scaled instance does not scale the shadow style correctly until clicking on a deeper nested instance within that scaled instance (confusing, I know).

In the first video I show multiple scaled instances where their master components consists of inner nested instances of other components. The master components use a drop shadow style where the shadow colour uses a variable to switch colour to a darker shade on dark mode. Note in the video, the shadow style is linked but not scaled - I click on the instance, then I click on a nested instance within, voila, the drop shadow updates/scales and you can see in the right panel the style is ‘broken’ (which showing that it’s scaled correctly).

HOWEVER, fixing the bug causes another bug, as note in the video that when the dark phones get their shadow correctly updated, the dark shadows within the frame (see the bottom navbar) disappear - this does NOT happen for the light frames…

Here is another video showing the dark mode icon not being displayed untill interacted with (I toggle inner frame to light, then back to dark).

Every time I open Figma, something relating to dark mode or scaling is broken. From my use, on next Figma open it may correct itself, it may not, there is no consistency and I shouldn’t have to manually sweep through 100’s of frames to update each one which may or may not break something else.

1 Like

Here’s another video, would be nice for someone to get in touch - I’ve even sent a bug report and am yet to hear anything… It appears I am not only the only one encountering this.

Hey @Adam_Bursey, thank you so much for taking your time to share a screen recording and explaining this issue in detail!
Also @Lee_Hayward, I’ve merged your post with this one, because your bug looks very similar to this one.

I am going to create separate support tickets for each of you. This looks definitely like a potential bug and our technical quality team can investigate this further.

I’ve just created separate support tickets.

Your ticket numbers are:

#1088705 @Adam_Bursey

#1088711 @Lee_Hayward

Our support team usually takes up to 24 hours to reply back to emails - tends to be quicker than that in normal circumstances. However, please be aware that we are facing increased contact volume so there might be a delay.

Please let me know if there is anything else I can help with.

Appreciate your patience in the meantime!

Thanks @Gayani_S

I’m already in contact with support, so might be worth checking there isn’t duplicate tickets. Also, I have another bug which may be linked to this issue.

Hey @Lee_Hayward, apologies! My duplicate ticket got closed out but support has processed your initial ticket and it looks like the technical quality team is going to take a look at the other bug as well.
Hope this get solved asap. Let me know if there is anything else I can help with.

1 Like

Hello here,

@Adam_Bursey Did you find a solution? I have the same issue on my side, instances have their variables updated only by selecting their contents…

Thanks

Hi all,
Same problem here. It’s very frustrating. Fixing using the “Regenerate instances” command only works for a while…

Hi! we have de same problem, Do you know when it could be solved?

Hello, I am experiencing the same problem. The layout of instances appears broken, but when I double-click, it refreshes and seems to display correctly.

Is there a workaround for this bug?

Thank you, and I look forward to your response.