Skip to main content

Can anyone figure out how to reorder the list of variable collection in the fill dropdown? The layer ‘mode’ assignment appears to sort correctly alphabetically, but the pick list under the fill menu does not, which is a huge painpoint, and will definitely lead to my designers picking the first color they see instead of the semantic one.


Correctly sorted - numerical

Screenshot 2023-06-23 at 2.28.47 PM


Incorrectly sorted - 2. is at the top instead of 1.

I added the idea to add the hide options today, so your designers will see only what they need to see.


Yeah, I have the same issue and it’s a real pain. I have a very large colour library which spans a wide range of semantic uses, so I plan to use lots of collections.


However, the core colours are used much more frequently so I want these to appear at the top. I too numbered them as you have but the fill menu doesn’t reflect that and my core colours have been pushed to the bottom, which means lots of painful scrolling every time I want to apply a colour


+1. Came to the same problem today. Definitely need reorder or show\hide.


+1 I’m facing the same issue as well!


I have a similar issue with this. I have multiple variables based on the needs of my product and I want to have them organized with Screen and Language at the top. I’m updating my language file, and every new one defaults to the wrong collection. And I can’t see a way to move them over.


Yep, same problem. I think alphabetical order would be enough for the first time. But we definitely need proper reorder


Yeah, also need this - i can’t tell if it’s ordering them in the order the collections were created, or what but this makes for very tedious browsing…


Same here. Please address.


I’m looking forward to this feature! Reorder variable collections!


+1, this is crucial for our team!


Yes similar issue. It becomes very tedious to browse for long lists !


Currently not a way to fix this if you’ve already set up primitives first, tokens second. Annoying because this is an obvious workflow.


One sorta-solution:


When you start, create several collections in the order you want them to appear later on. Then name the lowermost Primitives, fill it up and later populate the collections above (i.e. tokens).


Hey all thanks for the feedback here. I’ve gone ahead and moved this topic into the Share an idea category which will allow for votes. I’ll also be sharing this with the variables team! 🙂


Facing the same issue


We absolutely need this feature! This should have been part of the initial release!


+1. Expected collections to be sorted alphabetically within the color picker menu. Ideally could sort libraries to encourage semantic token usage


This is a desperate need!

I actually used the variable import/export plugin to export the collections then import them back in the correct order, but everything became unlinked. I re-linked everything and it worked fine for a short while, but I re-ordered some variables within a collection and the order got messed up again? Can’t figure out the logic of the ordering in the fill menu…

As said above, we are likely importing a large amount of swatches in the form of colour palettes therefore its essential we can put these raw primitives at the bottom of this list, otherwise encouraging the use of these variables is a drag because of this pain point.



Yep, lame.


When you open the fill styles in other files, it doesn’t even matter how the variable groups are organized inside the collection (like bringing your global colors at the top so that others can pick them without scrolling down for days).


The arrangement is the same as when it was originally imported/created. Nonetheless, it does show the correct ordering in its root file. Why it wouldn’t work elsewhere where that library is in use is a mystery to me.



Same issue here. Added a new color collection for a partner and now it’s the first thing you see when you pick a fill/stroke 🙄


Same here! Reorder and hide are very much needed!


Encountered this issue awhile back and it still has not been fixed till date… it has been a huge pain especially for colours when it comes to management of the design system using variables.


The unintended colours (i.e. global colours) move to the top when published and there is no way or possible workaround to reorder it.


I have tried numbering and using alphabets to reorder the variable tabs but to no avail.


🔥🔥🔥 Hope the Figma team comes through for us as always and fixes this! 🔥🔥🔥


Any update on this? I wanted to rearrange my colors so that I could find colors easily from the library but I’m finding no option to do so. It’s such a pain searching for the colors scrolling all the way down or even typing it which should be closer to the top of the scroll.


Hey Josh, any updates on this? There’s been a lot of interest since July, and its a real pain point. Just on my team (a small one) our variables menu is opened 100+ times per day per person, which means this annoyance happens for our team over 1,000 times per day. Hope you can pass on this continued sentiment to the variables team. Thanks!


Bumping. Any updates with this? It’s made designing at least twice as longer, and now requires so much keystrokes to find the color I need when it just took a mouse click before 😩


Reply