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:
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.
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.
Hello @Yehia
what Antoine meant is still something different.
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.
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 [input] 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 [Input:small][icon] or [Input:small][button] but I don’t want to allow [Input:small][icon][button].
However in Large there can only be [input: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!
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?
)
