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

[Spencer_James1]

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?

[tank666]

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” variant will appear in the Assets panel.

[Spencer_James]

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

[Steven]

@miggi could you enlighten us, please?

[tank666]

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.

[Spencer_James]

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.

[tank666]

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

[Spencer_James]

Done

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

[Pedro_Barata]

Has anyone experienced this with boolean values true or false? No matter the order of the attribute or the top left positioning of the frame, the default value is always True any hints?

[Spencer_James1]

I believe this is still determined based on the position of the variants within the frame.

Try putting the one you want as default in the top left

[Luke_Simshauser]

@Pedro_Barata if you select the component (not the variant) to expose the props, you can set the default for boolean there
note: you still can’t set the default variant, but can set default boolean and reorder variants so they show in correct order in your dropdown >> eg sm, md, lg

in this example, the default value for leading icon will be false

[dimalei]

I’m using the Material Design Icons file by Google and I’m trying to use the “rounded” type by default. That means I need to re-arrange 2000+ components by hand

edit:
Not the prettiest solution but search (Ctrl+F) “Filled”, then selecting all components (Ctrl+A) and moving them with the Arrow Keys to the right actually did the trick. It messed up some icons with the words “filled” in it, but they can be fixed manually.