Figma Support Forum

How to set defaults / precedence of variants with multiple properties?

Hello folks.

My design team has started making the shift over to variants in our design system.

One of the things we have been thinking about is creating smart default settings within our component variants.

For example, we have a button component built with variants that utilizes multiple properties:

As you can see, there are 3 sizes: Regular, Compact, and Large.

In practice, we use the “regular” size button about 90% of the time, and so when creating this component, we made sure to order the size properties with “regular” first, hoping that this would become the default property value when you drag the component out of the assets panel.

As you can see from the Gif however, this isn’t the case - when you drag the component from the assets panel the size is “Large” by default.

Am I missing something here? Does anyone know a way to create ‘default’ values for variant properties?

By default, the very first (top-left) element on the canvas is always used. In this case, “Large”. When you swap the elements so that “Regular” is the top-left, then the “Regular” option will appear in the assets panel.

1 Like

Wow, is that really it? if so - what’s the point of being able to reorder properties and values in the LHS menu?

1 Like

@miggi could you enlighten us, please?

Sorry, what is “LHS”? Order of variant properties in the property panel? The ordering of variants on the properties panel is used to show variants in the drop-down menu in the same order.

LHS = Left Hand Side. But now that I have taken another look, that was a typo and the variant properties panel is actually on the right! Sorry about that.

Suggestion to Figma team: The default variant that you get when you drag from the assets panel should be one with values corresponding to the first property value across all properties.

Reordering the properties to set defaults makes so much more sense to me than rearranging the components.
‘Component positioning within the variant frame relative to upper left corner’ is an extremely arbitrary and implicit property to determine default variants.

1 Like

You can create a topic in #product-ideas so that anyone can vote.

Done

https://forum.figma.com/t/variants-set-default-variant-based-on-order-of-property-values/1369/2