Clone Figma components
Creating a copy of a main component in Figma allows you to experiment with and modify the component without affecting the original. One of the most common use-cases is creating an editable local copy of an external Figma component. Master plugin can help you clone a component quickly.
Create a clone from instances
Since the main component may not always be accessible for copying directly, let’s work with the instances you have access to and want to make changes to.
- Select at least one instance of the component you want to clone.
- Use Master → Create Component from Objects. This will create a new component and attach selected instances.
- If you wish to attach all instances in the file to this new component, deselect everything (press Esc) and run Master → Link Objects to Target component. This will find all the same instances in the file and attach them to the local copy.
Clone external component directly
If you have access to the main component, you can also create a local copy by directly copying it to your file. If it gets pasted as an instance, simply detach it and create a new component. Alternatively you can reset all overrides on an instance, detach it and then create a new component from it.
Follow the next steps to link all instances to this new local copy:
- Select the new component and use the Master → Pick Target Component.
- Select one of the instances or all instances you want to attach and run Master → Link Objects to Target Component function.
- If you wish to attach all instances of the copied component in the file, deselect everything (press Esc) and run Master → Link Objects to Target Component again. This will find all instances of that component in your file and link them to the local copy you've created.
Now you can make modifications to your local copy, without affecting the original main component in the library.
Impact on Design Systems
It's important to note that creating local copies of components and modifying them may lead to inconsistencies and goes against the design systems best practices. Therefore, this should be done mindfully and sparingly. Always consider the potential impact on the overall user experience and maintain a level of consistency with the original design.
However you might not have access to edit the original component, perhaps because it's owned by another team, and asking for necessary changes might take a long time. In such cases, it’s useful to create a local editable copy and modify it as desired. You can use this not only to finish the job quicker, but also as an opportunity to propose changes to the design system.
Overall, if done right, this practice can accelerate the development of the design system or make working with third-party systems easier.
See also
Safely move components between files.
Batch swap all instances of a component in the file.
Made by Gleb Sabirzyanov.
Got questions or ideas? Let's chat: gleb@dominate.design