LAUNCHED: Moving or copying variables

Hey there! I used this for my colour variable collection and it worked. My project was a website with dark and light mode and I had created the colour variable collection on the Design System file (let’s call it file A). In order to use it on my prototype file (file B), I tried to look for a way to transfer the variables so that I could see what colour in the light mode is equivalent to the one on the dark mode.

Since the variables are not sharable like libraries, I looked into different solutions and here’s what I found:

When you create a set of colour variables, it’s usually saved as local library. (you can see them in Libraries under Local colours). So I published my local library of file A, and used it on as a library on file B. Although it didn’t show me the colour equivalencies as a table, I still could find the equivalent colours by switching between light and dark mode on my file B.

Hope it helps 🙂

This plugin did it for me for 5 seconds:

@Richard_Simms I built a plugin to restore variables used in a prototype and relink them on your new file

here is the tutorial post about:

The export/import function of this plugin is amazing!

Found another free plugin:

I just updated my plugin to move your variables and you can now select the variables you want to move and it will take all the depending variables and copy them to your new file.

I created a small tutorial video for it (4mins), I hope it will help you

In case of any additional questions or desired improvements, don’t hesitate to let me know on the plugin page or here
If you like the plugin and find it useful please feel free to give it a like and share it 🤗 !

Did try a different approach and faced a weird break in detaching patterns within Figma.

–– When I wanted to get rid of color styles, I had to …

1. Reference the color variable as value of the style
2. Publish changes and pull into all files
3. Delete the styles → they automatically detach and the value (color variable) is set instead.
4. So the mechanic of detaching to me seems to follow the rule:
   the element I detach is maintaining all the information that sits inside of it and gets only diconnected from it’s selected level.

–– When detaching a component

1. All items used inside the component itself will remain same
2. To me again it seems like the same rule applies:
   the element I detach is maintaining all the information that sits inside of it and gets only diconnected from it’s selected level.

–– However, when I try to move a variable between files using this detaching logic, the pattern breaks, and I am wondering why? …

1. Link the color variable (e.g. of a different library Foundation/Primitives) as value of the previous variable (because it sits in the wrong file, but is connected to lots of different files)
2. Publish changes and pull into all files
3. Delete the variable (from the file I initially want to move it from)
   → assumption based on pattern — it will automatically detach and the value (color variable of the foundations file) is set instead, but…
   → it detaches also the referenced color variable and only the hex value is shown, …
   WHY??

@Elham_Mahootchi Copy the Export code you see to the clipboard, then go to the Figma where you need to import the variables and paste the code into the Import code textarea and click Import. Magic done. Hope it helps 🙂

I just created a plugin that allows you to copy and paste variables between different collections or files. You can also export variables as JSON and import it as another collection. All properties like scoping and code syntax will be remained.

Exactly what I needed! Worked perfectly.