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