**Update (18 AUG 2021): We got it, folks! Figma team releases the beta version in which you can do this natively without any workarounds. Check it out here
This happens to everybody in the Figma world
The most common problem with creating a design system is that when it’s time to expand and diverge the file into a library-based system, you have that beautifully-crafted component in a local file and no good way to move it without breaking 50+ text overrides and sub-components inside of each instance. Worry no more as I have now a simple guide for that:
Disclaimer: This method does not carry over any override you would have made
If you happen to have a very simple component that needs to be moved e.g. an icon:
Copy a duplicate over to a library file (Don’t forget to publish said library file)A. Step 1 of 6
2. Go back to your local working file (in this case, it’s that ‘login’ file in which the icon has originally been created) and make sure you have enabled the library file that you just published.
4. Once you have the desired objects selected in a page, replace all of it at once using the good old component override sidebar (on the right pane)A. Step 4 of 6: The linked library will be listed on the bottom
5. Repeat 3 and 4 for each page on your file
6. Done!
Alright!!
Pretty straightforward eh?
Well, before you jump on your file and start messing around with plugins and selection, there’s one little problem. This option doesn't carry over any override or changes you made. So unabashedly go through ALL of the instances and re-do most of the overrides while patting yourself in as a hard-working designer. Which leads us to the second option:
Most of the components you created might have an override of some kind, whether it'd be a simple colour change or complex auto-layout text structures. To save yourself from all the trouble, I would advise you to start using a lovely paid plugin called Master.
Master Plugin by https://gleb.sexy
The plugin itself has many useful features. But for the purpose of this article, I’ll be focusing on migrating master components only.
Here's how:
Create a duplicate of a master component in a library and have it selected (on said library file)B. Step 1 of 7
2. Right-click and select ‘Plugins>Master>Pick Target Component’ while having the master component selected.
5. Right-click and select ‘Plugins>Master>Link Objects to Target Component’ while having the master component selected.
B. Step 5 of 7
6.The plugin will find every instance of a file, replace it with a new one, and override everything accordingly. 7. That’s it! You’re done. Really.
The tooltip of victory!
Note that this method will only work with identical components with different overrides. If you happen to have 2 similar-but-not-an-exact-copy of 2 master components between a file (due to multiple designers working on a file and ending up designing a similar component twice) this will not work as well and may cause some artefacts and bugs. Proceed with caution!
