Instances of main component not respecting color configuration, must be completely reconfigured

Hey Ann! At the moment, I personally don’t have an exact set of steps I can confidently suggest 😞 BUT I asked our support team if they could advise, and they are actually interested in looking at access to your files/library and see if they can reproduce the reconfiguration problem. We’ve been working on some optimization that falls in line with the replacement flow, and this access would be super helpful. 

If you’re able to do that, please lmk (you can reply here or shoot me a PM). Thank you!

Hey ​@Ann_Beaver! Thanks for the detailed description. I can picture your set up, but just to be sure I’ve got it correct, I’ve re-created it here. Can you confirm I’ve replicated the set up you described?

If I’ve got the set up correct, I wanted to ask some clarifying questions:

I went into the icons that already exist and replaced the .svgs

^ Do you mean that you only replaced the SVG path within the main component frame? If so, you probably experienced something like this. Here’s an example where I’m updating the icon artwork for the “book” icon component:

Correct me if I’m misunderstanding!

But if I’ve got it right, I don’t know of a way to preserve the color override without using a plugin :(  I will keep thinking about this and come back with a reply if I think of something, test it out, and see success.

​@Gleb, is there a way that your Master Plugin can be used here?

Alice, you nailed it… should I try that plugin?

​@Ann_Beaver, I tried using the Master Plugin to get around this issue, but couldn't make it work.

I suspect the issue is that there's something on the backend with layer node-IDs causing you to lose your color overrides. If you could somehow transform your existing SVG paths to look like the new ones (potentially adding and removing nodes on the path) then that could work. If a plugin does not exist that can make that kind of transformation, you could try making your own with Figma Make?

If I were you, I would:

1. Get a list of all the “in progress” Figma files that are using icons. Any old work that is no longer being referenced can be left alone.
2. Open a branch in the library where the icon collection lives (if your Figma plan supports branches) and replace all the icon svg paths. Merge that branch back to the main library. If you don’t have the branching feature, just do it in the main library file.
3. Publish the icon changes.
4. Starting working through the files from the list of files from step 1.
5. Once inside a file, use the Find & Replace feature to track down icons with broken overrides. For each icon, “reset all overrides” and then re-configure the color and size properties to what they are supposed to be. Watch out for icons that are nested in components local to that file! Do the resetting there rather than in the mockups.

This is going to be manual, annoying process, but I think it’s the most straightforward one that gives you total control (I don’t always trust plugins to do bulk work like this)!