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.

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

All properties

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.

Where did the functionality go? I really need to sort my properties :( 

I found this thread for the same reason lol

Here’s the solution:

The drag icon for moving properties around only appears when you hover your cursor over it. Hover your cursor in the tiny margin between the property itself and the left hand edge of the toolbar. Your cursor will turn into a hand when you hover over it. From there you can click and drag to your heart’s content :D

To the devs/designers at Figma: This is not a good design, as its not obvious to newer users that properties can even be rearranged in the first place. Also, with the drag icon being so small, the mouse cursor is big enough to obscure it. The only reason I found it is because I noticed the .05 seconds that my mouse cursor changed into hand when I accidentally hovered over it.

Where did the functionality go? I really need to sort my properties :( 

I found this thread for the same reason lol

Here’s the solution:

The drag icon for moving properties around only appears when you hover your cursor over it. Hover your cursor in the tiny margin between the property itself and the left hand edge of the toolbar. Your cursor will turn into a hand when you hover over it. From there you can click and drag to your heart’s content :D

To the devs/designers at Figma: This is not a good design, as its not obvious to newer users that properties can even be rearranged in the first place. Also, with the drag icon being so small, the mouse cursor is big enough to obscure it. The only reason I found it is because I noticed the .05 seconds that my mouse cursor changed into hand when I accidentally hovered over it.

This is totally insane! I've really tried everything, but how can you see the handle if the cursor completely covers it?  Unfortunately, this really is a very poor user experience.

Thank you so much, that helps me so much! I would never have found this myself, even though I've tried everything and have been using Figma every day for many years.