By Dani Beaumont
In Adobe XD, you can design thousands of screens across dozens of projects. But if you can't stay organised as you scale, your productivity can really suffer. The Libraries panel in Adobe XD includes quite a few powerful features for organising 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 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 colours, character styles and components. My list of components is quite long, pretty typical for an UI kit. As I come back here towards the top, you can see I've already added a friendly name for my colours and character styles. And I did that by just double-clicking the default colour hex value and typing in the name I wanted to use.
One handy way to organise 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 colours 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 organise 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 colours 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 up that or hide the content within it and see what remains of my components. I'll go ahead and do that same behaviour 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 realise 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 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 organisation 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 organisational 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 organise your project assets. In this tutorial, you’ll learn how to sort, group and name your colours, character styles and components. Double-click to rename character styles and components descriptively and replace default colour hex values with standard colour 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.
