Move master components from different files to a new library

My plugin Master can help! It can automatically find and attach all instances of the original component to the new library component and preserve all overrides. Here are the full instructions on how to do it, below is a shortened version:

1. Copy the main component you want to move to the library and publish it.

2. Select this new library component and run: Plugins → Master → Pick Target Component.
   

   

3. Select the original component or its instances and run: Plugins → Master → Link Objects to Target Component.

4. If that component was local, that’s it. If not, you need to go to each file where instances of it are used, deselect everything and run Link Objects to Target Component.

A new video showing how to move components with Master:

Thanks Gleb for your answer! I did used Master and I really liked it, but when I tried to link the instance to the new component, I lost all the written text on the instance, is there a way to avoid that?

The order of layers in both components needs to match in order for overrides to be preserved. For example, if you have the following structure in one component: [Icon, Text, Rectangle] and then in another component you have [Icon, Rectangle, Text] layers or even [Icon, Text, Rectangle, Rectangle], Master will not be able to preserve overrides, unfortunately.

Sometimes you also could have an extra wrapping frame which will break this too. For example, if you are using an instance as a base component in one of the components and another component simply has all the contents in it.

In the case above, you can fix this by wrapping vector square in an extra frame. This will make the structures match again. (Even if “wrapper” is an instance, it would still work, since Master considers instances and frames similar objects.)

Do components you are trying to link have matching structures?

Hi Gleb. I tried to use master for my problem, but I don’t think it works in my case. What do you think?

My issue is: I have a library at organization-level and a new library at team-level.
I want to move some components from my org lib to my team lib, without losing the links to all the instances in different files (also located in the same team as my new team lib).

Here’s what I tried : I copy-paste the component from org lib to team lib. It creates an instance. I turn the instance into a component. I choose it as the “target component” in Master. I come back to the old one (in org lib), click on it and click “link objects to target component”. But Master can’t find any objects linked to it (but there are).

Maybe it works only when moving local components to a lib? But not from lib to lib?

Got the same issue here. On regular basis, we explore and create new components directly in the file we work in currently. At some point, we get into the clean-up mode where we select which of the local components can make it to the master library and are worth sharing.

Master plugin is of great help here @Gleb however, doing it component by component is a showstopper for us in most cases.

Every day, I dream of a solution similar to one we had in Sketch quite a time ago already:

