Change to on instance not keeping text change

Hi @Sarah80, Thanks for reaching out about prototypes!

I appreciate sharing details so much! Could you please share a quick video recording of the issue you encounter and a copy of your file, if it possible? This will help us to better visualize the issue and see if we’re able to reproduce the same behavior to gain insight.

Thank you so much for your help! Looking forward to hearing from you soon!

Thanks,

Hi @Sarah80, After giving it another look, I believe I might understand what you’re aiming for.

To kick things off, an instance is essentially a reusable copy of the main component, and it stays linked to that main component. This link might be the reason your prototype keeps swapping the text to match the parent component.
For more detailed information, you can check out: Guide to components in Figma

Now, if your goal is to change the text for each instance of a component, one potential solution could be creating string variables and applying them to each drawer. You can then utilize the “Set variable” action in a prototype interaction.

I quickly put together a prototype using variables. It might not perfectly align with your desired outcome, but I hope it provides some insight.

Learn more about using variables in prototypes here: Use variables in prototypes

Hope this helps! Feel free to let us know if I’ve missed any crucial points.
Additionally, if anyone in our community has suggestions or ideas, we’d love to hear from you here. Please feel free to jump in!

Thanks,

Hey @Junko3,

I appreciate the suggestion about assigning text variables to the content of the instance. What I am facing might be similar to Sarah’s issue but with the variables attached.

I have buttons with an assigned text variable on the main value in the center. This variable, however, is removed, when swapping to another style of that instance. In this case, I am trying to swap to the warning?=true property and keep the text variable assigned to the value text. However, it swaps to the components’ variant default and completely ignories assigned variables. Why is that?

Component build
Please note that all layers are equally named to ensure smooth takeover of values between them.

After swap

Before swap

Thank you all for the responses! I unfortunately no longer have access to the file i was working on but will be saving this solution for the next time i run into this issue.

Hi @Sarah80, thank you for your warm words! Our community is here and ready to assist you anytime!

Hello @Thomas_Reimer, Thanks a lot for reaching out!
From the screenshot you shared, this issue might be related to variant properties within the component set.
I ran some tests on my end, and it seems that if a string variable is linked to a text layer in both variants, matching the properties before and after the swap, the string variable stays attached just like the variant.

Could you please check the corresponding variant for the properties after swapping from the component set? See if the text layer on the variant has a string variable attached.

These articles might be helpful in your situation:

• Create and use variants
• Creating and organizing Variants
• Explore component properties

I hope you find some insights from the information above! Please let us know if I’m missing any additional points.
Also, if anyone from our community has suggestions or insights, please feel free to jump in!

Thanks,

@Junko3, maybe I was not clear enough as I could only attach 3 screenshots at that time (newbie here).

So my component set is as simple as possible. I have no defined text property or similar (only for the top label) so I can attach variables later to the respective numbers and layers within and also use it to swap the instance properties back and forth.

In the first screenshot you can see, that I have to base styles - default and warning. And they have 3 states each - idle, pressed and disabled. Now, the number 1 in the center need to be associated within the prototype itself, not here in the component set.

The before and after swap screenshots show the respective button in use. There I have linked the number in the center to the text variable. When I switch to its warning state, however, the text variable is not linked to the number anymore. From my understanding, variables should be persistent, as long as each variant uses the same structure.

On a sidenote: What I also noticed is a buggy behavior when you manually switch the property “warning?” between true and false, the button keeps most of its changes, like name changes to the instance. When I do the same with boolean variable, it completey exchanges the button with a new instance. Is that supposed to be like this? The main component is called “Card Button”. Within another component, I used several of those as can be seen in the screenshots and renamed them to their respective slots “Morgens”, etc. So when I manually toggle the warning state on/off, the name is persistent. When I attach a boolean variable instead, the name changes to “Card Button” and even the label, such as “Mittags” swaps to the default as defined in the component set, in this case “Morgens”.

Hello @Thomas_Reimer, Thank you for taking the time to provide us with the details!

If I understand correctly, the issue you’re facing is that the string variable “Ibu/morning” becomes detached from the instance after swap. Am I understanding correctly?
Also, as you informed us, if the instance centre “1” = “Ibu/morning” is associated with a prototype rather than a component, that prototype might need to use a string variable to update or stay attached its text content.

You can find more information on how to use variables in prototypes here: Use variables in prototypes
I hope it provides some insight!

To better understand the issue you’re describing, would it be possible for you to share the design file here? It would also be very helpful if you could create a brief video demonstrating the issue. That way help our community to take a closer look at your prototype and provide more accurate assistance.

Hope to here from you soon! If anyone has any insight about this, please feel free to jump in!

Hi @Junko3,

that is correct. The variable is detached from the instance after being swapped to its warning state. However, if you change it back to its first instance variant, it is OK.

Link to simplified prototype

Link to design file (view only)