By Dani Beaumont
In Adobe XD, you can design thousands of screens across dozens of projects. But if you can't stay organized as you scale, your productivity can really suffer. The Libraries panel in Adobe XD includes quite a few powerful features for organizing assets that you might not be aware of. In this video, I'll show you how to harness that power in just a few easy steps.
When I come in and open up the Libraries panel by clicking on the icon here in the lower left-hand side of the application, you can see that I've already come in and defined a set of colors, character styles, and components. My list of components is quite long, pretty typical for a UI kit. As I come back here towards the top, you can see I've already added a friendly name for my colors and character styles. And I did that by just double-clicking on the default color hex value and typing in the name I wanted to use.
One handy way to organize the content is, instead of going with the default list, which lists all of the items in the panel, in the order that I added them, I can come to the Sort Order drop-down and, instead Sort by Name. That's going to sort everything in this panel alphabetically. So notice, my character styles are alphabetical now, my colors are, and my components. That helps a little bit.
I still have a lot of components to deal with. So let's focus on that a little bit more. One quick way to organize a big list of items is to go ahead and put them in subgroups. And I like to use a combination actually of the Search field here and the Filter field towards the top as I do this. So I'm going to come into the Search Document Assets area and, notice in the drop-down, I can search across my current document or actually search across all libraries I may have opened up in the Library Manager panel. I'm going to limit it to this current document, and I'll go ahead and search for icons. So as I type in that name, I get a list of all the icons in the document. Here towards the left is a filter option. If the word icon appeared in the colors or character styles, I'd have the choice to filter them out here. For now, I'll just stick with components. And when I click off, I now have just icons that are components.
Next, what I want to do is actually collect them into a subgroup. So I'm going to scroll towards the top, select the first icon, and then hold the Shift key and go all the way down to select the last one. With that set selected in the right menu, I'm going to select New Group From Selection, and I'll give it the name: Icons. I can roll that up, or hide the content within it, and see what remains of my components. I'll go ahead and do that same behavior for buttons... so I'll select those. I don't really need to change my filter there. I'll create a new group and call them Buttons. And I can leave the rest at the root at this point. Actually, let's go in and create a folder for Logos. Let's assume I actually forget one of them as I do this. I'm going to select just three, create a new group, call it Logos. If, down the road, I add another logo, or realize that I forgot one, I can always press and drag it into the folder that I created. XD supports an unlimited set of subgroups that can nest inside of one another. So you can really become as granular as you'd like.
As I'm working, I can also back out of what I've done. If I no longer want all of my logos to be in a subfolder, I can click on logos and, in the right menu, select Ungroup. That's going to move those back up to the parent level and get rid of that subgroup. If I click Delete, it's going to not only delete the subgroup, but it's going to delete everything in the subgroup. So you want to be careful about what your intention is there. I'll go ahead and select Ungroup, which brings that back up to the root. If I change my mind as I'm working, I can come in and select Undo if I get an alert, or I could use the usual keyboard shortcuts Command on Mac or Control on Windows and the letter Z to undo that change.
There is one more organization feature that I really love. Let's say, I want to come in and mirror the structure that I have here on this artboard for my set of icons. A really quick way to do that is to come on in, here on the design canvas, select all of the components that are here. In the right menu, with those selected, I want to come in now and select Reveal Components in Assets. Notice that XD comes on in and selects that disparate set. They could be across multiple subgroups. That's fine. I can now come in and right-click on them and create a new group for Headers. I can do that one more time now for the App Bar. I'll come in and select them in the right menu, go on in and reveal them in the assets. With them selected in that right menu, I'm going to create a new subgroup, and I'll call that App Bar.
Now, obviously there are a lot of organizational features built here into the Libraries panel that you can take advantage of. I encourage you to give them a try.
Use these best practices to organize your project assets. In this tutorial, you’ll learn how to sort, group, and name your colors, character styles, and components. Double-click to rename character styles and components descriptively, and replace default color hex values with standard color names. Sort items alphabetically. Select a set of items in Document Assets manually or by using the search and filter features, and then create subgroups. You can create an infinite number of subgroups, and you can nest subgroups inside of subgroups to create collections of assets.
