Variants have become one of the most important features I use within Figma. They are incredibly powerful! As they are so useful, I find myself looking for the ability to have properties show ONLY when another property is a certain value.
A quick example of what I mean is like this:
Let’s assume you have a button, and the top level of the properties are set up to be Primary and Secondary:
Let’s now assume I have an icon added to my buttons, but they are ONLY available to my Secondary button:
It would be so helpful here if this was possible:
Select “Secondary” as my Property on the button variant.
When “Secondary” is the active Property, I can then see ANOTHER Property where I can choose the icon for this example.
That icon Property is only visible because I have said that it belongs to the “Secondary” Property.
Apologies if I have not explained this very well, but I think this could really be helpful when working with Variants.
Page 1 / 2
You can already do that, just delete the unnecessary variant, in your case the secondary button without the icon.
Sorry, it’s hard to explain with text.
In this example, both Primary and Secondary buttons can have no icons, or Secondary buttons can only have an icon.
I was hoping to have one button in my Library, when I drag it onto the canvas, I see the following variant choices:
Status
Primary
Secondary
I was then hoping that when I select “Secondary”, an additional Variant row appears to choose the icon, if I want one.
Status
Primary
Secondary - Chosen
— Icon: Add
Got it, you want the variant value change button to appear or disappear based on the available variants, that makes sense.
Yes please, I’m building a design system for non-designers, and that would be a dream.
Currently I have to create multiple Variants to avoid impossible situations or just leave my user to understand why a certain set of properties is impossible to achieve.
Hide/show of conditionnal properties or even enabled/disabled would solve it.
Is there a feature request tracker where we can track any progress of something like this? This is an essential feature, I’m surprised to find it is not available.
But this means that you’ll need nested properties for Variants. 🤯
I don’t think the UI of Figma is prepared for such an extension and neither the code behind. 🤔
Looking forward for something like this. 😁
Glad to see others requesting this! It would avoid those massive matrixes of every possible combination (even the ones you don’t want 🙂)
I can’t begin to imagine how difficult these things are with a massive user base and endless implications to consider.
But as an example, I could see:
Allowing nesting of sub-variants
Using a pick-whip like prototypes to visualize relationships
Visualizing the nested nature of sub-variants
e.g. in this example, the “Tertiary” button has only one content type
I would love that too, it would be super useful!
this would be a good thing to have!
Any progress in this feature? Can we do it now somehow? Please help.
Also need this.
Please help with this
This is currently already possible using Layer boolean properties found in the property panel on the right side.
Here's an image of how it looks like. Click me!
Head to the Layers section>Apply booelan property>Create property… > Give it a name, and voila!
If you set it to any specific variant within a component, it will only show when that variant is picked from the list.
This really should not be marked as a solution. While true and a solution to OP’s issue, it doesn’t mean conditional properties are possible on other property types (namely, variant properties).
@Antoine It would also work without using Boolean Layer Property.
If your second variant has a nested component, exposing it to the top would yield the same result: you will only see the nested component if you pick the second variant.
It is, however, not fully fledged. You cannot, for example, have multiple conditions. It would only work with one-to-one conditional logic, i.e. one variant property will only show one other variant. There lies the limitations.
And as I understood its not a solution to OPs problem.
I’m working on something similar rn and would love to see conditional variables / properties.
I want to have a specific variable-A set to x if another variable-B is set to y.
I can do that by applying logic to an initializing frame, but also would love to apply that logic to the variable itself. As understood Figma is working on it, called “code syntax”
My use case:
I’m building a prototype for switching user accounts. the active user is stored in a variable.
I want to highlight the active user in a list of given users.
I’m working on a (large) design system that uses variants and properties extensively, and I’m finding that I frequently wish for the ability to add conditions to certain variant properties that would hide or disable them when other conditions are set.
For example, I’m working on a promo that has 3 levels (low, medium and high) of visual prominence for the content type ‘live’, but only 2 for the content type ‘standard’ (low and high).
If one of our users changes the visual prominence to ‘medium’ when ‘standard’ is selected, currently Figma will force the component to change to ‘live’ - which is confusing if the user doesn’t understand that this combination of properties doesn’t exist.
I think it would be better, and much easier to understand, if this option was hidden or disabled.
Unless anyone has any ideas on a better way to do this within the current constraints?
Yes, this can be done, but it is really limited. As soon as you have components with non-bolean variants it’s really hard to use.
Forexample, say I have an ninput] with two sizes. Normal & Large. In Normal I want to be able to “attatch” two different subcomponents two the left side using a property. I’ll call it “attatchment” with values “False/icon/button”. So I can either do tInput:small]nicon] or oInput:small]nbutton] but I don’t want to allow Input:small]ricon]Ibutton].
However in Large there can only be tinput:Large] and I don’t want the property shown when Large is choosen. Now this can’t be done (at least I haven’t figured out how), without using nested components (but then one have to click into each sub-component to se it’s properties).
So in some cases this is a nice solution, but a proper conditional function would improve this a lot!
Same here. I would like the bars to have conditions so that the appropriate ones are removed when items are turned off - ie don’t have a bar on the end, always have bars inbetween. It’s not a prototyping interaction. It should happen when designer makes changes in right panel.
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!
