Colors with component variation

[Gabriel_Itokazu]

Good evening (depending on when you are reading),

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.

Does anyone know how to bypass this?

[Richard_Doyle]

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

[Gabriel_Itokazu]

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. =(

[Avokadomos]

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.

[Armin_Rouhanian]

Hey there.

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

Request: Number & Color properties for components

Hey there. That would be totally great. However, its usage can be tricky. I think we need to define the problem first. creating a “theme” for the whole page would be great. but at last, we need to show all variants to the client/programmer in one package. so, all the states of a component like buttons should be visible as one component (like primary, secondary or enable, hover, etc). changing selection colors would also do the same trick to make different types of buttons. and also would take …

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

Request: Number & Color properties for components

It would be great to add a new “Number” type of property to components, that allows to control dimensions, opacity,… And a color property, that allows to easily change the color of elements inside of the components. When you select the component instance, changing a color using “Selection colors” affects all nested elements carrying that color. A property would allow granular control of specific elements in the instance.

Give Colors their own Properties & Variants

I’d like to be able to set one color as the default hover of another color. This would make component library building far less tedious. I could just build the light mode styling once and then swap to the dark or primary styling without having to also build them.

[Gabriel_Itokazu]

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.

[Avokadomos]

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.

[Gabriel_Itokazu]

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:

Figma

[Avokadomos]

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

[StLa1]

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

[Gabriel_Itokazu]

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.