I’m having a problem with component variations in Figma. The point is this: I have a button (component) with the “hover” variation, and the behavior is prototyped in the parent component itself, i.e. “hover → changes state”, the problem is that if I want to change the button color on a component instance, the “hover” reverts to the component’s original color.
Components don’t have color properties unfortunately, so you can’t change the color of variants in an instance. You’ll have to create variants for every color that you need, or make the colored element into a component and instance swap it in the button.
Considering that you want to change the fill of the component (in this case, the button), it is really not possible, as the property is not maintained in the variations of the instance. I think it is possible to infer that there is no plausible solution to the problem. I’ve been exploring some features of Figma and some threads here on the forum, and it really seems like a complicated problem.
As I said, if anyone is reading this thread and wants a possible solution, you can use a rectangle as a background, but that breaks the auto-layout. Hopefully a simple solution to this problem will emerge in the future, considering that the only thing that would need to be done is to keep the fill color in the instance variations.
Using a rectangle as the background and setting it to absolute position, and apply left and right and top and bottom constraints, will make it act as a fill background without disturbing the auto layout.
I hadn’t thought to use absolute position. It’s actually a great solution and it works, the problem is that with absolute position I couldn’t make the rectangle follow the component’s width/height, do you know if it’s possible?
Edit: I forgot to change the constraints, now it works. For people in the future who are looking for a solution, this one works. Thanks @Avokadomos.
Here is the project where I tested it, in case anyone has the same problem:
Yes, to work using the rectangle as a background, the component must have the same structure and name. But if you are going to use the fill color, it’s no use, the change doesn’t propagate to the variations of the instance.