Nested variants component issue

A component may have many variants and if you combine that with states, you will get variants x states = a lot. In an effort to reduce that I split it into component groups where state component is the “top layer”.

So the idea is that (2) inherits (1) and the result is (4.2).
But the problem is that the states in (2) only applies to the variant without icon and not to (1) as a whole. This is why hover states in 4.1 does not work as expected.

Instead you have to combine varaints with states which creates x3 number of variants (3)

To show / hide an icon in (4.1), you will have to select the elemnt in (4.1) and go one level down (e.g. by hitting enter). You will not see the options for (1). But if you change the proerpties (4.1) registers that as an override and that is why the hover state gets “stuck” on list element 2.

Did that make any sense? If yes, is there a way around this? Or am I stuck with (3) until Figma implements variant inheritance?

See demo here (Hit play to see hover states)

1 Like

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