In a component, hiding an object in one variant hides it in all variants

Updated to add: this only happens when the object has a Boolean property. So I guess the question is, how to make use of the boolean property within a variant.

I’m trying to create a component where some elements are hidden by default in one or more variants.

But whenever I hide the element, it hides it in EVERY SINGLE variant.

I feel like I must be missing something very obvious but this makes no sense to me…

Can anyone help?

thanks in advance

If I read it right, you are using a Variable to toggle the visibility of Object in Variants.
Since, each Variant Object has same variable, the object in each variant is affected.

You can create different variables for each object under each variant to keep them separate. It will add on to efforts.

Same answer as above, but for boolean property.
You probably have bound all your red layers to the boolean property. If you only want to control the layer of your 4th variant, unbind the three others from the boolean prop.

I’m not using variables, but I am using a boolean property.

@Antoine yes the red layer in the example has this property, so it can be shown or hidden as needed.

I want this option to exist in every instance (for all variants). But for some of the variants, the object should be hidden by default. For others, it should be visible by default.

Does this make sense?

Yes, and it’s not possible. I created a feature request for a similar idea a while back, but it didn’t pick up.

1 Like

:frowning_face:

Ah, thanks. That’s unfortunate.

I think this sums it up:

Styles overrides are possible in default values, why not properties/instance overrides?

Seems obvious, kind of surprised at this. It’s almost impossible to make use of nested component instances, if the instance has to be identical across all variants.

Have you considered removing the element from this variant? That way the boolean won’t show when this variant is selected. And it will only show for the other 3 variants.

You could make entirely separate components named like this: “MyComponent/stateA” “MyComponent/stateB” and so on and use variant property. It appears to work better than component variants.