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 centre 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 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 the first one holding the Shift key I'll click then the second and third. So, with all three artboards selected under Edit. Now, I'm going to click 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 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 that background and I'll change it's colour. 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 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 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 behaviours, associated with a component as though it were any other group in Adobe XD.
I can come in and control the responsive resize behaviours 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 that it centres 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 reuse 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: Organise reusable elements with nested components.
