Skip to main content

It would be great if we could put the properties in the order we want in the variants.


With drag and drop like layers.


Have a good day 🙂

You can change the order of properties and property values.

https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants#Reorder_properties_and_values

How do you change the order of the variants within the properties?

Eg.

From: Size: S, L, M, XL

to Size: S, M, L, XL


UPDATE - I see that you can drag the pills around (that wasn’t obvious - but it works)


  1. Find your main component

  2. Navigate to the properties panel (right side panel).

  3. Find the variant property and click edit property.

  4. Redorder list position of variants as you see fit. This is the same list order used used to navigate and swap variants on a child component.

Thank you! This helped. The original solution was changed in an update, apparently.

OMG I am sooo glad to have found this out! It’s been driving my OCD nuts 🙂 It wasn’t easy to find.

order-variants


You have to hover your mouse over that little area on the left to get the hand icon to show up but then you can drag. It might be handy if the UI had the little “grips” visible all the time.

I created 23 properties to easily edit a table (one property for each text), but when I copy the component to use, was without the order planned and I don’t know how can I fix that


support2

All properties

support1

This got even less noticeable in the new UI, FYI design folks.

With the changes I can’t figure out how to change it. Can you help me out?

i can’t figure out how to reorder the boolean properties in a component? It used to be easy and now it seems there is no way? so annoying! i have to delete the properties and then add them back in in the right order. c’mon Figma

If I understand correctly, do you want to change the order like this one?



If you select the top layer of the component, I think you can reorder the properties.


Please let me know if I’m misunderstanding!


Thanks,

Toku

Totally agree with you. 🙌

Those “three” lines should be visible on each hover of the variants!

For real! The number of hidden UI elements in Figma is ridiculous. How ironic that the UI on a UI-builder isn’t so great…

This has be driving me nuts!!!


It used to be there and easy to do…just the typical two line icon- “this thing is draggable/reorderable”


Now??? WHERE did it go?!


C’mon Figma designers…do better.

Reply


Terms & ConditionsCookie settings