Swapping Variants of Nested Components

Hey folks,

I am currently working on a complex component that consists of nested components and Booleans.

As the nested components have different states as well, I added variants to those. If I click on the surrounding parent component and want to swap the variants of the nested child component, it only allows me to swap the complete instance and not its selected variant.

Please see this architecture sketch:

Parent Component

  • Variant 1
    ** Child Component
    *** Variant a
    *** Variant b
    *** Variant c
  • Variant 2
  • Variant 3

I find it much more comfortable to sort all of such similar components as variants. Is it still possible to swap them or do I have to make them separate components to do so?

You can expose variants by adding them as properties in their parent component.

There are also plugins that work «roughly» in the same manner, which could see some use: https://www.figma.com/community/plugin/1027413532986522043/selection-variants

1 Like

Awesome. That was the missing piece. I cannot believe I have overseen this feature. Thanks.

In fairness, I believe it is a fairly new feature. Glad to spread the gospel!

2 Likes