Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

Figma

Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!

Figma / Help

Instance replacement not keeping text

Instance replacement not keeping text

Figma/Help · March 16, 2018 at 2:31pm

Instance replacement not keeping text

Figma / Help · March 16, 2018 at 2:31pm
Hi there. I've been noticing some inconsistency in the instance replacement, most specifically when the case is a 'best match' one. I think some explanation on the various circunstances it occurs might take too long, but to sum this up, whenever (or at least most of the times) I replace a instance made out of the exact same objects, it replaces the edited text to the default one I've set in the component root. I'll attach a video so you can see better what I'm saying. Sorry to do it the lazy way, but recording it and putting on Youtube was just the quickiest way. Here it goes:
https://www.youtube.com/watch?v=BnH8OonI5Vw

Does anyone have a clue why it behaves like that?
Figma weird instance
https://www.youtube.com/watch?v=BnH8OonI5Vw

March 16, 2018 at 2:51pm

I just noticed this: the two tabs are instances of a component. If I keep then grouped and change them, they'll keep the text. If I turn them instances into a component (see: a component made of two instances), then what I described happens. Why not keeping the text no matter if it is a group or a component?

  • reply
  • like

I am running into the same. We have built our library with base components that every instance is just a 'css' change of the original. So we can replace instances and keep text throughout multiple pages but if we group/frame in any of the components in a project we lose the text when we change the instance. There is one of the main reasons we choose Figma but it is not serving the need as is.

like-fill
1
  • reply
  • like

hi @j-stagge exactly!! You put it better than me. You defined it good: it was supposed to work like a css change. It happens to all my menus and stuff. With all this going, it ends not being not such the time saver we expected. I hope they can fix this.

  • reply
  • like

To ensure text persistence after an Instance swap the Text Layers on the two Components should have the same name.

like-fill
3
  • reply
  • like

(Gif attached)

  • reply
  • like

@mirko-santangelo,

That is exactly how mine are set up besides I only use the text 'value' to make sure the connections are not broken by text changes

  • reply
  • like

@j-stagge Can you share a sample of your symbols architecture? I tried the same on nested instances as well and it's text is still working for me.

  • reply
  • like

Hi @mirko-santangelo here you have mine so you can check out:

https://www.figma.com/file/CEZK8OI0GhytewFThV6Xdu0d/instance-txt-changes

you can see that both default and selected states on the menu have the same text origin. So when you go in the "changed setup" instance you can change one of the items for the selected state, and then the text will vanish and not be kept.

  • reply
  • like

@mirko-santangelo I don't get the part you said the components should have the same name. If they have the same name, only one is shown in the dropdown replacement options, you see? I have to set it up with another name, however I'm using the same layer structure, changing basically only colors.

  • reply
  • like

it was happening to me too. Just see @mirko-santangelo tip and it worked for me

I didn't know about that. And it is a bit tricky, because Figma automatically rename the text layer to it's content when you create, so must rename the layer manually to be able to keep text content

This, after already have created a lot of components, certainly is a time consumer (at least)

  • reply
  • like

@fabio-leal thanks man! I added a comment on your file!

Meanwhile here the example: https://www.figma.com/file/Dd4y8beXgAn61rth1E93hyDA/Untitled?node-id=1%3A2

  • reply
  • like

I still believe this only occurs when you change an instance within other instance

  • reply
  • like

@fabio-leal From the example I sent you, nested instances works as well. It's a matter of naming layers correctly

  • reply
  • like

Also would you mind trying to give those text layers an unique name? Apparently there's a group on your component that has the same name as the text layer.

  • reply
  • like

The issue I have is not being able to build pages as components. See example here. The switch of instance works 100% until it is placed within another component.

like-fill
1
  • reply
  • like

Hi @mirko-santangelo thank you for the support. Unfortunately as far as I got your advice, it didn't work at all. I've typed in some additional info and more explanation in the same file. You and others can see: https://www.figma.com/file/CEZK8OI0GhytewFThV6Xdu0d/instance-txt-changes

  • reply
  • like

LOL thank you guys Mirko and Justin, I think we are on the same page now hehe

like-fill
1
  • reply
  • like

yeah apparently there's a bug! lol

like-fill
1
  • reply
  • like

looping in @neversitdull

like-fill
1
  • reply
  • like
like-fill
1
  • reply
  • like

Btw great work Justin and Fabio! That's what can be called Collaborative Problem solving :D

like-fill
2
  • reply
  • like

Thanks guys! I was watching it all happen and was good to see I am not doing it wrong but rather a bug. I have done a lot of research and glad I am not the only one with issues with it

like-fill
2
  • reply
  • like
Your message here...

*bold*_italic_`code````codeblock```