I have a few icons, each icon has a black and a white version.
I want to place the icon component in a button, so that when I press the button, it the icon turns from black to white. Simple task so far, but now I wanna use that button component many times but with different icons in each one, and they each turn to their white version when clicked.
How do I create these icon components for this to work, each icon with it’s variant? or all icons in a single component with 2 properties? And then how do I change the default icon in the button component while making it work as intended? (Currently it changes to the default white icon, not the white version of the new icon)
Hello! Here’s how I do this. First, for the icon components, I don’t create variants for all the colors. Instead, I have the button apply the desired color for each button state. But to get this to work, I use the following two tricks.
Ensure that all icons that might be placed in the button have the same structure. Specifically, the layers that inherit new colors must have the same names.
IMPORTANT: Make sure that the color applied to the icons in the button (e.g., black and white in your example) does not match the color applied to the icons in the icon components. For example, use red as the color in the icon components.
The first trick is logical. Figma otherwise would not know what layers should be colored by the button state. But the second trick feels like a hack to get around a figma bug. Apparently, if the color of the icon in one of the button states matches the original icon color, then figma does not bother to change the color when returning back to that state. Maybe this is the chosen behavior due to another use case, but feels like a bug to me.