I made a component for a drawer that opens and closes to show a list below it. I made an instance where a nav uses multiple of this component with different text for each drawer. When I set up my prototype, the “change to” keeps swapping the text to what it is in the parent component rather than what I changed the text to within the instance.
I already tried swapping the text within the instances (like toggling the open/close and changing the text manually) but it doesn’t work. It keeps switching the text to the parent component text instead.
Curious if anyone else ran into this issue and could help
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!
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.
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!
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.
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:
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!
@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!
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.
I really appreciate you sharing the links. However, it seems that the access is not set to “Anyone with the link,” so our community may not have the opportunity to examine it closely.
For your reference: Share files and prototypes
We understand that this file is important to you. If you prefer to privately share this file for assistance, please reach out directly to our support team using this link: https://help.figma.com/hc/en-us/requests/new
Make sure to use your Figma account email, include a link to the file, and add [support-share@Figma.com] as an editor on the file (please rest assured, this will not affect your billing in any way).
This will allow them to take a closer look and assist you further.
Hello @Thomas_Reimer, Thank you for updating the sharing settings of the file. I copied the design file to my draft and checked the prototype for the [PT_Card Button (Ibu morning)] instance.
It seems that the prototype interaction has two “Set variable” actions triggered by “On click”, but it doesn’t mention “Ibu/morning” in the action. I believe you might be referring to the Instance menu and component properties.
The instance menu “Swap Instance” allows you to find component replacements.
I confirmed on my side that if I choose the main component that doesn’t have the string variable “Ibu/morning” on its text layer, it will disappear after the swap.
You can learn more about it here: Swap components and instances
On the other hand, the string variable “Ibu/morning” is already attached to the [val] text layer nested in the [PT_Card Button (Ibu morning)] instance.
I tested on my end, even I change the properties to edit the instance, the variable will remain attached until detached.
More details can be found here: Edit instances with component properties
I hope the information above is helpful. Please let me know if I missed any additional points. We also welcome any insights or suggestions from our community!
For clarification: The “PT_Card Button” is workaround to avoid mentioned problem. Here I have stacked several instances into a frame and just show/hide them with a boolean.
My problem is displayed in the upper right part of the pink section.
The noon tile is a normal Card Button instance with prop “warning?” attached to a boolean. The val layer is attached to the text variable noon with value “1”. And the warning val layer is attached to the noon-initial text variable with value “1”. Now, when you click on that noon tile, the num pad opens as overlay. You change the value in there to “0” and click on “Save”, what should happen is that the Noon Card Button updates its text variable for the value to “0” and due to the discrepancy in noon-initial and the new value, it is swapped to “warning?=true”. Despite having the noon text variable attached to the val layer, it will now show a standard Card Button with default values and no text variables attached. And that is my problem. It makes the text variable and boolean prop swap handling completely useless as I cannot dynamically adjust my designed elements in a prototype. That is very frustrating.
Hi there, Thank you so much for clarifying! I totally understand your frustration. I’ll do my best to assist your situation.
I’ve reviewed your prototype and it seems that when you click “Save,” the variable [Ibu/noon] is set to [input val]. It might be helpful to verify if the variable [input val] is intended to store the updated number displayed on the num pad (e.g.,“0”) .
I tested on my end by creating a mockup. I set variable [#CatNumber] (attached on the Text layer nested in the [CatButton] instance) to [#total] (attached on the Text layer where the calculator window number is stored) for the “Save” layers click interaction.
Here are some articles might help you:
I hope the information above was helpful. Now, it’s time to involve our whole community. Please feel free to join in!
Please remember to use your Figma account email, provide a link to the file, and add support-share@figma.com as an editor on the file (rest assured, this will not impact your billing). It would be beneficial to inform our support team about the specific interactions and prototypes facing issues. This will enable them to investigate more closely and offer you further assistance.
