Skip to main content

Hi,


Is there any option to automatically sort the items/components in the variants menu? Seems like I can drag them and drop but while having lots of elements it’s quite hard to keep things in the correct order.


I know there are plugins to sort items in the layers menu (like SortIt) but would be great if there is an option to make the same (A->Z, Z->A) for the variants.


It will make life easier.


Kapture 2021-04-21 at 13.42.37

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.

Screen Shot 2022-08-19 at 3.23.11 PM


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


Screen Shot 2022-08-19 at 3.23.03 PM


Screen Shot 2022-08-19 at 3.23.42 PM


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:


image

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




Order variants alphabetically


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!


Figma

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!


Reply