Change Properties Variant Order

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.

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.

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.

Thank you !!! Took me AGES to even find your answer because a lot of people talks about moving properties VALUES, but not the properties themselves. BTW it should remain 2 different threads, because I came here 3 times before finally scrolling all the way down to see this post.

As you so precisely mention, this is DEVILISH UI : let’s make a hidden element that appears when you hover over it BUT at the same time is smaller than the mouse cursor itself. hin hin 👹  Com’on Figma, we know you focus on design & development, but a little UX & Gestalt principles could help you here.

Is there a way to automatically order them A to Z?

If there are a lot of variants and you add more, it gets really annoying to click and drag the newest variant into the right order each time.

For me moving properties order, the icon is not even hidden or tiny, it’s simply inexistant.. 

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.

in mine appears sometimes and sometimes not. definetly not to re-arrange Nested instances :(