Changing instance via variable resets text (and other properties) when inside component
So, in principle, if an instance is inside of another component, changing the variant causes the text to reset back to the text of the master component.
This also happens with other properties of the instance, e.g. if you set some booleans up they will be reset to how they were set in the master component once the variant is changed via variable.
(So, this issue might be similar (or even basically the same) as discussed here: Change to on instance not keeping text change but frankly I haven’t had the patience to look into OPs setup 😅 I tried to break the issue down to the most bare-bones that I could in the file I provided (also to see if the issue has anything to do with my components or just is a bug)
If anyone has found a workaround do let me know 🙏 (and yes, I do need the instance within another instance; it’s a button inside a form layout that I want to reuse (and many other such cases).
Page 1 / 2
Same problem here, someone know a workaround? thank you
Also running into this issue. I feel like we wouldn’t have to do this if there was a click away / on blur feature for prototypes.
The exact same issue is happening for me. I have scoured forums, and the bugs list to see if I am doing anything wrong. I have also attempted to contact Figma multiple times which has fallen on deaf ears.
I am also using nested component instances and when I change the String and Boolean variables in that instance, the changes not only don’t appear in my prototype. They also eventually disappear from my file all together. I have tried the suggestion to check the “Reset component state” box which hasn’t helped at all.
If anyone has found a work around to this issue please let me know! I’m getting desperate as I have to present my prototype soon and I can’t keep having to go back and redo all of my work!
Thanks so much!
I had the same issue, worked around weeks, and for me, the problem was solved by simply NOT HAVING the text property in the component, and if I needed to edit the text in the instance simply command-click on the text layer to edit it, that way it didn’t reset and all worked just fine
We have the same issue in our design system and it’s causing a lot of annoying frustration.
We narrowed this issue down when a string property is changed with a variable (like iOS and Android). Which I think what OP is seeing here, too. The component resets to it’s defaults when the property is switched with a variable mode, see here:
But when we switch the mode manually, we see everything working as expected
We have had this issue for a couple of months now. There does not seem to be a workaround.
Same here. If I change the variant manually it keeps the texts, but if it changes based on the variable, all texts reset to the value of the default component.
Dear Figma! Please fix this issue ASAP.
I’ve been having this issue for months and am honestly astounded this bug exists, in what appears to be a pretty core functionality. This really needs to be fixed.
(...)
But when we switch the mode manually, we see everything working as expected
We have had this issue for a couple of months now. There does not seem to be a workaround.
This is what drives me absolutely insane! It looks like it’s working in the file but once you start the prototype, it just isn’t 🤯🥲
My only workaround so far has been to either detach the instance from the parent or to get rid of the text property, both of which are quite inconvenient.
Dear Figma team, please fix this issue, as this is a core functionality for building/utilizing a flexible componens in DS. This bug renders the whole concept of assigning variable to the component variant useless, as you’d expect the overrides to stay during the change
Please please please fix this. Absolute killer for making interactive prototypes like booking flows.
Bumping this as I am having the same issue and its very frustrating.
+1, please tackle this Figma!
I completely agree! This is a crucial functionality for maintaining flexibility in a design system. The current behavior makes assigning variables to component variants ineffective, as the overrides should persist when changes occur. Hope this gets fixed soon!
Dear Figma team, please fix this issue, as this is a core functionality for building/utilizing a flexible componens in DS. This bug renders the whole concept of assigning variable to the component variant useless, as you’d expect the overrides to stay during the change
I totally support this! It’s an important part of building flexible components in DS, and having it work as expected would be a huge improvement. Hope to see this fixed soon!
Also adding my +1 as we can do everything the right way, but then once you add a variable to change variants: Poooooof, it’s ‘broken’. The recordings of Johannes speak volumes.
I just built a design system using this feature, allowing quick switching between mobile and desktop variants when switching modes. However, when components reset during mode changes, it renders property-to-variable connections practically useless.
+1 here The text component is dead feature at this point. We need to be able to change the properties od the text component without resetting the text content everywhere.
Seriously can we please fix this??!! This is making my prototype pretty much unuseable and prohibit me from showing designs to users. This is so frustrating!!
Bumping.. +1 Having this issue as well!
+1 - Also, having this issue.
Hey All, thanks for flagging this issue and apologies for the lack of acknowledgement here!
Our engineering team confirmed that this is a longstanding bug that they unfortunately won't be able to fix.
This issue typically happens when you've gotten into a bad data state by:
Unbinding a style on an instance (creating an text style ID override)
The style already had variables or you bound variables to the text data (creating VCM overrides)
Rebinding the original style (creating another text style ID)
The only temporary solution would be resetting your instance overrides and applying the overrides again. Even though the style is the same, this is happening because it’s not properly inheriting from the component because of the override, so you must reset:
Hey All, thanks for flagging this issue and apologies for the lack of acknowledgement here!
Our engineering team confirmed that this is a longstanding bug that they unfortunately won't be able to fix.
This issue typically happens when you've gotten into a bad data state by:
Unbinding a style on an instance (creating an text style ID override)
The style already had variables or you bound variables to the text data (creating VCM overrides)
Rebinding the original style (creating another text style ID)
The only workaround would be resetting your instance overrides and applying the overrides again. Even though the style is the same, this is happening because it’s not properly inheriting from the component because of the override, so you must reset:
I can see how this might be a work around but it breaks the inheritance of the design so here we are back to having to redesign each item and having no way to inherit master changes. We still want the master interaction changes to take place but be able to override some in an instance - this seems a relatively basic need for users who are sold the idea of a design system and component extendability by Figma. I.e. I have notices that text I place in a certain state, reverts back to the master component placeholder text when interacted with - an ongoing bug for a system that is meant to allow this extensibility.
Hey All, thanks for flagging this issue and apologies for the lack of acknowledgement here!
Our engineering team confirmed that this is a longstanding bug that they unfortunately won't be able to fix.
This issue typically happens when you've gotten into a bad data state by:
Unbinding a style on an instance (creating an text style ID override)
The style already had variables or you bound variables to the text data (creating VCM overrides)
Rebinding the original style (creating another text style ID)
The only workaround would be resetting your instance overrides and applying the overrides again. Even though the style is the same, this is happening because it’s not properly inheriting from the component because of the override, so you must reset:
Thank you for this. I was having the same issue as @Johannes_Eckert(link to post) and fixed it with these instructions.
There were some text elements inside my master component which had overridden text styles. This happened because I applied a body text style to them and then added an underline to make them look like a link, causing the text style to be overridden. This meant that every component instance would lose its properties whenever its variant was controlled by a text variable, because the master component had overridden text styles.
I went through each text element in the master component and unlinked the ones which had a the little (1) in brackets after the style name:
Changing the variant with a text variable now works just fine.
I would never have guessed this was causing the issue, so I’m glad this was explained.
Thanks for sharing your fix, @CW2!
Hopefully this will help out all of the others having this same issue in the community. :)
Sadly still broken and suggested fix does not resolve :(