• Symbol Swapper (https://github.com/sonburn/symbol-swapper) that allowed us to batch swap whole libraries if the naming convention is kept the same,
• or Move to library (https://github.com/ahmedmigo/Move-to-library-sketchplugin) which allowed us to super easily move masters from local project files into shared libraries.

We’ve switched to Figma almost a year ago already and we love everything about it, but managing and maintaining design systems is still quite a headache for us.

I wonder if anyone had similar challenges and got some solution to share to help.

Love you guys!

Thanks for the detailed explanation, Lucie! Yes, you are correct, this method works with local instances only. That’s because a plugin in Figma can only access one file that it’s open in. However, there is a workaround that I made to enable you to go through all files where it’s used and relink it.

1. Save the new component as target as you did.
2. Go to the old component and link it, like you did.
3. Open the file where the old component is used, deselect everything and run “Link Objects to Target Component”. Master will find all instances of the component you linked on the second step and attach them to the saved target component.

You’ll need to manually repeat the third step in all files where the component is used. Hope this helps a bit!

Hi Piotr! Unfortunately Figma API doesn’t allow to do that easily so there is not much that can be done by individual plugin makers like me. But I’m pretty sure Figma will be working on improving libraries this year so hopefully they’ll create a native solution. Feel free to search for relevant suggestions in the #product-ideas category and vote for them or suggest your own if you don’t find anything.

Thank you very much Gleb! I will try that.

The Figma team needs to fix this. Ok this plugin is amazing. Thank you very much Gleb! But this is an important problem. Figma team you need to fix this. Please!

@gleb This is pretty awesome! Doesn’t seem to work with variants, right? I’m on a team that uses a lot of atomic components that are organized as variants, and a new team needs to start sharing these atomic components. I currently have a separate shared library for color, type, and grids, and would like to move the existing atomic components to this shared library so both teams can use it. However, because most of them are organized as variants, I don’t think I’d be able to move them to the shared library and use the Master plug-in to “move” the master status from the existing file to the shared library file. Is my only option to “un-variant” the existing atomic components, and then move them to the shared library or am I missing something?

It works with variants the same way it works with regular components: each variant in the variant set is technically a regular component.

I understand that you want to link multiple components (variants) at the same time — that’s a very common question. Unfortunately currently it’s quite a technically challenging task, but I’m hoping to make it work with multiple components in the near future. Just not sure when, but I’ll definitely let everyone know once I update it.

Hey Lucie! How are you doing?

I have your exact same problem now. I’m trying to migrate a set of components from a Core Components lib to a Base Components lib and Master doesn’t work with component->component relationship 😢
I was trying to avoid to visit each file which these components are being used and do all this manual work using Master in the files directly.

I think what we need to do is this manual painful work, and after doing it, we just go to the older lib and just DELETE all the components we “”“migrated”"" to the newer lib.

Did you do this? Or did you find some more intelligent way to solve it?

Thanks!

Hey Bruno, could you clarify what you mean by “component->component” relationship? You can do this: Move master components from different files to a new library - #7 by Gleb — no need for manual work other than you need to do it for each component, should still be faster then manually finding and replacing all instances of each component.

Hey Gleb! I mean that at the “Team Components” I have graph components that are being used in tons of files.

We are moving one entire graph library that is on “Team Components” to the “Base Components” file (both are different Figma files on our DS project).

1. I copy/paste the graph components from Team Components to Base Components, they become instances of Team Components.

2. On Base Components DS file, I detach them and then convert them into new components, so now I can use Master to select them as target components.

3. I go back to Team Components and select some graph component I need to replace with the new ones on Base Components.

4. It doesn’t work. Master’s error message “No objects that can be attached found”.

It happens because Master doesn’t work with component → component replacement, right?

That said, I think that the only solution is go to each one of the tons of files and select all the graphs and start using Master to relink them to the new Base Components graphs components.

I don’t know if I got your instructions correctly. It didn’t work for me.
Thanks!

At the moment this functionality is a bit hidden, but what you did is correct and it should work. After you see the message “No objects that can be attached found” Master will remember the component that you linked, so now you can go to other files and do the third step in my instruction above (plugins don’t have access to other files so it can be only done in each file individually). Alternatively you can first manually link some instances of the component, and Master will remember them as well (this way you won’t see the error message). I get that it is confusing so I’m working on improving this.

Gotcha, Gleb.

But my main point is exactly the needing of open each file that is using my graph components and “manually” do it, you know? Even Master helping me saving some minutes, I still need to open all the files that is using the master components I am moving to a new library 😢

Figma should perfectly better handle this 'master components migration between 2 DS files" feature.

Yeah I hear you. When you wrote:

I think what we need to do is this manual painful work, and after doing it, we just go to the older lib and just DELETE all the components we “”“migrated”“” to the newer lib.

I thought you meant you will go to each file and manually find and replace all instances you need, without using Master, that’s why I wanted to clarify that there is a better way with Master. And yeah I totally agree, it would be great if Figma makes moving components between files possible.

@Gleb sure, man! Thanks for your quick answers trying to help us and your proactivity.

I’m looking forward for having this feature covered by Figma team asap!

Cheers!
Bruno

Figma should really implement this, at least in the paid version.

Hey @John_Stewart, it’s been a while but if that’s still relevant, I added the basic support for variants attachment! So now you can move variants between files a bit more easily.

Unfortunately the major pain point is the needing of open each project file, individually, and manually link the old components with the new ones by using Master.
My company has more than 30 Figma files for different features and its individual different versions. So, open each file to update the components with the new library is insanely painful.

☹

Got an easier workaround for free @Bruno_Barreto @Mario @Gleb .

How to transfer old figma projects and their components to a new design library.

1. On your old project file, make sure the designs and their components are together on the same page
2. Select all and Copy
3. Paste them in the new design library you wish the components to live. The design and components must still be linked. ​
4. Publish your new design library
5. Select and Cut the designs (without the main components)
6. Open a new figma file
7. Go to Assets > Team Library and connect the new design library (or update it if you have already done it)
8. Paste the designs.
9. The components and overrides must still be linked to the new design library.
10. Done!

Thanks @Konstantinos_Partheniadis, this sounds like a much easier method, however, I’m having a hard time following what the needed steps are here. Any chance you can revisit the steps here and provide a bit more detail? For one, I’m not sure what “The design and components must still be linked” means. Or similarly, what “The components and overrides must still be linked to the new design library.” means.

Hey everyone, has anyone encountered overrides’ reset after moving components? https://help.figma.com/hc/en-us/articles/4404848314647

Unlike Gleb’s Master components (which I used quite often before), this Figma’s new feature doesn’t seem to retain the overrides and ended up breaking a lot of screens in my case.