Lessons

Lesson Info

Working with Assets and CC Libraries

We're gonna start to move away a little bit from the drawing and the bringing in images and doing things like that. And we're gonna start to work with some of the to me, some of the cooler things in here. So we've got things like assets to be able to work faster, work smarter, working with symbols, working with styles for text, working with saving colors, and also CC libraries. Those are something that really have kind of come on in Adobe XD recently. And we just had an update, there was an update to XD which has a new feature and I'll talk about that, which is gonna help out a lot. So I've got my app design you can call it, kinda going here and what I wanna do is this, as we're working in Adobe XD we wanna, we wanna be mindful, right? We wanna work smarter not harder, the whole adage. And we wanna make it to where if we create a color and we're gonna use it in 16 different places, we wanna make it so that if we edit that color it's gonna edit in those 16 different places, or change in...

those 16 different places, right? At least we want the option to be able to do that. Or saving text styling or you know, things like that or working with symbols. So what we can do is if we have, I've got my, like I've already said, my file open here and I wanna go in and take that orangish red color and I wanna save it. So we're gonna go out and we're gonna select, why don't you click on an object, I'm gonna click on that rectangle that's atop of my login art board, and I wanna make it to where we save that color so we can reuse it. Now this is gonna involve using assets. And I wanna mention something here quickly because previously as we started creating content and I had you work with the fill and the border and that type of thing, we went over to fill and I showed you how we could save a color by clicking on the plus in that color picker there. Well saving a color that way is great just for quick one off use, you wanna be able to just use it and apply it. But we're not gonna edit those colors really, okay? So to work a little bit smarter we're gonna work with what are called assets. So look in the lower left corner, you're gonna see the assets panel. This is huge, you are going to spend time in this panel I can guarantee you. Right now as we work with these assets, it's gonna save us time, I guarantee it. It's gonna make it so things are more consistent et cetera. If you wanna save a color for instance in the assets panel which is for this document only, you're gonna select an object, you're gonna come over there and you're gonna click on the plus. If you click on the plus in the color category or the colors category right there, it's gonna capture usually the stroke and the fill, or the stroke and the, or the border and the fill rather, on the object. And it's gonna put it over there in the panel and save it for us. Now that's great, but what if you are like me and you start working and you realize in certain projects that you oh, I haven't saved anything to help me later like saved my colors so I can reuse them. Well at that point you can grab all the colors that you're using, so if you select all your objects or at least some of them, I could drag across a whole bunch of objects here for instance, and then click on the plus in the colors section, it's gonna capture all of the colors that it found. So if you imported things, SVG, copy pasted, if you made gradients, look in there you can actually see there's a gradient right there that it saved, the one we put on the home art board for the background. It's gonna grab tints, it's gonna grab all kinds of things. I tend to find that if I do it this way, this is a great way for me to kind of start making, I don't know, a way for me to capture this content like after the fact. But I tend to try to do this early on, that way you have these so that you can reuse them. And that's the idea. If you create a color like this orange red, and maybe you recreate it a couple different times before you save the colors in the assets panel, you might accidentally be off a little bit on one of them. So every color that's at all different it's gonna capture, okay? Now for that orange red if I wanna change that color at all which I honestly don't, if you do that's great, but you can come up to the orange right here and if you hover over it it's gonna show you usually the hexadecimal value, that way you can see what it is. If you right click on that color you're gonna see we've got some options, so we can edit it if we want. If we have something selected we can either apply it as a fill or apply it as a border, which is great. You can copy the hex value which means that you could go to another color that might be, you want it to be the same and you could paste it in there, that type of thing, or paste it somewhere else. Or you can delete it which won't, it'll just delete it from the list. If you click on edit, you'll just get the color picker. It's the same thing we saw over there in the property inspector and it's something that we can go in and if we wanna look at things differently, you wanna look now at RGB color or HSB or different ways to do that, you just start editing. And the beauty part about doing this is that I'm gonna actually, I'm gonna do this you guys, I'm gonna make sure that I capture that color so I'm gonna copy that hex value and make sure I keep it. But if I come in here and change the color and do something a little different like the red or something like that, it's gonna allow me to change it out there which is great, okay? Now I'm gonna put that color back, that way I have it. Let me get it back in there, there we go. So anytime we wanna change a color we just change it in there, alright? Now if you want to click on that orange, that object right there, you can see that that is actually using this orange right here. So I'm gonna go edit that orange. If I right click on this one and click edit and try and change the color, you're gonna notice that everywhere where you're actually using that particular orange it's gonna change. The reason why it didn't do it before was cause that was the wrong orange color, that's why. Alright, now I'm gonna undo by going under edit or pressing command z or control z to undo that color change. If you have a gradient saved in there, you can go click on the gradient swatch if you want to, it's gonna apply it to something selected; if you right click on it you can choose edit and it's gonna give you the color picker where you can go in and edit the colors and do different things. Now we're not gonna go in and edit it per object on art using this method right now, but it's gonna allow us to change all the colors within the gradient and also the distances between them et cetera, on that color bar for the gradient up top. So saving colors is great, it's a great way for us to be able to work. I'm gonna, eh I don't like that, I'm gonna apply that orangish color again, that's fine. Now if we want to we can also go in and save other types of content, we can save things like character styles. Now character styles are, think of them sort of like paragraph styles in InDesign or Illustrator, that kinda thing. It's gonna allow us to apply formatting to different parts of text if we wanna do that, select text, apply it et cetera. Now what I wanna do is I wanna save some formatting so we can actually reuse it. So click on let's say, trying to see, let's go over. I'm gonna move over. And what I wanna do is I wanna save the formatting from this text right here so we can reuse it. So if you just click on a text object, you don't have to select the text if you don't want to or you can select text within, come over to character styles and click on the plus. And what it does is it actually just captures the formatting from that text and puts it over here and saves it as a character style. Now it's interesting, character styles we don't name them. Okay? They're just named according to typically the font you chose, so if you chose a different font and you're on Windows and you're using the default font from there or something different, the style name that you see is gonna be different. I mean that's okay, it's fine. But just know that they're named according to the name of the font. Now if I have, let's say I do something like this, I'm gonna come over to this text right here and maybe change the font size a little bit, maybe make it a little smaller for instance, and I wanna make a second style out of that, okay? Just text, if I select the text object, I can go over to click the plus and save the character style and you're gonna see, same style name. It's called Helvetica Neue cause it's the same font, it's just a different size. The reason why I'm doing this I wanted to show you because if we have a bunch of styles in there, the way XD works is the character styles are actually organized by style name but there's also a sub-organization. If you look in there it's actually organizing it by font size, so the biggest font size for Helvetica Neue is gonna be at the top of the list up there. If you hover over one of these character style names you will see a little bit more formatting that's been saved in that text, and we've got some things we can do. We've got alignments and line heights and you know, a few things like that. Now what I wanna do is I wanna use these character styles to be able to apply them to something. So with this selected I'm gonna go over and click on the Helvetica Neue 20 and if you wanna apply a character style you can click on a text box or click on text and just apply it, and it applies it. If we have a style applied to text, either one of these for instance, we can go over to the character styles and right click and if we wanna edit it, we can edit it or delete it which removes it. If you choose edit, you're just gonna see a bunch of different formatting between color, font size, we have things like here you can see the spacing, we've got the line height, different things that you can set. Line height is kinda like leading if you keep going there. But that allows us to, if we change the size for instance, I'm using my arrow keys to do that, everywhere it's used it's actually changing it, which is great. And the name of the style right there is gonna change. If I change the font for instance, I go to you know, something different, Hobo, no not gonna go there. Anyway I'm just gonna pick something like a Gill Sans Futura whatever, this is a horrible font, don't ever pick that, anyway for this instance I should say so I'll go to something different, Georgia, that's great. So you're gonna see that the font name or the font style over there is gonna change, it's now called Georgia. Alright, let's talk a little bit about symbols, okay? So what I wanna do is I'm gonna move over, space bar, and what I wanna do is I wanna save a button as a symbol for instance, and I also wanna save this content down here as a symbol. Click on login and we're gonna just, if you don't have content you can just select some things if you want to like a shape you drew, et cetera. Now I'm gonna shift click on the button body behind. To save objects as symbols we can just select what we wanna save and then go over to symbols and click on the plus. You can also, I'm gonna show you a little faster way to do this honestly, you can right click on content to make a symbol. The shortcut for making a symbol is actually command k on Mac or control k on Windows. And if I right click, you'll see make symbol command k or control k, learn that shortcut. That's gonna save you a ton of time. So if I choose or press that, it's gonna make a symbol. Symbols are saved over there in the assets panel. If we want to use them, now what is a symbol? Let me actually start there, I'll back up a second. Symbols are a way for us to save graphic content for instance, like a button like this, and we have it in the assets panel. If we take that symbol and we put it in different places throughout our app or our design, we're creating what are called instances of that symbol. Now as you create these instances, they're all tied to the original symbol so if you change one of the instances all of them will update, which is great. So I wanna add, or I wanna take this button and we're gonna use it on another page. So let's do this, drag it out from the symbols in the assets panel and drag it onto the login page and just let go, you're gonna see there it is out there. Now you can tell, it's kinda hard to tell that it's a white button on a white background I know it's hard to see. But you're gonna see a green border around it, that means it's a symbol instance. It's connected to the symbol. Now if we come in here and you double click in a symbol, one of these instances right here, you can enter into editing mode. If you click on that rectangle behind that and maybe we go change the fill, go over to the property inspector and try changing the fill a little bit, maybe a light gray, there we go. Notice what it's doing to the other symbol instances. We've got two right now but if we had a hundred, it would change them all, they're all linked together. The great thing about symbols is that you can, if you have let's say an image in a symbol, you can actually replace images you can do things like that. I'll show you how to do that in just a minute. And you can make it to where each symbol actually has a separate image. Also for text in symbols like this, you can edit the text in one symbol instance and it will not update the rest. Come to that login text and I'm gonna double click on it and double click again and we'll just type continue or something like that and you'll notice that it's not centered because it's not center aligned, so what I'm gonna do is I'm gonna drag that back to center. Notice something here. You're gonna see the text on that symbol instance changed but it didn't change in the other one. But the appearance changed for both when I dragged that text around, you can see it right there. So the appearances are linked between, texts and images and symbols you can have be independent. If you come to a symbol and you wanna make it to where you just change that text in that button, you're like you know what I want the rest of the buttons to say continue, you can right click on the symbol instance and choose update all symbols. You'll see it right there. That's a great way for us to be able to go in and say update that one too on the homepage. If you decide that you wanna have one symbol instance look totally different, maybe you wanna make a different kinda button from it or something, you can choose ungroup symbol and that breaks it's link to the original symbol, that way it's just a bunch of objects and you can do what you want with them. If you change them they will not update, regardless of what happens to the symbol. So that's a great way to work. Alright, I'm just gonna bring that down a little bit. We should have a keyboard out there and different things, but go ahead and save your file. Next thing we're gonna do is talk about in here, we're gonna talk about CC libraries, which are a great way to be able to work. Using assets is awesome for us to be able to save things, work smarter, work faster, that type of thing, but we can also work with CC libraries. If you need to bring in content like let's say logos or icons from Illustrator or I don't know, raster images from Photoshop, things like that, you could do what we did before copy, paste, bring 'em in that way, or we can use CC libraries. In XD to open a CC library, to open it up come under file and you're gonna see open CC libraries. Now this is a panel that you can open up in here. Yours honestly might look different. Let me do this real quick, I'm gonna switch it to what's called my library, if you've never worked with CC libraries in any other Adobe application you will actually find them in there, then you will probably see what's called my library in this menu and you'll see nothing in there. If you are a Creative Cloud member you have access to these types of Creative Cloud libraries. This is essentially content that you can store in this library which is stored up in Creative Cloud, and access via any application. So if you put something in here, you can actually access it elsewhere. Now currently in XD we're not gonna add content to a CC library, we can only bring content from the CC library. So what I need to do is I need to go get something that I need to use and put it in the library, maybe from Illustrator or Photoshop and then bring it over here. So let's do that. So if you want to you can open up Photoshop, I'm gonna start there. I've got Photoshop open and if you open a Photoshop file, maybe that's got a few things in it. Maybe it's got some vector content, a little bit of text, some formatting, an image, just some different things. What we can do is we can capture that content and save it in a CC library in Photoshop, Illustrator, InDesign, most Adobe applications. If you look in Photoshop you'll actually see that we have a panel called libraries. And it's pretty much the same thing. So I'm gonna pull it outta here so you can see it. If I go and choose my library, and we can by the way have a whole bunch of different libraries you can work with, okay, for different clients or projects, whatever you need. Now what we can do is we can then take content from Photoshop in this case and put it in the library, that way we can access it in XD cause it's putting it in my Creative Cloud. I'm gonna keep this simple. You can either drag layers of content into libraries, the libraries panel, or there's a button down here at the bottom of the libraries panel that says new library from document. If I click on that, it's gonna say okay we're gonna find whatever we can in the document that is character style, color, smart objects, vector content, things like that and we're gonna add it to a library that we make right now. It's gonna make it for us. I'm gonna click on create now, be careful here, there is a move smart objects to library and replace it with links, go ahead and turn that off for now, just so we don't have to worry about it connecting to the Cloud, just leave it alone. And then click create new library, just trust me. You're gonna see it's gonna go in and capture whatever it can out of the document and it's gonna make a Creative Cloud library for me and it's gonna call it whatever that document was called. The library is called, for me it's called Native PSD Header. Now if I want I could also go into Illustrator and do something similar, I can actually, in Illustrator we don't really have that command, but let me go over to Illustrator I'll just show you this. If I go over to Illustrator, I've got a document open. And what I wanna do is I wanna use these icons. If I go I can see that the same libraries panel is showing in Illustrator, once that content that I put in the libraries panel in Photoshop is synced with Creative Cloud, I can access it here. So if I go in and choose that library, I choose Native PSD Header, there's all the stuff. I could use that in Illustrator if I want, or I could do this. I could go in and say I'm gonna take this content here and let me actually group this stuff together, just so I have it all grouped. I'll group it all together, that way it just keeps it together. And I'm just gonna do this, I'm gonna just drag what I want into the libraries panel. That's another way to add content, so I'll just drag this in, it's gonna save it as a graphic, drag this in, save it as a graphic. I could drag multiple objects too, that's a great newer feature in Illustrator. Just drag a whole bunch of things in if you wanna do that. And we've just saved that content. Now what I can do is go over to XD and actually start working with this. So let me go back over to XD. If I look in my libraries, my Creative Cloud libraries panel I can now see that Creative Cloud library after everything has synced. It might, if you have a lot of stuff it might take a few minutes to sync. And you gotta have an internet connection to do this so you can see it all, but now I can start using it. Here's one of the best parts I think about all of this, we have vector content in the library, we've got raster content, if you take content, you remember in the beginning when I told you that if you put things in here like vector and raster like images, that it's all embedded? If we drag from the Creative Cloud libraries panel, it is linked, this is a great way to do, for your work flow. Let me move over, I'm gonna use my space bar and my hand tool and what I'm gonna do, it's gonna be kinda weird but I'm gonna replace this image so that it's linked to the library now. So all I need to do is drag content out from the library, put it where ever I want basically or if you wanna replace an image in your document you just either drag it from your desktop or drag it from the library, drop it right on top of something and let go, and you can actually see it's gonna put it in there. So it's actually, it looks the same but it's actually replaced it now with that particular image in the Creative Cloud library. Why is that important? Or why could that be helpful? Because I could go over to that image now in the library and if I right click on it I'm not gonna do it, but I right click on it I can edit it and it'll open it in the application that is associated with it. And then, in my case it's gonna be Photoshop. I could then make a change, it would automatically update everywhere I used it in this document. And that's phenomenal, that's a great work flow. Great way for us to work, so. We can drag in if we want to vector content. I'm gonna move over and I'm gonna bring in some of these category content. So I can drag out like let's say this object. It's gonna take a second to kick in. That is actually linked, so it's linked to the original. I can drag out this object, I can drag out this object. And start working. You're gonna see that one got a little wonky there, I can actually fix that in the original but some of these got misaligned, but that's okay. So as we drag in we are actually creating these links to the original vector objects. And I could if I want, go back to Illustrator, open up the original from the Creative Cloud libraries panel, make a change to it and it's gonna update in here. The other great thing about doing this is, I'm looking at this and I'm saying well, I don't wanna make the change to the original I just wanna edit this one, they are linked but we can unlink them. So I'm gonna zoom into this one, I'm gonna press command or control 3, zoom into it. You're gonna see in the upper left corner a link icon, just click on it. That's how you unlink. I can then command click or control click, this is a group of objects remember, inside the group and just move something around for instance and there we go. That object is now unlinked, the rest of them are still linked and if I edit the originals, they will edit as well. So working with Creative Cloud libraries there is just, there's a lot of things you can do, you can click on colors to apply, click on styles if you save them, character styles for that matter, and be able to use them pretty effectively. So working with assets, working with Creative Cloud libraries, a lot of amazing things we can do there.