By Dani Beaumont
Now that we've covered some of the basics around creating and varying a component, let's go a bit further here in Step 02.
I have a header artboard with some master header content here towards the top that I want to apply to the three artboards below. Before I do so, I'm going to come in and open up the Layers panel, and I'll move this content towards the center and just magnify it a bit more so that I can see some of the details. Next, I want to come in and select the component. So I'll click on it and then just come. to Edit in the menu here and select Copy. I want to apply it to the three artboard is below so I'll come in and select those artboards, I'll click on the first one holding the Shift key I'll click on then the second, and third. So, with all three artboards selected under Edit. Now, I'm going to click on Paste. This will paste whatever's on the clipboard in the same X and Y location across all of the artboard is that I have selected.
When I now come in and click on the master component notice it's got that solid diamond in the upper left-hand corner, whereas the instances here on each of the artboard have a hollow triangle, letting me know that they're an instance. From here I'm going to come in and vary some of the attributes with each header area. For the Browse artboard I'll come in and change the title. I'd like to also change the background fill for the header. So I'll click on that background and I'll change it's color. On the second artboard, I'll come in and change the title, but I actually want to align it differently so I'll come in and select that title area and I'm just going to press and drag it to the left-hand side and I'll change the text to be left-aligned and come in and change the name. With that all set, let's go to the last one.
Once again, I'll change the title. But for this one, I actually want to get rid of this closed box on the right-hand side so I'll click on it. and then I'm going to come up just to make sure I have the root level selected there in the Layers panel, and hit the delete button. I also want to change the overall height of the component. So I'll click on it as a whole and I'm just going to press and drag to drag it down. Now one thing you'll notice that's kind of awfully nice is that there are resize rules, or responsive resize behaviors, associated with a component as though it were any other group in Adobe XD.
I can come in and control the responsive resize behaviors so that all of the instances behave the way I'd like them to. I don't need to delete what I've done here on the canvas, I can come back to my master and make the change here. So I'll come on in and check this title text here to begin with. I want to make sure it's a fixed width and height. I also want to make sure that it centers on the object if it's resized, so I'll go ahead and disable that align to top option so that things are in better shape.
With that all set let's take a look in the next step at how I can next components within one another.
Components in Adobe XD are a reusable element, or group of elements that can be reused throughout the design and kept in sync. Each component has a main, or primary component, and the copies of that main component are called instances. Changes made to the main component are synced to all instances, keeping everything up-to-date as changes are made, unless a particular property of an instance is overridden. In this tutorial on components in Adobe XD, Dani Beaumont walks through how to make changes to a main component and have those changes sync to component instances across your Adobe XD project.
Up next, Components Step 03: Organize reusable elements with nested components.
