Hello! I have a question, I create a design system in one page with their components and instances but I need to copy and paste that page to create different versions on the same one, the problem is that when I paste the page, the components become instances and the instances keep atached to the original page components, so Is there a way to have a copy of that design system that works without the original?
#Can someone help me with a components-instances question?
heavy token
pearl furnace
Are you meaning the components from the design system, or is the issue with a design file (screens, etc).
If you are just looking to make a new Design System Lib file you can either copy each component (not instance) from that Design System file and paste them into a new file. They will stay components. You can then edit these as you like. Name the file to something different and publish that lib. They wont be connected.
Or, another method I tested which worked was just duplicating the DS Lib file, editing as desired, publishing, and again new DS Lib with components.
If I understood you correctly.
In my testing of these just now, the components stayed components when copy/pasting. As long as I renamed the file before publishing they stayed components and were not connected to their original source file.
One thing I am curious on, when ou say this " I create a design system in one page with their components and instances " are you meaning components and variants? Because if youre copy/pasting instances then this is why you are having the issue you are.
But if you are copy/pasting components and their variants (inside the main component) then there are no issues (at least when I replicate).
heavy token
Hii Sean, thanks for answer me, I tried to do that but when I copy a component and then I pasted it, the component become an instance, that is one of the problem. About your question, I refer to copy/paste components and instances, imagine you have in one page a complex system of component with their instances attached etc, I want to duplicate that page to have another extact system but when I do it the instances works with the original components not with the components of the same page, ahahha I know it's complicated to explane and confusing sorry
I found a plugin that is called pageclone that allows me to duplicate a page and the components don't become instances, that is cool, but I still have the problem that the new instances works with the original components and don't with the new ones
pearl furnace
But maybe I am not understanding something correctly. You are making components and then wanting to use an instance of them to work the same as the originals, but not make a new lib?
So like just use one component across say 5 files for example, and change the colors and what not? But keep them all "connected" to the one original DS?
Is that the correct end result assumption I have made? To one have "MAster DS File" and then you just use those components across various new files, but change certain aspects to the components instances (color)?
In my testing, I was able to copy/paste components and make a new lib no problem. But yes instances, woudl not work for this. But if you are wanting to just chnage minor things (like color) to the instances that can be done. And fi you are wanting to make bigger changes (icons, type, etc) that can also be done via Component props and override DS Libs.
Maybe read this thread from earlier on I helped someone out with. It may be the answer. And I have some video examples in there too
https://discord.com/channels/675194100147945497/1172518039678361682
heavy token
I understand what you mean but the thing is that I don't want to have any conection between the DS I duplicate with the original
I want same DS but independient each others
pearl furnace
So 2 DS Lib files
I think I do understand what you mean, but I am not sure why its not working. I have a very complex DS File, and I simply duplicated it and was able to make a new one from it. No connection to the first one.
But I dont have instances in my DS File. I have components and in each component I have Variants (Ex: Button component: Default, Hover, Pressed, etc, Variants)
heavy token
yees the problem is the instances ahahah
pearl furnace
copy/pasting or duplicating works fine and there is no connection from the original
pearl furnace
yees the problem is the instances ahahah
Ah ok, then yeah, that will be an issue. Use Variants and not instances
heavy token
mmm and I can replace the instances for variants? I have to try that
pearl furnace
Here check this out
I made a component (we can say its a button), then made variants. Copy/Pasted to a new file and changed them and you can see no connection
This works wether published as lib or not
heavy token
aaah no but you understand to duplicating in a new file, I mean to duplicate in a new "page"
pearl furnace
Ohhhhhhhh
heavy token
wait maybe I can show you to understand it better
pearl furnace
Hmmm it still works for me
And when I pull instances from each "Button" on each Page, and change to differant variants, they work fine and are not "connected" to each other.
heavy token
how you put here videos ajajja I want to show you the screenvideo i made
heavy token
And when I pull instances from each "Button" on each Page, and change to differa...
This is cool but Idk if it works for the DS I'm doing
pearl furnace
how you put here videos ajajja I want to show you the screenvideo i made
You have to become verified I think
https://discord.com/channels/675194100147945497/888176421455929434
heavy token
ups okay
pearl furnace
This is cool but Idk if it works for the DS I'm doing
Hmm ok. I am curious on your DS then haha. I have a complex one with abour 20 components and just tested it same as in my above video and it worked fine.
But again, I am using Components with Variants.
heavy token
pearl furnace
Ok that is weird. Hmmmmm
Cause as you saw in my video, I did it just fine form one page to another.
heavy token
but that are variants
so that means taht just I have to use variants instead of instances
pearl furnace
Ok so....
I just tried as you did in your video and....
If I have a component but ONLY 1 in it as you show, and copy/paste or duplicate, then yes it auto keeps it as an instance in the new page.
BUT....if I add a variant to it, and copy/paste or dup the page, there is no connection and it becomes a new component.
heavy token
aaah yes
pearl furnace
So in your case, if you are just needed one content image screen, maybe just make a variant of it that you will never use, or maybe make a variant that would be of use for you.
becuase then you can copy/paste/dup as much as you want
pearl furnace
No worries at all. Happy we got it all figured out
heavy token
yeah thanks again!!