Skip to main content

Hello, I want to use a component variant to create a category filter system. The variant contains 3 states which are “rest”, “hover”, “active” and each category has its own colour.


To simplify my task and in the spirit of web component logic, I wanted to create a single variant with the 3 states mentioned and override the “active” colour of each entry in another component.


The colour override works fine when my filter list is placed directly in a frame but the colour of the base component takes over if I place my filters inside of a component


As I show in the print screen I could create as many variants as I have filters. But it hurts my feelings.


Is it a bug ? Am I missing something ?


colour-issue


Figma_gU4aMacqIo

Add an extra layer to the component variants that will be responsible for the active color. In some variants, this layer should be hidden, in others it should be visible.

Thanks but I am not sure to understand ? Do you say that I have to add a layer for each colour in all the variants ? Thanks.

No, not for each color a new layer, but only one new layer.


Create a layer and give it the active color. Copy this layer and paste it into each variant (component in component set). Hide this layer in those variants in which it should not be displayed. Then override the color of the active layer in another main component.

Thanks mate, it’s working like a charm. Is the orignal issue a bug ? Did I try to simplify to much my components ?


Thanks and have a nice day.

I don’t think this is a bug, but you can contact support to have the engineering team look into your case and let you know if this is expected behavior or not.

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

Terms & ConditionsCookie settings