Replace a layer with component

I made plugin Master to solve exactly this problem (and some more). There are some other plugins with similar functionality but assuming you want to replace “real” layers (not just rectangles or other placeholders), you want to save data and overrides in them, which only Master can do. Here is how to do it:

1. Select the component or instance of the component you want to attach the layer to.
2. Go to Master → Pick Target Component. Master remembers this component.
3. Select layers you want to replace with the component and run Master → Link Objects to Target Component.

Here is a video showing all Master plugin capabilities in action:

This is a powerful plugin for sure. But I am currently looking for even more simple approach like the Component Replacer. It’s actually deleting and placing a new component. That works half way but I am looking for direct replacement.

Hey I just submitted a plug-in that does exactly this (if I understand your situation correctly), it takes several days to be approved but I’d love to share it with you when it is.

My plugin turns the selected layers into an instance and creates the main component at the root level of your page. It handles all kinds of tricky cases like layers spread between multiple containers, and maintaining constraints from the child to the instance.

If you’d like to beta test it I can arrange that.

What’s the difference between direct replacement and deleting and placing? This is the only way replacement can be done.

Yes, the only drawback of that is, it places that instance on top of all the layers. I have to manually adjust the layer position. That’s the only drawback.

That’s great and I’d love to test it.

I am looking for something like

1. I select a layer
2. Open plugin and search for component from my library
3. I click on save and that instance is replaced with the selected layer.

Ooh ok, I think your use case is different than what my plugin provides, but I think there are a few others which attempt to do that. They should be able to insert the new instance right where the selected layer was too.

Hello @harsha20599 , did you find a plugin? I need to replace many (background) Frames into an existent (background) Components and this is really annoying

I’m sorry Altair. No luck until now. I Hope @figma comes up with a solution for this!

Did you find a solution? As of right now I am grabbing the component I want from my linked library, then selecting the layer/group I want to replace, and using the new “Paste to replace” feature

Maddy, this is the best way to do it as of now if you don’t care about keeping overrides.

Unfortunately Master doesn’t work when you try to replace an object with a component from an external library.

It should. Select a component published to the library, run Master → Pick Target Component. Then select objects you want to replace and run Master → Link Objects to Target Component.

If something isn’t working, send me an example here or to gleb@dominate.design so I can investigate what could be wrong. A video recording of your actions and links to files would be perfect.

I love Figma but goddam if they couldn’t just include a Replace… or Replace With… in the right-click menu like Sketch.

Our team is planning a transition to Figma, and I’m coming across this issue over and over as I rebuild our pattern library. Replace with... is one of the primary features I use for curating and building components in Sketch, so this is a huge friction point for me.

Figma—please tell me this feature is in the works. 🙏

@Sarah19 Check out Figma’s “Paste to Replace” functionality. I think this will help. Here’s a link to the Copy and Paste Playground Figma Community file:

Play with the examples to get the hang of it.

Thanks! I did discover this tool and it is helping.

The paste to replace doesn’t work if it’s a group / frame to be replaced right. It only works with image I guess. Is there a way that I can replace a group in a component? Thanks!

I just released a plugin, where you can select a frame and replace it with a component and keep the original text from the frame. Only requirement: The original frame and the component must have the same amount of text-frames:

This Plugin also helps of you want to reattach a detached instance of a component.

Hey Harsha, same problem: needed to replace a hundred components. Lucky thing is that they all have the same name. What I did is:

1. Searched for that layer name, results showed
2. I copied the component that will replace them (make sure it has a different name than the ones to be replaced)
3. And then I just pressed cmd + shift + R until all the components in the results were replaced.

Manual, but worked for me in a matter of seconds. Hope this helps, thanks.

Using Select Layers plugin is cleaner… not promoting it, just is and it’s free:

1. Copy your component
2. Select all (cmd/ctrl + A)
3. Run plugin called Select Layers - Select Layers by Name, exact match checked (or select any relevant category)
4. Step2 selects all relevant layers, then simply cmd/ctrl + shift + R to replace all those layers.

Note: sizing and location have to be identical for replacement to be clean. Set your object/component how you want it before Step 1, then copy it.