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.
Nik Yabo commented
When making buttons it's really annoying that I have to create components for each of the buttons. And especially if it has hover states, I am forced to ungroup component and group it again just so it becomes the "master component"
Hope there's a feature to make instance a "master component" of its own while keeping all the attributes added (hover state and etc).
I'm sure that's not so hard to do right?
The copy/paste into another doc > make local hack mentioned below doesn't work anymore since linked components have been deprecated in favor of shared libraries. 😢 No reason I can think of why this isn't possible yet. I've lost hours and hours of work as a result of this not being possible.
Yes please, we need this feature.
Andy Grooms commented
I've just run into this problem - the lack of the feature described is exactly what is holding me up. Thanks to those who have provided the workaround. This feature would really help speed up my workflow.
Is this on the go to be fixed? This is a dealbreaker. When designing and trying different versions of a component this is crucial. Also please implement the same management of content within components as Sketch! A simple way to win over most Sketch users!
Julie Jacob commented
This is huge. I have a navigational component that I need to use on many pages across multiple prototypes. The navigational component has a variety of states which have varying navigational options. In each prototype, those navigational elements link to various boards unique to that prototype. But without being able to have a local "Main" instance of that navigational component, I can't assign links to those navigational options across the prototype, unless I can plan it out before propagating the component. But even then, if there is a change, I have to go and edit the linkage for EVER SINGLE INSTANCE.
The horror, The horror
The fact that this feature is not yet available is just ridiculous! The worst thing for me is that at work I'm forced to use Adobe XD and every time I need to create buttons with text and icons with the same behavior and same style, the nightmare begin...
Dear Adobe, you know, when a complex component has been created, the basic thing we're expects is to be ables to to replicate this same component behavior and style by changing just the first state on a brand new which it will affects all the other states, you know... just like we already do on the master component, you know??... Hey dear Adobe, we're trying to do some UX/UI with your software, what about give us a decent user experience, would you??
I tried to convince my bosses to change software without success, but If it had been up to me, I would have abandoned Adobe XD a long time ago.
You're just keep adding usefulness features instead of build smart things.
Gavin Stokes commented
Is this sorted yet....sooooooooooooooooooooooooooooo annoying
I am sure having to back track and work backwards on components gets very frustrating for some. It would be nice if a master component is copied and modified there would be a way to make it its own master component. Instead it would need to be ungrouped breaking all the interactions and recreating them all in the new master. This would be not an issue for one simple interaction but when the component has a few complicated ones its gets hard to reproduce.
Best workaround I've come up with:
Copy and paste component to new XD project file.
Copy and paste renamed component back to original XD project file.
Edit new version to taste.
For the record, you can do this in Figma with <ctrl>+D.
It's just that simple.
Duplicate the main component and rename it.
Leo M commented
Making a version of an existing Master-component would be very helpful for A/B testing and other cases when multiple versions of a similar design is required. E.g. a navigation bar with multiple interactive states when a current Master-component is still used across multiple documents and a new master needs to be tested. This will reduce redundancy of re-development of the same component and improve work efficiency.
Mohammad Harb commented
why they don't just add a duplicate main component feature! this issue is frustrating and time consuming.
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.