Preserve overrides in instances swapped inside component

Hi folks! I’ve seen the posts regarding text overrides with nested interactive components but I’m seeing a similar issue with non-interactive components as well.

In the example below, I’ve set my text layers to all use the same layer name and have the same hierarchy structure but if I swap one of the nested components it resets everything. Everything works perfectly if each atom component is used individually and not nested in another component though so I’m left :thinking:. Any thoughts?

4 Likes

This is expected behavior. Figma doesn’t preserve overrides this way. I’m working on the improvements for my plugin Master which would allow you to do that in the future. I’m wondering why are you using text styles as components instead of, you know, text styles?

@Gleb we’re using text components so that there is a much more user friendly format for our team to work with text without needing to know which utility to use. On a maintainer level we are still applying text styles but are working to remove this layer of abstraction from our team in order to simplify their experience within Figma.

Since this is expected behavior it would be great to see this type of override carryover in the future. Having the capability in the future for nested components to preserve overrides would not only be great but would help us to make more powerful components.

1 Like

Thanks for the detailed explanation, that makes sense!

Chiming on this as something I would also very much like to see! I have started running into this often, as I have am finding nesting components within my variants helps cut down on edits. (I create a core component that I then create instances of to build a variant. This helps if I ever update the layout or a core element of the design, I can just update the core component and it applies to all the variants instead of needing to update each variant.)

Might be worth adding this as a post under Product Ideas as well. :thinking:

3 Likes

Will do @cupps ! I’m glad another person resonates with this.

2 Likes

I recently released an update to Master plugin that would allow you to do that now when you swap components with it! Here is a small demo:

Try it out and let me know if you have any questions.

I also renamed this topic for clarity and moved this topic to #product-feedback so anyone can vote for this feature to be implemented natively.


@cupps I think that Figma has fixed this!

ack no nevermind i wasn’t showing the same instance. apologies for the jump start excitement.

2 Likes

Can someone explain why this is “expected” behavior? It’s very common for me to use a variant of a button (or any UI control) in a component. And after I have created a bunch of instances of that component (and overridden their content), I go back to the master and change the button to another variant, which causes all the overrides to reset. :frowning:

Is this not a common use case for everybody?

Thanks, -Ode

13 Likes

I don’t know if this answer the question or solve something. But i also had som issues with variations of a checkbox that doesn’t keep the override if i for example change state from default to selected.

I experimented a bit and noticed that when i changed all the names of the label text layer to “Label” instead of them having unique layer names i noticed that the override works when i change between variants.

Skärmavbild 2022-02-08 kl. 16.53.55

1 Like

I’m having this issue as well trying to build out an accordion with interactive components. All my naming in the list overrides go away when the interactive component toggles states. Too bad kinda of a deal breaker for interactive components for me for most use cases.

Having this issue even with layer names being 100% the same.

4 Likes

Amazing trick!!! I wonder does this work in other contexts, not just text…

I’m glad u like it!
Might work :slight_smile: I only tested this with text elements. This is currently my go to setup for labels or other text layers in components that i want to keep between different variations. Like keeping the label name while switching between a radiobutton component, text input or checkbox component, as long as you use the same layer name the override follows.

1 Like

I got curious and tested it. I noticed that this even works for like a rectangle with an image. The overrides follows if the same principle of naming layers identical between components is applied :slight_smile:

1 Like

1 Like

I am experiencing this same issue atm… I would love it if there was a better way how to control/prevent text overrides

Hello Figma community - has there been a fix for this issue? I’m running into this problem and it overrides all my text and it’s driving me crazyy!

We are having a similar issue.
Here are the steps to reproduce this ( please see photos )

  • base component with 2 variants, a text property for the label is defined

  • parent 1 has an instance of base component

  • parent 2 has 2 instances of parent 1

  • change the text of the 2 instances in parent 2

  • change the variant of one of the instances in parent 2, the text override is maintained.

  • change the variant of Parent 1

  • the text override in the Parent 2 instances is reset if you change the Parent 1 instance’s variant, but sometimes it does not.
    Mostly the instance’s text override value is preserverd, but sometimes the value of the text override is reset.
    It seems to affect the first child of Parent 2 but never the second in this case.

  • this is happening for instance swap components as well, the context is a row made up of cells which have variants that define their width. When changing the cell width, the text override on the component inside the cell is being reset.