Component Properties & Variants Bug

I don’t believe there is going to be a fix :wink: This even does not seem like a problem, it is a trade-off between complexity and flexibility we got. The solution seems logical, especially if we consider how many different variations we could make, I am afraid there is no silver bullet. And, in my view, it perfectly ralates to “…layers of nested instances and variants referencing other nested instances of variants…” I admit it is a complex one, at the same time Figma managed to get somewhat a good balance anyway.

Hi, I’ve been following this thread and while I don’t fully comprehend what’s been going on with variants and overrides, I also experience weird behaviors that I believe are related (and fairly new, linked to the May update).

I have a set of two components for two chips. Text overrides carry fine from one to the other with Instance swap. But when I create a Parent component (Variant) that uses the two components, text overrides are not preserved when switching from one to the other using the properties.

If I combine my original chips into a single Variant, everything works fine. I believe that wasn’t the case before, it was possible to use either components or variants and have text overrides carry (usually the ones that always work).

See here for a demo file.

2 Likes

@Antoine, rename the nested badge instance so that the names match in all variants.

1 Like

Oh wow, thanks, did not think of that!

It worked like a charm

My team does something very similar. We basically have a vector mask layer used to apply the color, then we nest the changeable icon at the bottom of the layer stack. Before component properties, my designers would have to dig into the layers select the icon then replace it. Now that we have component properties this can be done in the properties panel and we use the selected color for the icon color.

Using this method we use Color Icon for all components or anytime we may need to preserve an icon color in any of our designs.

1 Like

It was fixed before, but now it has the same problem.

[SOLUTION]
Hi, :grin:
I was able to fix the problem by keeping all the icons with the same name.

Ex: Vector

As the image below:

Screen Shot 2022-07-07 at 18.42.03

1 Like

Works like magic. This is a life saver.

1 Like

How is it possible to name all your icons with the same name. Do you mean change the layer name only in the variant? I am very confused! I make all my icons black and colour as necessary. If I make an instance in a variant when I swap the icon it reverts to black. All I want to know is how to fix it – but running through these replies is making my head spin. For now I am going to just have to keep overriding the icon colour in situ. Life’s too short.

Yes, icon instances in your variants must have the same name across a component. Additionaly icon child layers (vectors) must all have the same name (in the master).

1 Like

Thanks Antoine. I did try renaming the layer name in the component with a generic ‘icon’ name but it still doesn’t work when swapping instances, the colour still defaults. I will have to do a few more trials! Do you mean by ‘icon child layers (vectors) must all have the same name (in the master).’ that the component master name can be unique but the child layers need to be generic, either say ‘icon’ or ‘vector’?

It’ll be clearer with examples:

Here my icons are all flattened and the vectors (not the parent frame, which bears the icon’s name) all have the same name (here, “vector”):

image

In my badge component, icon instances have the same name (the parent frame), here “Icon”:

Hope this helps

3 Likes

Thanks so much for taking the time to explain visually Antoine! That’s what I guessed you explained in words.

The matching layer naming has worked for me before in the past, but now even that isn’t working. I’ve meticulously triple checked layer names for all button masters, variants, instances etc. and even tested new ones. No go!

Temp solution that works is using a color for the icons set not used anywhere else, as mentioned further up by @Pavel_Kiselev and @Renaud_Demylle + matching layer naming.

Only then do icon colors change with the button variant assigned (because even then default/enabled button colors are considered overrides).

Kinda sucks because icon set visually doesn’t fit with color system. This glitch is still a major issue.

2 Likes

Following. Began converting our variants to properties and hit this major roadblock. I really do hope there will be a fix soon.

Like previously mentioned, the issue is not with the icon instance at the very top layer but within another component variant that is embedded few more layers deep.

I can’t get it why there is no solution. I found a few more open cases with the same problem. I wrote an email to support, they made me explain every single step I make and record a video. It’s been a while and still no answer… There is no way they don’t know about that. At least give a feedback.

1 Like

I cross post a comment I posted under a different post about the same bug, in the hopes it can help some of you:

A few things i noticed while trying to get it to work (because, yes, it’s still not fixed despite what figma support is telling us).

  • Make sure all the components you want to use to instance swap have the exact same layer structure (eg if you have a button with an icon component where you want to switch the icon, each icon must have the same layer structure and therefor the same amount of layers)
  • Make sure the layer that recieves the color override has the same name across all the swapped instances so for example i name the last layer of every icon component i create “vector”
  • Make sure you dont mix color styles with “custom” color values. E.g. if your button has a default and a hover state dont give the default state icon a named color style and the hover state icon a hex value, either both must use a hex value or both must use a named color style

hope this helps and someone can save the countless hours i wasted trying getting it to work :sweat_smile:

I noted it on this twitter thread and I’m hoping some internal forwarding will get it prioritized!

1 Like

And still the bug is here. This is sick. :sob: Instead of a single icon instance a big construction has to be made in order to bypass the bug, when Figma just would have to fix the colors just as they were set in variants. No getting back to initial values, period. :unamused:

1 Like