Instance Swap - Color Styles

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?

1 Like

I made it work this way - Component Properties & Variants Bug - #22 by Pavel_Kiselev

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.

image

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.

1 Like

It doesn’t allow you to use the icon swap on the component level though, you’ll have to jump into the nested icon.