2 posts tagged with "figma"

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:

1. Open variables manager plugin
2. Backup your variables
3. Rename your modes the order you want
4. 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

When I discovered Figma, I was 🤯: Many designers could all together update the same file and see the changes in real time. It was a real revolution for me and it was free.

I was also amazed by the fact that you could create components and reuse them in your designs. It ressembles a lot to what we do in development. We create components and reuse them in our code. I tested it, loved it and finally dropped other design tools.

Then in June 2023, at the figma config, they unveiled the new feature: variables. For developers, it is like CSS variables. I was so excited to use it.

But when I started to use it, I was disappointed because:

1. The whole feature access was limited to paying customers (modes & advanced prototyping with variables)
2. I could not reuse them in different files. They did not provide any way to easily copy and paste variables on another file.

So I decided to create a plugin to copy variables from one file to another: Here comes "Variable Manager" available for everyone in the Figma community.

How to install it?​

Go to the plugin page and click on the "Try it out" button.

How to use it?​

1. Install the plugin
2. Open the file with the variables you want to copy
3. Run the plugin
4. Click on "save new" button
5. Once your variables saved, click on "copy to clipboard" icon
6. Open the file where you want to copy the variables
7. Run the plugin
8. Click on "paste" button and paste the variables your previously copied

I am working on simple videos to show you how to use it.

How much does it cost?​

Variables Manager is a premium Figma plugin with a limit of 2 collections saved & 10 variables (you can have as many modes as you want).

If you want unlimited collections and variables, you can unlock it for a one-time payment of €20 per user.

How to contribute?​

If you have any suggestions or issues, please contact me on twitter or mail. I'd be glad to chat and help you realize your ideas.