Create new main component from existing component
After releasing "State" feature, it's been able to prepare complex interactions like "hover." Following feature may help to reduce required time preparing a new component with similar behaviors/instructions.
New component with state settings every time when a similar behavior is expected in different look and feel.
(Currently, preparing another XD file is believed to be the only solution to avoid this by selecting "Make it as local component" after loading it from another XD file.")
By select "Use it as a new Master Component" is to make a new Master component instead of copying it as an instance component.
◆ Why is this valuable to you?
When using a single, new XD file and load a master component from other XD files, it is possible to make it "local component"; however, it is unable to make it happen within the same XD file.
This helps to reduce time to prepare a set of basic state setting from the beginning each time. This also helps NOT to get affected unconsciously on the new component by editing the template master component by someone else.
Since Co-Editing feature is now beta version, some larger project may have a couple of co-editors of components on the same XD file in the future. While a group of designers keeps upgrading a basic behaviors for future use, another group of designers is working on on-going project to finalize a specific look and feel based on the template component.
This issue has plagued me for the last year. I've wasted so much time redoing work. Please address this.
Jacob Jensen commented
Requested feature for years. This would be so useful. I wonder if it's possible to write a plugin that does this, or maybe just a script.
XD seems great on the surface, but as soon as you start getting into a bit more complex projects, it falls short on so many levels.
How in the world is this not basic functionality by now?
The post from @DHo perfect summarizes what should happen. Again, this is super basic for any prototyping or design program that uses components, symbols, etc....
Just to clarify what I expect this to do.
- Select an existing master component (eg a button with several states)
- Create a copy of that component as a new component (eg button with leading icon)
- All states are retained in the copied component and I can edit the new version
This would make creating variations of a primary component a breeze. Alas …
Today I have to
- Create an instance of the component
- Ungroup it (which really means unlink and ungroup, btw)
- Regroup the elements
- Turn that into a new component
- Make my small tweak
- Recreate all the states
I could also copy it to another doc, make it local there, rename and modify it, and copy it back in.
In either case, the workaround is absurd.
As has always been typical of Adobe products, Components persist as an abandoned feature while Adobe sends it's product dev team on tangents to create features to support marketing headlines.
Andrés Sanz commented
Sometimes I want to create a different version of a component and need to be able to duplicate one and make it the parent component of another component branch.
Let me explain, I am with a primary button component, and I have already created the default, hover, pressed and disabled version. And I want to create the minor version of this button that changes in few things, but I don't want to have to repeat all the buttons one by one with all their versions ...
Rolv Skjærpe commented
Please, can we have this?
I need to add a new state to one instance of a component, but I don't want to add this new state to the master component, but Adobe XD requires me to edit the master component for this update. So now, I have to rebuild a complex component for a single use - which seems unnecessary.
Please can we add this? I've spent days worth of time recreating stuff when this "feature" could have made it possible within seconds. Making component variations is an EXTREMELY common use case.
Mark Ocampo commented
Not being able to duplicate components without it being an instance is severely affecting the user experience and workflow negatively
Anyone could explain it in simple words?
Let’s assume a scenario where the Main Component needs a variation that still retains the “one-to-many” quality of children inheriting properties but doesn’t affect any existing child components. To create a new parent component hierarchy, an instanced component must be ungrouped and rebuilt from scratch. Ungrouping components will also lose all the states and transition properties set up in Prototype mode. Here’s a workaround:
Clone an instance of the component for each state in the component.
Set each instance’s state to a different state.
Go through and ungroup each component instance.
Start making desired tweaks and changes to each component instance.
Recreate the new Main Component.
What does it mean by " making a component local to the file and rename ".
This should've been part of the initial release seeing how much time you already save when using components. Having to recreate a component (not to mention its states) is a waste of time when you could easily "set instance as new master component" or "create master component from this instance" when working with components...
This needs to be added ASAP!
It's confusing as to why this isn't a feature. In fact it's frustrating. I need to create a component with multiple states, that behaves the exact same way as another component, except the state images are different. Rather than Right Click > Duplicate, and letting me swap out the image. I have to recreate the entire component.
If you're reading this you're saying "no you don't, just copy it to a new file, make local, make edits, copy back to original file." @Ini Nya-Etok
Well that no longer works, as they've switched to published libraries. When you copy a component you get the red link icon, and there's no option to make it local anymore.
I know as professionals, we try to keep things cordial here, but this is ridiculous, the amount of time wasted, because they can't add a simple feature we've been complaining about for ages. I mean come on!
Thank you @Ini Nya-Etok
This helped a lot.
I tried Ini Nya-Etok's workaround and it works. Thanks!
What is going on here? I am SOOOOO tired of making new component -> stack, padding, fill color, states upon states all over again again and again.
1 component done -> Dublicate and change what needs to be changed. voila!
Once this feature hits I will have to redo + 100 components from scratch, again :/
Ini Nya-Etok commented
Tried Vlad's workaround and I think you may have missed a step? Try this:
1. Copy main
2. Paste in new file
3. Make local in new file
4. Right click component in new file and select "Edit main component"
5. Rename Main in new file
6. Copy Main component from new file
7. Paste the copied component in original file (appears as an instance)
8. Right click the pasted instance and select "Edit main component"
9. Make Main component local in original file
Hope this helps in the meantime. But PLEASE guys create a simple duplicate component function, this is such an avoidable workaround.
Desperately need this.
Tried Vlad's workaround but I am skeptical, because the component still says "Instance." Shouldn't it be a main component now since it's unlinked from the previous? Where is this one's "Main?" -- If I paste it in a new document, it is then linked to this instance which I had made Local. So this Instance is acting like a Main for its future instances. The actual MAIN is my original.
This is SO confusing. I'm still concerned that something will get overridden at some point.
disappointed again. Really need to recreate the same appearence component from zero because I cannot transform into main component again.
Nándor János Danyi commented
+10000 votes for this feature.
Everything on the asset panel should be duplicatable and mergeable.