Figma: Moving Local Components to Shared Libraries

What to do if you find building a new house easier than moving components


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:

-

A. If you want to relink a dead-simple component


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: 

  1. 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.
A. Step 2 of 6
3. Use a selection plugin like Similayer or Select Layers to select all of them at once
A. Step 3 of 6
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:

-

B. Components with any form of overrides

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:

  1. 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.
B. Step 2 of 7

3. Don’t forget to publish the library file before switching back to the local file (and import it in the designated local file.)
B. Step 3 of 7: Publish and Import as you did with A.


4. Select a Master component on a Local File
B. Step 4 of 7

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!

Looking for a new challenge? Join Our Team


Like 3 likes
Gavin Chiemsombat
I'm a full-time Product Designer (and a Front-end enthusiast) at OOZOU in Bangkok, Thailand
Share:

Join the conversation

This will be shown public
All comments are moderated

Get our stories delivered

From us to your inbox weekly.