Skip to main content

I’ve been designing data tables using components and variants.


My setup is as such: Cell component is nested in a Row component, Row component is nested in a Table Component. Cell component has a text property and 2 variants for mobile/desktop. Row component has 2 variants for mobile/desktop.


When I change the row component to the “desktop” variant, which also switches the Cell component to its “desktop” variant, the text property gets reset by to its default, and I have to key in all the Cell text again.


Is there any way to avoid this?


Thanks!

Hey @Teresa2, this sounds like this could be potentially a bug. We had similar bugs before and looks like the engineers had rolled out fixes for this. But I am not quite sure if this is the same issue, so we can take a closer look at what’s going on here, are you able to provide a screen recording?


Please include the whole window, with the properties and layers panels in view and relevant layers expanded, and select any layers you’re having trouble with so we can check any relevant settings. We use these videos to try and reproduce the issue in our own files and so showing all steps needed to reproduce the behavior is helpful.


If possible can you add support-share@figma.com as an Editor to your file where overrides are being lost and to the library file (this won’t affect your billing at all) and send through a link to a frame where the overrides are being lost?


Thanks in advance!


I have the same problem here, when I change a components variants, text property reverts to default.


How to fix it?


tnks <3


I have also facing the similar problem in Table. The Cell component is nested within the Row component, and the Row component is nested within the Table component. The Cell component includes a text property and offers two variants: Small & Medium. Similarly, the Row component also provides two variants: Small & Medium.


When the Table’s size is changed from small to medium or vice versa, the text in the default state of the Rows and Cells remains unchanged; only the size is updated. However, in the Selected, Hover, or Focus states, all Cells revert to the default state of the Cell’s text property.


Is there any way to fix this.


Thanks!


Hey @Barbara3 & @Meghna1, sorry for the issues! I would appreciate it, if you could provide a screen recording. This will be helpful to flag this internally with the teams and reproduce this on our end.


Please include the whole window, with the properties and layers panels in view and relevant layers expanded, and select any layers you’re having trouble with so we can check any relevant settings. We use these videos to try and reproduce the issue in our own files and so showing all steps needed to reproduce the behavior is helpful.


If possible can you add support-share@figma.com as an Editor to your file where overrides are being lost and to the library file (this won’t affect your billing at all)


Thanks in advance!


@Gayani_S

I have the same issue. I can’t upload a video since i am apparently a new user. Can I email you the video? or something?


Hey @Anuj3 , sorry to hear this is also happening to you. I am working closely with Gayani. Can you please reach out directly to the support by filling out this form: here



Please use your Figma account email, include your video, a link to the file, and add support-share@figma.com as Editor, so they can take a closer look and investigate it. Thank you


I have this issue as well. Can recreate it from scratch with minimal setup using Figma desktop app version 124.5.5. Here’s a video of how to reproduce: Dropbox


Same for me. Wanted to create general icon component using icon font. This general component would have different variants for different sizes, like 24x24, 20x20, 16x16… and user of this component would use instance swap to swap in the desired symbol (which is just a text with unicode character) … problem is, when swapping the instance, it does not use font size from previous instance.


Hi, same here, also while designing a table header with filters.


I have a container component table-column-filter, within which I have a nested component checkbox.


When I change the checkbox component’s label in a table-column-filter’s instance, it displays properly in the workspace, but not in the preview/present tab, where it displays the checkbox’s default label.


HOWEVER, I found a workaround : the changes in the nested component work in the preview ONLY if the nested component is present on the default variant of the container component.


Hi

I’m having the same issue when trying to work with components that should be able to have different text/content on  different instances, but it always reverts to the default text.

It is a bit disappointing to not be able to do something I was used to when working with Adobe XD.

Have made a video, but there no way for me to share here??

Please improve

Thanks,

Bruno


I’m having the same issue. I’ve got multiple text components as my base text state. They are nested in other master components. If I change the nested text component version in one of these master components, say from H2 to H3, all instances of all components gets a hard text reset. It makes the text component a dead feature really, and is prone to some deadly errors while maintaining a design system.


Having this same issue with text properties


Hey everyone, I’d appreciate if you could share a screen recording via Loom or Google drive. This will be helpful to reproduce this on our end. 

Alternatively, you can reach out to the support team via this form and share a file link with them. Please add support-share@figma.com as an Editor to your file (this won’t affect your billing at all). 

Thanks in advance!


Hi all,

I had the same issue but I managed to solve it.

What worked for me (hopefully will work for you too!) is that I had to rename all the instances to match across variants.

In my case, I had a drop-down menu with 4 different entries. I wanted the entries to change color when hovered or clicked. However, their text would also change to “Pending”, since that’s the text from the component.

As mentioned above, only when all elements where named the same (e.g. all texts are called “text”, all icons are called “icon”), then it worked for me, and hovering on “approved” would change the background color without changing the text inside.

Best of luck with you project!


Reply