Hi All,
I am using instance swap for some components, But I am facing the problem where the swapped instance does not inherit the color of the component, instead it is using the original color of the master component.
Can anybody share some workaround for this problem?
I was able to get it to work just now by outlining strokes, merging them, and then flattening them all to one vector layer, and then naming that one layer “Icon” (or whatever") Figma will try and carry over the same color (whether a fill or an outline) to any layers with the same name.
I had a mixture of flattened icons as well as lineart “stroke” icons, so I made copies of all of the lineart ones and archived them in case I need them later, and then flattened everything, made them ALL have a fill (rather than some having a fill, and some having a stroke color) and then names the vector layer “Icon”
That works perfectly, and I also believe I solved many of our export to dev errors as well, since sometimes icons that are strokes just don’t carry over well to iOS or Android without causing issues with the lines and points.
I’ve been using a method that is linked in this file:
The base idea is to create a container that holds a merged instance of the icon component.
The union is where the color is defined on the container component. That way, regardless of the layer structure of the icon, it will inherit the color changes because of the union.
This method will only work on icons with a single color. I’ve run into some issues with the boolean operators that create weird visual effects, but usually redrawing the icon solves the issue.
It doesn’t allow you to use the icon swap on the component level though, you’ll have to jump into the nested icon.
Came here to post my solution to this, but it’s the same as Pavel’s: make sure all of the layers you’ll want to apply instance swaps to have color overrides on them.
Our placeholder icon was already the same color we wanted in our default states, so we didn’t override it. It seems like Figma looks for the override when swapping back to the default state, and if there isn’t one it doesn’t know what to do so it just preserves the last color override that was applied.
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 