Component Copying & Pasting

#1

Is there a way to copy and paste a component and make changes to it and therefore create a variation of an existing component without the changes impacting the original component?

0 Likes

#2

I’ve used a couple of workarounds for this in the past.

For copying a component and make some changes on it without affecting the other instances, I found out that copying that component to a new Principle file > Change it > Copy it back to working file, works like a charm.

There’s another case though that I found useful when duplicating a component but making small changes on it, such as a button that has all the same effects but has a different text layer.

For this last case, I create the button component without the text label in a separate Principle file, this is only the background with its effects (hover, clicked, etc…), then from out the component, add a text layer on top of our recently created empty button, and make again both of them a new component, this way you will have a nested component containing all the effects underneath the editable text label.

Then from that Principle file, I simply enter the component, change the text label, exit the component, and copy that component to my working file, do I need another button with different text? I go to the other Principle file, edit the text layer there and copy it to my working file.

I call that secondary principle file my ‘playground’ file, is where I have the main instances of my components that may need to be duplicated at some point with small changes.

Remember to always make the changes on your playground file before copying to your working file.

This way you can have 2 buttons with different text layers but same background component.

Editing such background component in your working file will spread across all the instances of that button, while editing the text label, will only affect that instance.

I hope I explained well, here’s an example of it, try entering one of the 2 buttons, and then entering the background component and change it, you will see how it spreads to the other button.

1 Like