Instance swapped icons don't preserve across variants?

Ask the community
, ,
1

Hi there,

I think I sorta get what’s going on, but it’s complicated, and if anyone can explain the specific issue and how to solve it, it’d be much appreciated.

I have icons in my design library set up in what’s probably an odd way and that’s probably causing problems -

I have a base symbol called Font Awesome Sizing, which is one symbol at 8 different sizes, in different font styles.

Accruent_Design_Library
Accruent_Design_Library1396×536 49.7 KB

I then have a library of specific glyphs our team uses - these are made by with new components, that are solely the FAS one, nested, with specific text instead of the generic smile. These are what we use in 99.99% of cases.

Accruent_Design_Library
Accruent_Design_Library1407×722 54.6 KB

And it works well! Easy to pick icons, sizing, colors inherit fine. all good…Until we get to prototyping where the icons are nested in more complex symbols.

We have a simple icon button here, default state:

Accruent_Design_Library
Accruent_Design_Library1109×347 24.4 KB

I can change icons within the variant, and it works perfectly:

Accruent_Design_Library
Accruent_Design_Library1107×438 30.4 KB

I have a number of variants set up for the button. Hover. Pressed, etc. :

Accruent_Design_Library
Accruent_Design_Library1101×351 24 KB

Here’s where the pain comes in. I -

  1. Create an instance of the icon component.
  2. Change the Icon
  3. then change the variant.

The button will then be in this weird state:

Accruent_Design_Library
Accruent_Design_Library1086×342 23.8 KB

Where the correct icon is selected in the instance swap, but its text layer has been overridden by the default text for that variant. What this means is that using any library components for prototyping, they instantly ‘reset’ to default icons, making it really confusing.

I assume that it has to do with the way I have icons set up, and the Variant override has higher priority to the Icon instance text… but how do I fix it to do what I want?

2

bumping this for the monday crowd, could definitely use a hand here

3

Hi there,

Could you check if the layer structure aligns with these guidelines? From what I can see, everything seems to be working well in the first screenshot, as the layer names match perfectly. I’m not entirely sure about the text layer, but if you could take a look at the criteria in the help center article about swapping instances, it might provide some useful insights.

Change preservation

Figma attempts to preserve your changes when you select a different variant or swap between instances.

Figma uses the following criteria to determine whether to preserve a change on an instance:

  • The layer names of the current instance and the variant or instance you’re selecting must match. This applies both when swapping instances and selecting variants.
  • When selecting variants, Figma also checks if the layer properties you’ve changed originally matched between variants. If so, Figma will preserve your changes.

The criteria is less strict for preserving text changes. Figma keeps any changes you’ve made to text layers if the name of the text layer is the same between components. Figma will also check if the text layer’s hierarchy is similar.

For more information:

If you think this could be a bug, please submit a bug report detailing the steps that led to this issue? You can do so by following the link:

Thanks,
Toku

4

Thanks for taking a look - I’ve looked it over and I don’t see a mismatch in layer naming, all icons are set up exactly the same. I’ll keep looking for something like that, but in the meantime I have sent in a support ticket and am working through with them. Any pointers would be great, but will return with a fix if/when we get one.