By Dani Beaumont
In this first step. let's convert a group of objects into a component.
Notice I have two artboards here on the right-hand side — one's called button and the other one is called home. I'm going to click on one of the objects here on the Button artboard, and then here in the lower left-hand corner I'm going to click on the Layers panel so that I can see all of the layers that are on that artboard. I'm going to go ahead now and hold the space bar and just move those artboard back towards the center and then zoom in a bit more tightly. so that I can see the content just a bit better. With that all set now what I want to do is convert all of these objects to a component. I'll come in and select them, so I can just press and drag a marquee to select all three of the objects. From there to convert it as a component I can come under the Object menu and select Make Component. Notice there's a keyboard shortcut there as well — either CMD-k on Mac or CTRL-k on Windows.
Alternatively, I can come here to the Properties Inspector. Notice there's a section for component that I can click the + sign on the right-hand side, or lastly if I come over on the left-hand side and bring up the Assets panel in that Assets panel. There's a component section that also has the + sign. If I click the + sign, XD is going to define a default name for the component. I can always override that by just double-clicking on it here in the Assets panel and giving it a name. We'll call this "button default". And I'll hit return. Notice back here on the design canvas that the group of objects that I selected now have a different selection color than they did when they were just a group of objects. So before they had a highlight color of blue, they now have a green highlight. This indicates that it's a component. Also, in the upper left-hand corner. There's a diamond and it's a solid colored diamond. This lets me know I have a master component selected. I can also confirm this in the Properties Inspector.
Notice that it now says component and then in parentheses, it says master. Now that I have this created, I want to come in and place a few instances of the component here on the second artboard. To do that I have a few choices. I can come to the Assets panel and just press and drag a new instance of that component and then drag it into place. I can also just duplicate from the artboard here on the left or let's say hold the OPT key on Mac, or ALT key on Windows, and then just press and drag that third instance of the button there below the second. One thing you'll notice right now is there's a difference between a master component and an instance. Once again, when I click on the master, I have a solid green diamond when I come to an instance, it has the diamond, but it's hollow in the center. Notice here in the Properties Inspector it lets me know that it's a component and now I'm looking at an instance of that component. From here I can begin to vary some of the attributes within the component.
For example, I might come to this second component and just click on the text. When I double-click I can give this a different name. We'll call this "Plants" and I'll hit escape to step out of that. I can also come into that second button and click on it, and back in the Layers panel get to the background fill for the button. So I'll select the background and apply that color that I see in the Browse example here. To do that I'll type "i" on the keyboard to bring up the eyedropper and just click on that color. If at any time, I don't like some of the changes that I've made to this instance, I don't have to throw it away. I can revert back to the master attributes by bringing up the right menu and in that right menu selecting "Reset to Master State". If I haven't made any changes any overrides I'm not going to see that in the menu, but when I click on it, it's going to revert back to the default state of the component.
Now that we have that all set, let's explore how you can continue to update or vary instances of a component as part of your production process.
Converting elements in your design into components in Adobe XD makes it easy to reuse them and keep all instances in sync as changes are made. Adobe XD components support powerful features like states, and work well with Responsive Resize, Auto-Animate, voice interactions, and more. In this tutorial we'll explore how to convert a group of elements into a component in Adobe XD, and then create instances of that component for use in other areas of the design. Using these components in Adobe XD allows you to begin building a design system, or a component sticker sheet for Adobe XD projects.
