Artwork by Gleren Meneghin
B
uild out a library of colors, character styles and components that you can use across projects or team members. In this introductory tutorial with Dani Beaumont, you’ll go all the way from your first component to a fully published Creative Cloud Library.
Introduction to components and libraries.
This tutorial guides you through the tools and features you need to create, edit, and reuse components.
Components in Adobe XD consist of text, images, and vector graphics in some combination that can be designed once then used across projects. If the content within a component needs to be updated, you need only make that change on the main component and then choose if you'd like to update all instances of that component throughout your work. In this tutorial, I'll get you started building and customizing components in Adobe XD in a few easy steps. From there, we'll publish those components, along with colors and character styles, as a Creative Cloud Library that you and your team can use across all of your projects. I'll be leveraging some of the skills from the Get started with Adobe XD Design tutorial.
If you haven't watched that already you might want to do so, although it's not required. If you want to follow along with me, you'll want to make sure you have the XD components in libraries practice file open. You can find a link to that in the description area for this video.
With those housekeeping items out of the way, let's go ahead and get started. We'll begin with the process of creating a main component, then reusing it in a design.
Step 01: Create design components.
Convert a group of objects to a component.
Components in Adobe XD offer a handy way to design content once then reuse it throughout your work. They consist of a main component that acts like a parent with instances or children. When you change the main component, those changes apply to all of the instances in your design. If you're following along with me, you'll want to have Step 01: Create design components in the practice file visible on the design canvas. You'll also want the Layers panel open. I opened that up by clicking on the lower left-hand second icon here from the bottom. I also am in Design mode and I control my modes here in the upper left-hand corner. What I want to do is go ahead and hold down the space bar and move these artboards more towards the center, and then using my trackpad, I'll zoom in more tightly so that I can see both of these artboards a bit more clearly on the canvas. For this next bit, you probably just want to watch me for a moment. I want to show you a layout feature that works really well with components that have not explained before, and that's padding.
When you work with padding, it allows you to control how much space a group of objects might have around it. Let's say I'm working on a button design and I have this first button. If I click on it, on the design canvas, you can see in the Layers panel that it's a group I've named Button Group. And in it, I've got a background rectangle. It's basically a rectangle I drew. I rounded the corners and gave it a fill color. Above that, I have a text object that I named Button Label. And I gave it a name: A Button. Those two objects, I grouped together and then I named the group Button Group. If I want to duplicate this button and create a second one with a different label, what I'll do... again, you're just watching me for now... is I'll come on in and select that group and I'm going to press and drag a second copy and then click off on the side. Next, I'll double-click to get inside that label and, let's say I had a longer button name called Add Item to the Shopping Cart. You get the picture, basically. It's starting to not at all fit because the sides of the button are not growing fast enough. Even if I decided to say: Add Item to the Cart, right? I decided to be a little more brief. What you'll notice is the padding on the left and right is dramatically different between the two.
What I can do instead is define padding, which will make the world better. So I'll come on in and I'm going to delete that second button. If you want to follow along with me, let's go on in and select the first button group. I can see it selected there in the Layers panel. To press and drag a copy, I'm going to hold the Shift key, on Mac, I'm going to hold down Option. On Windows, I'm going to hold the Alt key and I'm just going to press and drag a second copy. Let go of that copy and then let go of the keyboard command keys that I had held down when I duplicated it. What I want to do is make sure, I'm forgetting now, I want to make sure that both of these have padding defined. So I can always come in and select both of them. Here in the Properties Inspector, in the Layout area towards the bottom, I'm going to click on Padding. Notice that it automatically creates some values here for that padding. If I want to click on one of the buttons and then click on that padding value. It's very subtle, especially when you have an orange button, but notice that I have a padding value here of 15 pixels... and on the actual object, I can see that padding area. If I type Tab on the keyboard, it's going to tab to the next field that shows me padding to the right, padding to the bottom, and then padding to the left. That's pretty terrific.
With that padding in place, I can now come to the second button. I'll double-click on the label, double-click one more time to select that title, and we'll add that longer title. So Add Item to the Cart. And then I will click off. So it behaves the way I would like it to. I now have consistent padding on the left and right to match my original object there towards the top. Okay, now that we understand padding, I'm going to go ahead and move over to the second artboard and I'm going to make it much larger so I can see all of the content. When I'm ready to convert my content to a component, what I want to do is make sure that I have all of that content gathered together. If I've not saved it into a group, the act of saving it as a component will, by default, put it into a group. I've got the group already defined, it's called Button group. I'm going to give this a better name because when I convert to a component, it's going to pick up whatever the name of the group is or put some default name. We'll call this Main button... no, we'll call this Primary button. And I'll hit Return there in the Layers panel.
Next, with that group selected, I'm ready to convert it to a component. I can do that in a number of ways. If I right-click in the right menu, I have Make Component. And there towards the right you can see there's a keyboard shortcut: Command+K. I'm going to go ahead and select in that way. What you'll notice is, on the design canvas, the blue selection color is now a green selection color. That's one visual indicator I get that I'm working with a component, and not a group of objects. I also get a diamond in the upper left-hand corner and that allows me to understand what type of component I have. A filled-in diamond means it's a main component.
Now, when I'm ready to duplicate this, down the way here, I have a few choices in doing that. Let's go ahead and switch over in the panels here on the left-hand side to the Document Assets panel. So the Libraries panel just above the Layers panel. I'm going to click that icon and then here in that Document Asset area, you'll notice towards the top in the Components area, I have something that I've named Primary button. That's the one that we just created. I have other components that we're going to use later on in this tutorial. But any new component will automatically be added to the top of the stack there.
When I want to bring out instances of the component, I can do that in a couple of ways. One is just drag it out. So maybe the first time I'm using it, I'll drag it out of my component area there. When I drag it on the canvas, I can tell that it is a component because it's still green, but I can tell it's a component instance that has had no variances defined to it because I have a diamond that's hollow. Another way I can always duplicate, is to just come to that main component and press and drag a duplicate, the way we did earlier. That's going to work. Whatever my preference is, I'll drag off three of these buttons and I want to design them, pretty much to look like the three examples here on the right. I'm going to go ahead and do that. You're welcome to play as well and change this in different ways.
Now that I have those changes made, let's take a look at what happened to my various instances as I made those changes. As you'll remember, this first button, I just dragged out of the panel in the Document Asset area, and I get a hollow diamond. The one below it, I duplicated it, then I gave it its own shadow. When I click on that, I've got a hollow diamond with a dot in the middle. Yes, that indicates that I've overridden something. If I go to the third, I've got hollow diamond dot in the middle because I changed some aspects of it. Let's say from here, I want to come in and start making some additional changes. So for this second button, let's give it a much shorter name. I'll go ahead and call it Exit. So I now have a label change. I have a style change, the appearance of the container. I've got strokes. I've got fill colors. If, down the road as I'm working, I realize: Oh my gosh, I've got this huge spacing on either side of my buttons and as the button gets bigger, it's starting to look awful in the design. Rather than go back to every single instance in my design, I can go back to my main button and make that change. So if I click on it to select it, come back into the Properties Inspector into that padding area. Let's say, maybe I want the left and right, instead of 58, to be more like 25 pixels. I'll change it on the left. And hitting the Tab key here, change it on the right. And I now have a button that has much smaller padding on the left and right. That was probably a little too extreme, but notice that the instance has retained their changes. So any label change that I made, any color fill changes, those were retained. But the width of the background fill, where the padding values, is something that shoots across all of the instances.
Alright, a very simple example; we're going to now build on that in the next step of this tutorial.
Step 02: Vary component instances.
Vary multiple instances of a component on the design canvas.
In this next step, let's go ahead and play a little bit more with main components and varying their instances. If you want to follow along with me, you'll want to have Step 02: Vary component instances in the practice file visible on the canvas. You'll want to have the Layers panel open. I did so by clicking here in the lower left-hand corner on the Layers icon and I'm in Design mode here in the upper left. I want to focus on these three artboards on the right. So I'm going to select them and then hit Command on the Mac or Control on Windows + 3 so that I can bring those in to view.
Alright, I have a design here. And what I want to do is have this top navigation reoccur on the two additional artboards, but I don't want them to remain exactly the same. I'd like to define it as a component so that I can keep some of the elements consistent while making those changes. When I click on this first artboard here in that header area, I can see that I have a component defined and it's a main component. I can tell by the green highlight and the diamond in the upper left-hand corner. It's called Nav-Mobile-Top. Looks good. What I want to do is duplicate it or create instances for these second two artboards. For that, I'll make sure I have that first component selected on the canvas and, in the right menu, I'll just copy it to the clipboard. XD supports paste in place from one artboard to another, if you select the destination artboards by their title. So I'll come in and select the second. I'll hold the Shift key and select the third artboard. Now, in the right menu, once again, I can just select Paste and they'll paste in the right location. So by definition now, I've got a main component with the filled-in diamond. I've got an instance with a hollow diamond and another instance here.
I'm going to go ahead now and make again a few arbitrary changes to my design. So in the second version, let's assume for this background fill, I'm just going to grab the Eyedropper tool. So if I type the letter I on the keyboard, it's going to bring up that eyedropper. I'll make a scary change here and grab one of the shades of yellow from my beautiful chair. Not that shade! And then in the fill color, I'll go ahead and adjust that a bit, so it's a little more attractive but I've got this very heavy yellow header. Oh my goodness. Let's try that . . . lovely.
For the second example, I may want to use this main component but perhaps I want less of the details. I don't want a shopping cart visible on this one. So I'll click inside this instance and I'll go ahead and double-click inside of that. I can select the Ico Bag here in the Layers panel if I prefer, but I want to select it and then type Delete on the keyboard to make it go away. I'll go back and grab that little dot that was next to it. So, Ellipse 76 and delete it. Another thing I'd like to do is, come to this first example. I'm going to double-click to select the label and I'll go ahead and just drag it over here towards the left-hand side and then click off.
Now that I've done that work, if there's any global change that I'd like to make . . . let's assume for a moment, I think that the content that I have here is a little close to the bottom of my top-level navigation area. I can come in and double-click to select that background fill on that first artboard, and I'm just going to sort of press and drag to make it taller. Notice that that change is propagating. It's happening to all instances, even when I change the background fill when I deleted content. I can add content if I want to as well. I could change this to a different icon. It's still going to have that real intelligent relationship between the main component and its instances. If at any time, I feel I've made a fundamental mistake, which is quite possible, rather than have to start over and grab that main component and duplicate it, I can come to any instance on the canvas. Notice that it's been altered; it's got a diamond that is hollow with a dot in the center. If I right-click on that instance of the main component, notice that in the menu here, I have the ability to Reset to Main State. If I select that, it's going to revert all of the content to that main example.
Okay, now that we understand what a component is and how to vary its instances, let's go a bit further with nesting and swapping components in the next step.
Step 03: Nest and swap components.
Nest components within one another, then swap them for easy maintenance of your design.
In addition to adding and removing objects within a component, you can also nest them inside of one another and swap them out for one another quite easily. If you're following along with me, you'll want to be in Step 03: Nest and swap components within the practice file. You're going to also want to have the Library panel open. I'll go ahead and switch over to the Library panel. I can do that by clicking here in the lower left-hand corner, not on the Layers icon, but the one just above it, which is the Libraries icon. That's going to bring up that Libraries panel and bring me into the Document Assets area. With that all set, I want to focus on the three artboards here in this section. So I'll come in and select them and I'll bring them into view so that I can see them a bit more clearly.
Okay, in this step we're going to do two things. One is, I'm going to show you how you can nest components inside of one another. And then the second is, we're going to swap some components out for one another after we've done that. I do want to say that I'm starting to assume you've got some pretty good skills from some of the other tutorials that we've done during this course. So I'm going to leverage some of those skills for things like Repeat Grid as we proceed in this step. Okay, so I'm going to zoom in even tighter so I can see what I got going on here. Up here towards the top, I have some examples of content. These examples, if I press and drag across them, what you'll notice is they have a green highlight color here in this area. These are all converted to components. I did that earlier when I prepared this file. To the right here, I have just a label Chair. It's just a text field. I've not converted that to anything. What I want to do is match the design I have here on the left with this menu drawer example on the right. This is basically the menu we used earlier when we were showing how to use overlays. As I build this up, as I mentioned, I'm going to use a combination of capabilities.
So when I nest components, I, in essence, put a component inside of a group and then I save that group out as a component in its own right. So if I'm building out this menu here on the left, one way I can do that easily will be to nest components inside of one another. So what I'll do is come in and try to match this first example, where I have a component to the left and a label to the right. I'll come here in this first artboard and, if you want to follow along with me, you can do the same. And I'm going to grab this Chair component right here, and I'm going to go ahead and hold down the Shift key and then Option on the Mac or Alt on Windows, and I'm going to press and drag a copy of that chair here to the side. And I want to kind of get away from the word chair. So I've just duplicated that chair next to the label. Now I'm going to select the label and I'll select that icon that I just duplicated. With the two objects selected in the Properties Inspector in this upper area, I'll go ahead and center them horizontally... looks pretty good. I'll click off and I'm going to move chair over just a little bit more to the right. So I use the keyboard right arrow once I selected that, to move it a few pixels over. I now have a component and a label and I like the way they look. What I want to do is convert them as a component so that I can reuse them as a set. For that, I'll come in and select the two objects. I'm going to go ahead and group them. So if I right-click here, I'm going to select Group. And I'll go ahead and go into the Layers panel, so lower-left corner, click on Layers panel. You can see it assigns a very random group name. I want to come in and override that, so I'll double-click on that default name. Let's try that one more time. Double-click right on the name and I'm going to call this Menu Item Lockup. And I'll hit Return. Now that I have that group well-named, I'll come to the right menu and I'm going to convert it as a component: Make Component. I can see that it's a component because it's got that solid diamond. Now when I come back over in the panels here on the lower left, come back to the Libraries panel. I see at the top of my components section there's my new Menu Item Lockup. Perfect.
What I want to do next now is bring it down into my design here and start working with it. So I'll go ahead and stick with this main component. It could be an instance but main is pretty good. And I'll get it into position here. Now that I see it in context with the example above, I'll probably double-click on the title Chairs and, using that keyboard arrow, the right arrow, I'll go ahead and move it out just a couple of pixels so it lines up a bit better. Well, now that I have that individual label set, I want to duplicate it down the page. The fastest way to do that, usually, depending on what I got going on, is using Repeat Grid. So I'll come in and select that component that I defined. In the Properties Inspector, I'm going to click on Repeat Grid to enable that. Notice I get the handles on the right and below. I want to press and drag until I have four items. They're not exactly lined up top to bottom, so let me check that real quickly. I've got the ability to pull guides here. Let's just see this measurement. That's hitting about a hundred and twenty and I want to bring it down to that same position. So, let's say 120. And now I'll go ahead and move this object down. I can hide those guides or just drag them back off when I'm done. That looks pretty good. I want to also line up the bottoms a bit. So I think I need this to be about there, give that as a guide. When I come back to my Repeat Grid, remember that I can come in and change the spacing between items by just rolling over the grid until I see that pink highlight, and I can press and drag to extend that out so it's a bit taller. That looks pretty good. I'll go ahead and get rid of my guide.
At this point, I'm ready to start varying things. So there's a couple of ways I could do that. What I want to do is just go ahead and break apart this grid and start to make some changes. So with it selected here in the Properties Inspector, I'm going to ungroup the grid. When I do so, I still have those individual instances of components. I just sort of bulk-processed, or made a list very quickly using that Repeat Grid feature. I want to come in now and change out the labels. So for that, I'll double-click on the object, double-click a second time to select the text and I'll change that out. I'll do that for the additional items as well.
Great, that looks pretty good. So at this point, I have a nice list, but my icons are all the same. One of the features XD offers is the ability to swap components once you've placed a component within a group. For that, I'm going to go ahead and move up so I can see things a bit more clearly. As I mentioned, I've placed the components for the icons here towards the top. They're in this top artboard, but they're also here in the library here towards the left. When you're swapping components for one another, you have to drag the component out of the library onto the component that you're changing, in order for it to work. So for Sofas here, I want to have the Sofa icon instead of the Chair. With it selected, I'll come here in the component area and I'm going to press and drag another icon, the Sofa icon. Now as I do so, notice when I get on top of the selected component, it highlights in blue. That allows me to then release and replace that icon, one with another. Pretty slick. I'll go ahead and do that a couple more times. We'll grab the table, replace it and for lighting, I want to do it one more time as well.
Terrific. Now, the good news is, because these are instances of a main component... remember how we made this a main component and then we duplicated down the canvas? Because they are instances, I can go back to the main component and make global changes. So if I want to get back to that main component, notice that this one's an instance too... I've kind of lost track of where the main one went, to be honest. What I'll do is go ahead and move this up on the canvas just a bit more. And then, I'm going to right-click and in the menu, I want to find that main component. If it's anywhere on the design canvas XD's going to take me there. If it got deleted from the design canvas, XD is going to create a new one that I can work with. When I click on Edit Main Component... indeed I must have deleted it along the way. So it's just created another one for me. I want to come here to that main component and just make a change to it. So I can do it up here in the corner. I'm feeling like the space is too great between the icon and the label. Because I nested the component inside of a parent component, I still have the ability to make that global change. So I'm going to click on the label here, make sure it's selected, and again, I'll use the keyboard arrow keys to make a subtle spacing change. I'm just going to move it to the left. Notice on the design canvas how the changes that I'm making to the left and right here are propagating to all instances of that component, even though I've gone in and changed the other component that was nested alongside of the label.
With that all set, in the next step, what we're going to do is look at how we can publish up all of our colors, character styles, and components as a Creative Cloud Library.
Step 04: Publish a library
Select from shared Creative Cloud libraries, add them to your design, and revise the original in the cloud.
As you work more and more in Adobe XD, I think you'll find there are colors, character styles, and common components that you use over and over from project to project. Libraries and the Creative Cloud make it very easy to publish this content so that it's easily available for reuse. If you're following along with me, you'll want to have Step 04: Publish a library in the practice file visible on the design canvas. You'll also want to switch over to the Libraries panel on the left-hand side. So, to do that, I'm going to come here into the lower-left and instead of the Layers panel, I'll select the Libraries panel just above it. I can see here towards the top that I'm in the Document Assets area of the Libraries panel.
Next up, what I want to do is focus on these three artboards here towards the side. So, I'll come in and select them and I'll bring them into view by scaling to fit them on the design canvas. Now, in an earlier tutorial during this Getting started series, I showed you how to extract character styles and colors. I want to include those as part of the library we're going to publish. So to do that, here in the Document Asset section, I see I have no colors and no character styles that have already been created. I want to add some in. And the quickest way to do that will be to click on the title of this artboard Typography, then in the panel in that Character Styles area on the right-hand side, I'm just going to click the plus sign. XD extracts all of those character styles and defines them for me here. I want to do the same with the Color artboard. So I'll come click on its title, and in the Color section of the panel, click on the plus sign. And I bring those colors over.
Now that I have the colors and character styles set, let's just kind of revisit how you add components. If I look here at this third artboard. I'll select it and zoom in on that content. When I come in and look at these objects, if I just press and drag, I can see they're all groups of objects with background containers and such. They've not been converted yet to components. If I click on one of them, let's say this Menu Icon, and then take a look in the Layers panel, it's been defined as a group and it's got a nice label to it. So I'm just going to come on in and convert each of those to a component. With the object selected, as you know, I can come to the right menu and do it that way... but for speed's sake I'm going to go ahead and use a keyboard shortcut. So with it selected, I'm going to hold down the Command key on the Mac, or Control on Windows, and type the letter K. You can see in the Layers panel that I have now converted that to a component because the icon changed from a folder to the diamond that indicates that it's a component. I'll do that a few more times. I'll click on the Sofa example here, Command+K. I'll do it with the Table. And one more time for the Light. So effectively, I've converted those to components. If I switch back now to the Libraries panel by clicking on that icon, here towards the top, I can see that I've added those components into the library here as well.
With that all set, I'm now ready to publish my library out as a Creative Cloud document. This will allow me to access it from anywhere from home, from work. It will also allow me to share it with other people on my team that I might want to grant access to. So for that, what I want to do is, here in the Document Assets area, notice on the upper right-hand corner, there's an icon with an up arrow. That is the way that I publish out a library. So I'm going to come in and click on that icon. This opens up the Libraries Manager. In it, I can see my current file. This is the name of the document I have open, so Adobe_XD_CompLib_v3.8 and I have a Publish button there towards the right. Notice below, I also have libraries that either I created and published in the past, or that someone else created and then shared with me. So this Coffee_Shop_UI_Kit is an example of one that my teammate made and shared with me. When I publish up the library, I can choose the rights that I want to give to anyone that I share that library with. Let's go ahead and publish it up. So on the right-hand side, I'm going to click the Publish button. Now, in order for that library to be available to me and available to my other colleagues, I need to publish it as a cloud document. I'm going to go ahead and click the Continue button and then I'm asked to give it a name. Let's go ahead and rename it the Altura_Brand_Kit. Next, I'm ready to go ahead and save that out. So here on the right-hand side, I'll click on Save. XD is going to bring up that Library Manager and begin saving it up as a cloud document. Once that's been saved and published up as a library, I have the ability to choose to share that library with other people. So, as I mentioned, I can control whether or not those people can only view the library, or consume it without making changes, or actually come on in and edit the original design. I'll enable Edit because I have a colleague that also does interface design work with me. I want to let him be able to come in and make changes to the source. So I'll go ahead and invite him using his Adobe ID. So my colleague Ike. And I'll go ahead and invite him. He'll receive a notification in his email. He'll also get a notification in his Creative Cloud document that that library has been shared with him. And when he opens up the Libraries Manager, this interface, he'll see it as an option to come and engage with here in the library's area below.
In the next step, let's go ahead and look at how you go and browse libraries that have been shared with you by other people.
Step 05: Browse a library
Select from shared Creative Cloud libraries, add them to your design, and revise the original in the cloud.
Earlier on I published up a library and I shared it with my colleague, Ike. Let's go ahead now and create a new document and see what it's like to consume from that library. For that, I'm going to pull down under File > New and I'm just going to create a new blank document. I'll put that into position here. And let's go ahead and add a couple of artboards, so we have a place to add our content. Brand new document; no content really included in it at the moment.
What I want to do is, go in and browse a pre-existing library that's been shared with me. The way I'll do that is, I'll make sure I have the Libraries panel open. I can see that it's open here on the left-hand side. As I look up, I notice that I have no colors, character styles, or components in this current document. Notice that it's indicating that I'm in the current document here. If I click this left arrow, it takes me up a level and it allows me to see all of the libraries, either ones I've created, that Altura_Brand_Kit that I created or that have been shared with me by other folks, like this Coffee_Shop_UI_Kit. I can come in and manage whether or not I see those libraries persistently, across new documents or not, by going into the Libraries Manager. To do that, I'll come here in the upper right-hand corner and click that plus sign which brings up this Libraries Manager interface. And in it, I see my current document here towards the top and below, I see any that I might have shared with other folks -- like this Altura_Brand_Kit that I shared with Ike and others that were shared with me. I can toggle those on and off. So, if I don't need to use some of the libraries all the time, I might go ahead and turn them off here. This will disable them here in this left panel, as you're seeing. I'll stick right now with some Adobe color swatches and the Altura_Brand_Kit, that's that shared library. I'll go ahead and close out the Libraries Manager and, here in the Libraries panel, I'm going to switch over to that Altura_Brand_Kit. There's all the colors, character styles, and components that were defined and shared up to that library.
As I'm working, let's just go ahead and start to drag some of these components onto the canvas. I'm going to try to put together a bit of a random set. I'll bring over a tile that I defined earlier. Notice in the upper left-hand corner, instead of a diamond, I get a circle with a link icon. This lets me know that yes, it's a component, the color is green, but it's a linked component that's part of a cloud library. I'm going to keep on working here and just bring over some random objects. I'll also come in and create a few containers to include some of the colors that we're working with. So I'll come on up here and let's just add the color to some of those... I'll do just a few, with my favorite shade of orange and the peach color. If I don't like one of the components that I'm working with -- so I realize, these things don't look so great -- and I want to make a change to the shared library that both Ike and I can access, I can come into any component that I've dragged onto the canvas and, if I right click on it, I have the ability to edit the main component the way we've had in the past. But notice that this lets me know that I'm editing that main component in the source document. That means it's going to open up that cloud version and allow me to make those changes there. If I select that, XD is going to go and find the document for me in the cloud and open it up here on my machine. I can now come into that element, let's say this Ico-Heart, and change it. If I select Edit Main Component and then find it there on the desktop, I can come in and decide that this really needs to be a happy heart with some terrific colors. So, I'll select that heart and I'll change it to a very ruby red. Notice that I get an indicator here towards the bottom that I should update my published library. So I'm now able to make the change to this component in the cloud library. Right? I've gone in and said I think that should be a red heart. I think it's beautiful.
To go ahead and save this change to the cloud library, I'll come to the Libraries panel. Notice, in the upper right-hand corner, there's a blue dot. That's letting me know that something about what I've done in this project has changed the original version in the library. If I click on that icon here within the Libraries Manager, I can come in and update the brand kit that I've already published up to the cloud. Very quickly, that makes that change in the cloud document. I'll go ahead and close out that Libraries Manager.
Now that I've made that change to my cloud library, I can switch back over to my working document. For that, I'll pull down under Window and go to that working document. Now, as I work, if I'm using a component that's been updated in the cloud, I get an indication that that's true. Here in the lower left-hand corner, notice that my Library panel is letting me know, it's giving me a blue alert, that there's been a change. Actually, here on the design canvas, if I click on a component that's been updated in the cloud since I started working with it, I can see that, with the blue indicator here, as well. What I want to do is go ahead and take a look at that library. So I'm going to come into the Document Assets area and, here in the list, I can see the two components that were changed in the cloud library version. As a designer, I may or may not want to accept that change. So I can actually hover over that little indicator that the change has been made... and notice as I hover, I get a preview of the change, both in the Components area here and on the design canvas. From there, I can choose to just change individual components to reflect the update... or if I want to, I can update all changes throughout my current document and it's going to revise those, both here in the Components area and on the design canvas,
So with that, we've completed the last step in the Adobe XD Get started with components and libraries tutorial. If you'd like to, you can join me in the next tutorial which is focused on collaboration.
What’s next
