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.
Tomas As commented
I would call this function DUPLICATE like in layers. Why create new components from scratch, when i could just duplicate one i need to change just a little bit.
For the love of all that is holy, please hear our screams.
Bartłomiej Płoszyński commented
Did you guys find any workaround for that?
Yes, please implement this, Adobe.
Recreating a component is so energy draining when you know a computer should be able to do it for you...
Zigmas Mallol commented
Totally needed guys... The states update was great, and helped a lot... but not being able to do this means we are having lots of trouble modifying those "Very similar" components with states.
Guys, for now, you maybe can do as I do when I've to do many similar components:
1) Take the master component and paste it into a new empty file.
2) On the Assets view, right-click the asset and make it a local component.
3) Paste it back into the original document, that way you can have a duplicate master component ready to be modified and with all the original states.
Also need this - massive pain in the ass having to duplicate effort when it could easily be solved by duplicating an exisiting master.
Josué Sotelo commented
I need this so bad. Would be a time saver
Matt DeMeis commented
Agree! And it's not just buttons. This is essentially keeping me from porting over a UI system from sketch to xd. I can't devote days of time to rebuild every state of every component. That would be bonkers The import works great if you have single state components, but who does that? Until you guys can be resolve that we'll have to stay in Sketch.
This would be soooo helpful. Copying and renaming a master component and then changing it or adding a state is essential. Otherwise you are duplicating work.
Another use case for this is creating a bunch of components which are very similar but just different enough to need to be separate, or when iterating a component. Maybe they have the same states but slightly different layouts. Maybe they have the same layout but you want to create a few different themes. Once you change the color of one of these instances, it may not reliably update without resetting to Master State once it has been altered. Obviously, if it's a whole new color scheme, maybe has some different text, etc, resetting to master state will be very tedious and frustrating.
Martin K. commented
It's helpful if you make a UI Kit with all button states shown for example. For now I have to set all states with every new button component I create (primary, default, flat etc.) by hand.
Yes please! :D
I'm regularly building new design systems and I stumble over this every single time. First I build the basic text input with several states (hover, focus, error/warning/success states, messages, with and without placeholder) and for every other input type I have to rebuild the whole thing from scratch. Search. Dropdown. Number. Datepicker. Every. Single. Component. Variation. Again. And. Again. And. Again.
Btw, I love XD, but it's monday morning and I've got a heck of a week waiting for me and I wish this would be implemented as nicely as the rest
Oftentimes wile modifying a child component I reach a point where it needs to be a new Master component. Depending on the complexity of the component, recreating it as a Master can be taxing.
Right-click on a child component and change it to a new Master component.
Robert Erdt commented
Yes, it's such a pain with large grouped items to have to ungroup, re-group. Please up-vote this feature.
Especially when you have to design many states within states, developers want each component named accordingly, not states. Or you follow a specific design schema, and you have to duplicate each component to meet these requirements, this feature would double the time it takes.
Joshua Cheriyan commented
Yeah I have the same issue when dealing with the complexity of a product sidebar nav that needs to be minified. It's easier to make a separate master component that's the mini version, BUT only if I don't lose all my hooks/hovers.
Justin B. commented
It would be great to have the ability to quickly convert an -instance- of a component into its own -master- component.
Presently, when we copy or duplicate a master component it automatically just creates an instance. There should really be an easier way to convert any instance into a new master instead of having to select the elements of the instance, make it into a new group, and then make the group a new component.
This would save a lot of time if there was merely an option to right-click on an instance and select the "convert to master" option.
Justin B. commented
Agreed. I'd like to have this feature added as well. Presently, when we copy or duplicate a master component it just automatically creates an instance.
It would be great to have a way to duplicate a master component - create a copy within assets panel. If I have a component that has several states and I need to make a dark mode version of that component, I would like to just duplicate that component and make my changes instead of having to recreate it from scratch as a master component.
Gabe Schervish commented
I'm using the new convert sketch library in XD to import all the different libraries i have. While I appreciate the ability to add states, it has one major flaw.
I cannot create a new symbol from an existing symbol that already has the states i want in it.
A good example of this is my button system. See screenshot for how it exists in sketch now.
Basically i have 20 different types of buttons (this is an enterprise design system) each with 2 different sizes (big and small) and each of those button types comes in 5 states:
Default, hover, focus, active, and disabled.
In XD with states right now I imported the buttons in and i have to recreate each of those states for all 40 button types. Each time i create a new symbol i have to add the 5 states manually and type in the titles of those 5 states manually and then copy and past in colors and text styles manually. It's soooooo slow.
I would like the ability to either copy states to new symbol (at least the names maybe) but i would also like to create a new symbol from an existing symbol so that i can even preserve the contents of those states to make the minor tweaks needed for each new symbol.
Again, I feel this is especially relevant to those people who want to convert their design systems to XD. Thanks!