Colors with component variation

If you select the particular instance, you should see the hover action in the prototype panel. Delete the hover action on that instance.

I’d like to keep the hover effect, but I believe it’s not really possible.

If the background was a shape (a rectangle), then it would be possible for the color of that background to change and keep another rectangle on top that would give the hover effect (#FFF 20%).

However, this breaks the auto-layout. =(

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.

Hey there.

I’ve recently searched about this feature.
here was my answer to one of the requests:

These are the links of requests. Please contribute to these threads if you found them helpful 😃

Thanks everyone for the replies.

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:

No worries, happy to help! You can check the checkbox under a reply to mark it as the solution to your topic.

Are your layers named and nested the same way in both variants ?

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.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.