Conditional Variant Properties

Please see the image below. Not sure if Figma will get to solve this any time soon, it’s either a technical limitation, or it’s intentional, but it can be a bit more intuitive.

If Type A is selected, please show options for Type A only, vs also showing from type B.

The current behaviour is, if you imagine a country selector, you select Japan, and in province selector you also see provinces from other countries, doesn’t really make sense. Figma is still a fantastic tool, and hope it gets even better.

You can achieve conditional component properties if you take instances of your separate components. For example in the post from Radu4, if you separate Type A and Type B into two separate components, and then take the default instance from each, then make those variants of a component, and show their nested properties, the options for each will show up conditionally. See below for how an example like this would show up in the properties panel.

Thanks Brandon, I appreciate the reply. What you explained is how Figma works today, and what I ended up doing of course. But to take all these steps to work around for the lack of a simple select filter, is a bit unintuitive.

I don’t follow Brandon. Are you suggesting to create two variants - with one for Type A and one for Type B?

Yes I’ve also been waiting on this subfiltering feature for quite a while now! Hoped they would’ve announced it at config! As trying to solve it with the boolean property is not enough.
I work for a sports betting bookmaker, and we are visualizing the many different sports teams using either their official logos or shirts.
So my current setup looks like this:

So ideally, when you choose UK, the expected behavior would be that you would only be able to see the UK teams, as now every single team shows up… this is a huge component consisting of many countries and their national teams, but very needed to keep this same structure.

Additionally, it needs to be easily syncable using a spreadsheet so it cannot be split up in multiple components per country.

Solving this by wrapping it inside another component and then using nested instance swapping is not great either as this will automatically rescale it to its default size.
Since this component has an insane amount of instances, they need to be small but scaled up when used, as it’s loaded onto every possible display format you can think of, all with other dimensions…

You would just expect it to behave like how everyone else has described it.

Has anyone found a plugin that does this, maybe? As a workaround?
Hope this becomes a default feature very very soon!

Anyway thanks for reading and considering

Upvoted! I’m building an address form which should have different properties based on the selected country variant. This would declutter my component dramatically!

5 years and counting - we need this!!!!