Skip to main content
Question

Component Properties & Variants Bug


Show first post
This topic has been closed for comments

88 replies

Renaud_Demylle

Hey everyone. I’m not experiencing the issue but I might have an idea on the reason why it’s problematic for you (I was triggered by the solution proposed by @Pavel_Kiselev).

My setup :

  1. Icons have a default color in my library (black)
  2. Components using icons always override the initial icon color (We are never using black icons).
  3. I don’t have any issue with instance swapping.

I tried to recreate the issue you have with a button component containing a label+icon.
Default state icon color → I removed the color override
Pressed state → I leave the white color override

I then drop a button with default state in my canvas, switch icons instance. Icon stays black.
I change the state of the button to pressed → Icon goes white.
I switch back to default state → Icon stays white (not ok).

I also tried with different color override and it doesn’t break so I believe I can conclude that the issue occurs only when you don’t override your icon color.


Tanvir_Ahassan_UX_Designer1

It worked the way you explained. Thanks, man. I was getting crazy about this bug.


Edwin_Bradford

Yes that is correct, it is about color changes in a variant not being reproduced in an instance. I don’t have time to follow up with Figma at the moment but I hope to shortly. Based on Figma’s responses to date I believe they either misunderstand the issue or think they’ve fixed it when they haven’t. If you create your icons with one flattened layer that is always the same name you won’t hit the issue. I had to downgrade our icons to work around it.


Pavel_Kiselev

I don’t think that it has to be flat though. They only way Figma applies overrides is by a name. I believe you can have a vector union which is fully editable, it would outcome a single layer with regular fill and stroke colours. Give it a name and you are golden. Consistent naming is what drives overrides, there is no magic behind the hood


Edwin_Bradford

@Pavel_Kiselev I suggest you try it if you have time. I spent half a day testing various configurations and the only thing that worked was icons with a single layer. Feel free to prove me wrong but my results were 100% reproducible. I can’t confirm if the single layer has to be the same name in all icons.


Pavel_Kiselev

@Edwin_Bradford this is my setup

Figma – 19 Jun 22

I added few icons, all multi layers, made with both unions and subtracts, on top level all vectors have the same name, colour is set with fill

Quick demo


Edwin_Bradford

Your demo appears to work perfectly and will probably work with my icons which use strokes and fills but sorry I’m lost… what is the difference between the button-01 and button-02 components? One works and one doesn’t, exactly as you describe but I’ve been through every layer and I can’t find any differences between them so I’m completely confused. I believe you’re applying a color override somewhere but I can’t find where although I’m rushing in between other tasks at the moment.


Pavel_Kiselev

Yea, it works just fine, see my previous comment for details - Component Properties & Variants Bug - #22 by Pavel_Kiselev

I fixed the issue by forcing colour override on my icons. Literally, I choose an icon and set its colour to something else and then set it back to the value I need. So now there is an override and everything works as expected


Edwin_Bradford

Thanks… I managed to reproduce your results exactly as you described. That explains why I couldn’t see any difference between your components.

So I believe the issue is a bug, claimed fixed (above), not fixed. Also reported to @Figma_Support on Twitter and apparently misunderstood as from what I can see it has no relation to “…layers of nested instances and variants referencing other nested instances of variants…”.


Pavel_Kiselev

I don’t believe there is going to be a fix 😉 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.


Antoine
  • 144 replies
  • June 23, 2022

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.


tank666
  • 4835 replies
  • June 23, 2022

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


Antoine
  • 144 replies
  • June 23, 2022

Oh wow, thanks, did not think of that!


Louis_Dauvergne

It worked like a charm


Christian_Baptiste1

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.


Joy
  • 16 replies
  • June 28, 2022

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


Daniela_Reis

[SOLUTION]
Hi, 😁
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


Mingxuan_Li

Works like magic. This is a life saver.


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.


Antoine
  • 144 replies
  • July 27, 2022

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).


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’?


Antoine
  • 144 replies
  • July 27, 2022

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


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


Dominic
  • New Participant
  • 40 replies
  • August 16, 2022

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.


j.au
  • 7 replies
  • August 17, 2022

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.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings