Figma Support Forum

Conditional Variant Properties

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:

  1. Select “Secondary” as my Property on the button variant.
  2. When “Secondary” is the active Property, I can then see ANOTHER Property where I can choose the icon for this example.
  3. 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.

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.

1 Like

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.