Sort variants alphabetically (ascending/descending)

Anyone else missing the powerful sorting from the old variants panel?
Sorting values in the new variant property panel is an irritating pain compared to this and takes forever. Was hoping that it will get noticed and fixed/reverted by now, but hey.
Such productivity!

hi guys!!

any news?

Running into this frequently and honestly all they’d have to do is make the order match the variant order that’s already in the component.

There are plenty of plugins to auto sort layers but for whatever reason the variant menu is different, requiring a manual reorder.

Which is mostly fine for smaller components but annoying to say the least to have to do every time and not feasible for larger more complex variant sets.

I also don’t count breaking the component to get it resorted as a “solution” since I’d literally have to re link all of the instances.

I’ve tried this and it does not work unfortunately.

I’ve created a plugin to search variant by name.
Yet, the plugin is under reviewing by Figma team and I hope it will be approved to publish soon
Screen record of the plugin

So we are still waiting for a solution to this? I have to add new icons and it is a mess, unless I do it manually which is time consuming. 😦

I’m desperate. I need this feature!

The worst way to make flags mate

Ok, do you have a better idea?

I’d make each one of them as a single component. This way my users will be able to lookup an asset they need. And this is the best practice from Figma itself, fairly obvious though 🤣

The problem with single components here is, to hold additional meta data like in my case, ISO codes. So far there is no reasonable solution for this in Figma.

My current solution for it looks like this:

I’m not happy with that.

I think I found the hack 🙂

If you rename a variant field two times in a row, the values are reordered.
It worked on figma desktop on my mac (did not check into the browser)

@S_e_b_a_s_t_i_a_n @Rebekka_Karrengarn you just need to rename Country into Country2 and then name it back to Country

Normaly this is safe and should not break anything too, right @Ilya_Ivanov ?

It works Stephane, you are a genius! thanks.

You’re welcome 💪🏽

@Stephane_Popout
This doesn’t work for me, can you upload some images or a gif to show how you do it?
Thanks

here a gif below
At the beginning the variant “aaa” is at the end
After changing 3 times the variant name → “aaa” is back at the top

Remarks:

• You really have to change it in a row (2 or 3 times if it did not work)
• The sorting is case sensitive → this is why Default stayed first before “aaa”
  • So have a lowercase or uppercase for all your variants name

Hi guys,
I wanted to let you know that I created a plugin that works with the solution @Stephane_Popout suggested. I hope it can help you!

genius work-around

This is the answer! ❤️

Thank you thank you thank you

YES!!! I just selected all the instances. Renamed them all to have “_2” at the end. Then named them back by removing the “_2” and BOOM. Instances show up in alphabetical order now. I did use SortIt Plug to do the main organization first so they viewed in order in your library as well. THANK YOU STEPHANE! It took me seconds to fix this with this work around.

Happy to know it worked 🎉

Well done Mikel 🤗🎉

Holy crapmoly this is genius. Nice!

+1
Having a large list of variants in one component is pain to click and drag the order. Would love it if we can auto-sort them in ascending alphabetical order.