menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Figma

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

Channels
Team

Swapping an instance does not preserve overide text

January 20, 2020 at 5:50am
The Figma community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Swapping an instance does not preserve overide text

January 20, 2020 at 5:50am
I have multiple cards in a design system. One has an image, one has an icon, another one is plain - all three have a text label and description.
The cards are all structured identically, except for the obvious things missing (like the icon or image in the plain version). The text fields are identically named, and have the same fonts and layout properties.
However, when I swap an instance of a card that has override text content, this content is lost. In fact this is not strictly true - the description text is retained but the label defaults to 'label' (the text in the original component.
Can anyone explain how to make these components retain their content when being swapped out?
Thanks

January 20, 2020 at 6:27am
To make sure we preserve any Text Overrides, you will need to name the affected Text layers something unique. This ensures that we don't replace those overrides with the Text layers of the swapped Component.
like-fill
1

January 20, 2020 at 10:43pm
Thanks but that doesn't help at all. Giving the text fields unique layer names completely breaks the content when swapping instances. Obviously the text fields need to be named the same or how on earth would the app know to retain the override content?
Happy to take a look at an example file if there is something you are able to share.
So why does the official figma help say that then?

February 17, 2020 at 3:30pm
I had a similar issue (if I understood your problem correctly) and probably managed to find the reason. Example:
  1. Create two master components, e.g. GenericButton/Default and GenericButton/Hover, both with text 'Button'. If you make an instance of either, the instance will swap nicely between those master components.
  2. Create and instance of GenericButton/Default, replace the text to, let's say, 'OK'. Hit Create component and rename this new master component to OkButton.
  3. Make instance of OkButton. Try to swap it to GenericButton/Hover. It won't preserve the text 'OK'; instead the text will change to 'Button'. Seems like override preservation is not working... but:
I struggled to understand the reason but finally realized it: The instance of the OkButton need to be edited somehow, e.g. just add a space to the 'OK' text and then remove it. Figma will realize that the instance has been touched (you can notice that the Reset overrides icon on the Properties panel changes to enabled) and now the overrides are taken into account when swapping components.
Edited
I kind of understand that Figma ignores the override preservation if an instance is not flagged for being overridden in the first place. However, it limits the usefulness of component swapping in cases where generic components are created with all states (e.g. default, hover, focus, active etc.) and then specialized components are derived from the 'main' generic component (e.g. default). It would be nice to create all those states only once to the generic components and then utilize those states in the specialized components.
Solution could be somekind of option to swap feature, like 'Swap and preserve text'. Or even better, proper implementation of states to components :)