Hello folks! I’m using Figma for a long time, but haven’t seen this issue yet.
I created a set of components for vector icons. The structure of each component:
{icon name} => “Vector” (see video)
When I use an instance of some icon, I can’t change the color of this instance. But if I detach the instance, the color is changing well. Other components that I created work well. I tried to copy icons, detach them and create new components - the result is the same
What’s the problem? I don’t have any ideas why it doesn’t override. Tried both Figma and Figma Beta.
Okay, folks, I fixed the issue. Anyway, would be glad to hear why it was happening.
So, the layer inside of the icon frame called “Vector” was flattened, but to fix the problem, I needed to flatten it once again. It starts to work well only after the second flattening.
Thanks for this! Following your steps helped fix the issue for about 50% of my troubled icons. I continued messing around to find a solution for the others. For anyone else who comes here in search of guidance:
As noted above, doing flatten a second time works. Doing it a third time created the problem again. Doing it a fourth time fixed the problem. (And so on.) So: don’t flatten multiple times in a row to “make sure it sticks”.
For the remaining icons, I needed to enter the vector editing mode, click on the closed vector areas, change those fills to be some other color, and change those fills back to the color I wanted (default black). That seemed to cause recalculations to fix the issue. Repeat for each icon giving you trouble.
“For the remaining icons, I needed to enter the vector editing mode, click on the closed vector areas, change those fills to be some other color, and change those fills back to the color I wanted (default black). That seemed to cause recalculations to fix the issue. Repeat for each icon giving you trouble.” - Thanks for the tip, this really solves the problem
Ug! Same issue. I have a vector based icon library and I noticed this is only an issue for me when I use icons custom built vs icons pulled in from a third party library (Material Icons). Clearly something they have that the custom icons don’t.
Same problem here, impossible to override colors from a vector logo I created directly in Figma, unless detatching all components instances… This is totally killing the purpose of working on Figma. I’m very tired of fighting this bug. How can so many months of hopeless workarounds pass without even an answer from Figma about this…?
Following your steps helped fix the issue for about 50% of my troubled icons. I continued messing around to find a solution for the others. For anyone else who comes here in search of guidance:
