Conditional Variant Properties

Forum|Forum|5 years ago
March 23, 2021
27 replies
14245 views

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.

Share an idea

Gleb

Power Member

You can already do that, just delete the unnecessary variant, in your case the secondary button without the icon.

adamlunnAuthor

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

Gleb

Power Member

Got it, you want the variant value change button to appear or disappear based on the available variants, that makes sense.

Antoine

Active Member

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.

Lyubomir_Popov

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.