If you use variable at your work or played with figma variables like me then you know that you can't reorder modes in the figma variables table... Why did they do that to designers ? I dunno and we'll never know 🤧
But you know that as your design system grows you may want to reorder them to have a better structure. You also want your colleagues to use it in a more efficient way.
You started building in light mode and then you added dark mode.
Then dark mode becomes the default mode and you need to reorder them... You're stuck.
You add only 3 breakpoints at the beginning and then you want to add more. You're stuck.
Only solution would be to manually change the values of all the variables of each mode one by one... But you don't want to do that.
It's not funny.
It's super long and you have better things to do.
And what if you have 10 modes ?
And what if you have 100 variables ?
And what if they want to add another mode again ?
You need to reorder them in one click.
Here comes "Variable Manager"!
The plugin you need to reorder modes easily. It is available for everyone in the Figma Plugin community.
There is only 4 steps to reorder modes:
- Open variables manager plugin
- Backup your variables
- Rename your modes the order you want
- Restore your modes in the right order
Tadaaaa 🎉
I made a live tutorial on Youtube to help you. Do not hesitate to like and share the video if it was useful.
I wish you a happy design day 🤗 Stephane