Lessons

Lesson Info

How to Use Components (Previously Components)

Hey everyone. This video is one of those patch videos. I just need to update it to keep up with XD and their ever changing changing this. This one is completely rerecorded because the thing I'm going to discuss symbols has actually changed names. It's now called components plus they work a bit differently. So yeah, welcome to the rear record. But you don't know what the symbol is or what a component is. So that's what we'll do in this video but you just need to know down that in this video. We're going to discuss components the rest of the course. Okay, I'm going to talk about symbols. So this version on the left here is the old version of X. D. When they called it symbols and this is the current version where they currently call it components. So whenever I say symbols later in the course they do a very similar job. They work in a very similar way but they are called components now. So write that down next to you. Say whenever dan says symbols, he really means component. Alright, so l...

et's actually figure out what a component does. Basically these two top things are components. Okay, they are connected. If I make a movement over here you can see it moves on the other side. Okay, so you can see how useful it is for things like top nags, where they're on every page you can make one update here. Okay, where it goes, I can delete something and it's gone from all the other components. It gets even fancier when you get down to things like this where you can go through and you can double click on the font and you can go say not brush script. Comic sans, you can see some of them update. That's kind of like a partial connection components. They're awesome. But you're thinking is he going to be using brush script in comic sans? Oh the mystery. Alright. First thing is if you are on your layers panel, you want to switch to our assets panel Next we want to go through and delete any components that we've got. Okay, so I've got this one in here. You've probably got a few more um unit with bunches of them to get rid of them. Let's slick them all. Okay, so I've only got one. You can hold shift and click them. All right, click it and hit delete. Okay, where do you get those assets at this stage? It's coming from copying and pasting from other people's upwards. So let's have a look at this one. This is our wires one. Let's say I grab a bunch of stuff from it and I copy it, you can see here there's a bunch of components already. Okay. And if I switch to my document okay my assets are empty. Okay I've got no components. I go over here and I paste them okay and you can see a bunch of components turned up. Okay. So that's how they get their originally just copying and pasting. I've undone that to get rid of it and I've got no components, we're gonna make our component out of our top nav here. Obviously this is a handy thing to have on every page and we don't want to have to update every single page when we get started, especially when you end up with like um you know XD documents looking like this. If the heading was on all the top Nav was on all the pages, we'd go mentor trying to update them. Also, components are good. Um you don't have to group them, you have to select them all ours is a handy little group already but that doesn't matter what you need to do is select everything you want to be inside your component. Right click it and go to the one that says make component okay or there's a shortcut there, click on it and it's now a component. What happened? What changed? Nothing much. It's now got a green border on the outside. It's also got this kind of diamond in the corner here under our components, we've got component one, we're going to name it. Okay because we are awesome. You are never gonna, you're gonna be like Photoshop, we've got layer, 57 we're going to be clever and good and call it top Nav awesome now where it becomes really useful is if I zoom out, I'm going to duplicate this outboard to make, my next page. Okay so remember there's a couple of ways of duplicating outboards. The long way is click the little dotted line or the name if you can see it. Okay and go to edit, go to duplicate. Okay, that works. Or I for the rest of the course I'm just going to do this. I click hold and drag the name whilst holding down the option key on a Mac and the old key on a pc and just gives you a duplicate. Okay, so we've got a second one. This one is going to be called, this one's gonna be called dashboard dash board. Okay. And I'm gonna get rid of the hyphen one. Alright, so I've got two versions. The good thing about it is because this was created into a symbol that beginning. Okay. Oh sorry. Created into a component, don't say symbol dan. And this component got duplicated over here. So these guys are connected. Now, the thing to note about them is that this one is the master. Okay, this is the boss. This one here is called an instance. Okay. Kind of refers back to this one for its mastery. Nous what I mean by that is if I go and update this one, it's going to update this one on the left. So let's do this one. Let's say the client comes back and says actually we're not using the word login. Okay, we're going to use sign in. This is like a battle that I have with clients um should be called log in or sign in. I'm never sure the battle that I never really have because I don't care enough. So sign in is going to be what we're calling it. Okay. And watch this fight. Just kind of click out of here. Um, sometimes you need to save the document if you are finding problems. But what happens is look over here. Hey Sinan. Okay. So you can easily see the power of components also works for kind of like layout movement. Okay so let's look at both of them if the zoom out. So it's gonna be teeny tiny on your screen on your video. Let's see what we can see. So can you see this little blurry version of instructor HQ there and one there as well. Watch this. So if I double click it to get inside it exactly like groups. That's why I showed you groups in the last video. Okay, so I double click it to go inside. I'm inside, it's got the fuzzy border on the outside except this one's green. But watch this. If I click on instructor HQ and I just kind of drag anywhere that's not that little dot, can you see it's moving on both sides? I can't point to it. I'm pointing to with my hand. There you go. You can see them on both sides. I'll move um, you can kind of get the idea. Okay. So I can update everything will update throughout the document now interestingly I can so I update the Master everything updates. But let's say I just want this one to be different. I want lots of it to be connected but not this thing I can go into it and say you know say we're inside the app now so we don't need to sign in because they're inside. We've got this one called account. Now you can click on it and get your account. The thing is if I update not the master, okay but the instance okay or the child or the kind of copied version, look what happens. So this one's called account and if I go across here this one stays a sign in. So the master will spread through the whole document, update everybody. You guys will change if you update an instance of that master. Okay. It's like a little unique version. It's still connected except for that one thing I changed. So I can still go back into here and say let's say it is now not sign in. This one's the clients come back and said actually it's going to be logged. Is it login log in? I think it's meant to have a space but again I don't care enough. Okay so over here you'll notice that it has an updated this time. Why? Because because we've overrode it over here. We said actually stay the same except there's one little change you can say like, oh man why didn't that up? change? You can right click it. Okay, so it's like that at once. Right click it and say let's just reset it to the master comes back into line so you can see pretty powerful stuff. And we are using a simple version of it here to get started in the course, but you can see how it's really easy after a while. Start using well important to start using components so that you can make updates, especially in next year where everything is changing all the time. Let's explore a little bit more. I want to show you let's say that the footer is another good use case for this. So I'm gonna stick everything in there. Okay, make sure I always give it a move to make sure I've got everything I'm going to right click it. I'm going to say make component. I'm gonna be real good. And call it footer. Capital Footer yelling. Okay, call it footer. And the problem is that this guy is not connected because this component was made afterwards. Okay, so we duplicated it and we've kind of gone back and made a symbol. So if I make changes to this, let's go through double click it to go in. I'm going to delete all those social media bits. You'll notice that these didn't disappear. So how do I connect the two? There's no real fancy way, It's just delete this one. Okay, we'll delete everything. Oh, dragging guides, all sorts of stuff. Okay, zoom out and I can just copy and paste it using the same trick that I just used start dragging hold down option on my Mac and alternate pc. Okay. Line it up now that connected. Okay, this one here, lets see that can see the tiny text moving better examples, but you can just stop copying them afterwards or you can drag them from the assets panel. It's kind of one of the reasons this is here over here. I can grab footer just drag it out and add that one and they work the exact same way now as these two connected. Okay, I can make a unique version of it or I can update the master to go and change them all. A couple of other things I want to show you is, let's say that we have like after a little while you do it with a really complex components list, your assets, panel gets really big full of stuff. You can kind of see here. This one's a bit more of a better example. There's just lots of stuff in here and they haven't been named well, so you're like, um, how do I know where that is in the asset panel. Okay. What you can do is you can select on it once. Right click it and say reveal component in assets and just keep an eye on this panel over here. Okay click on it. You see it highlights it in blue if you've got a big long line of them, it will go through an update. Let's have a look. Not sure what I'm saying there. They say this is technically a component now, even though this kind of wise thing was created earlier on in the XT life where they were called symbols. Okay, that's the same thing. Remember just a different name. So if I right click them and say where are you in here? Okay you can go, you reveal component assets and there it is highlighted a little blue line around it and it's there. It is there the other way around as well. You can say this one here is being this is a component. It's in there somewhere. You're not sure where it is. Okay. You can click on this and say right click and say highlight on canvas, you can see it's highlighted it there, it works both ways. I want to share a couple more things this video is getting along but I guess this components thing has changed a bit and it's got some really nice stuff into it. So let's say that like this one here would be a really handy thing to be, especially when your wife framing, you've got this kind of like reusable icon and the client come back, come back and say actually I don't like that as an icon or your credit director might Okay because I don't know it's undecided what our icon for an image placeholder should be just yet. But let's say let's make a component. Okay, right click it. Um the shortcut is command key on MAC. Control key on a pc. And what I tend to do is naming of components is really important. I call it icon image so that I can have icon play button, icon, mute, icon replay so that they're just really easy to find in here under the word icon hyphen. Okay, so that's what I do and again we can't just like automatically make that one change so we need to just duplicate it and reuse it. Okay, so it's important at the beginning Ok. When you're brand new, go ahead. Don't make components. It's fine. You will learn the power of components when somebody comes back and you've got quite a complex outboards that you're like, man, I wish I used components and then you'll start using them because this is a course and I want you to kind of be equipped with all the right ways of doing things. Um we're going to learn components throughout the course. Alright. The last thing I want to show you is buttons over here. Now the reason I re recorded this video a the name change but that's not a big deal. It's because they've become a lot more powerful. Okay, I want to show you something so I've got these two separate things. I'm going to select both of them holding shift and clicking both of them. They don't have to be group. Remember I'm going to make it a component and I'm going to call this one button. It's going to be my sign in button. You can see I use that kind of naming convention. All the buttons doesn't matter what it is as a button hyphen you can do it your way but That works for me. Let's have a little look. Let's start with this version. And let's say that I've got 1234. I should use my repeat grid. That's the future. Let's have a little look at what we can do in terms of the changes. So and that's the master. These are the Children or the, what are they called instances. Okay, so you can tell the difference that has a little diamond in the corner but it's hollow. And you see this one has a full green Master child Master instance. Now the nice thing about it, we kind of looked at at the top but it works really handy with buttons and it's a really good example of what we can do. Let's say we want to go into this instance. Double click it to go inside. I've clicked on the background. I want to change the fill color to something else. Okay, now if I go to the Master. Okay, because that one's overridden. I go into this one by double clicking it, change the background color. Okay too gray. You can see it all changed except for that instance that you've changed. That's really cool. But you can actually do quite a bit. I'm going to undo that. So let's have a look at the font. Okay, I'm going to go through and pick some font lust. Okay, so the font change. But watch this if I go now and change the font from up here from Ariel to don't know. Roboto bold black. Okay, can you see what happened? This is a really good comparison. So this one here changed. Ok, the font changed but not the background color. Why? Because we made this thing unique but not the whole thing unique. Just the background color. So if you haven't changed because we didn't change the fonts, it goes, oh well you're the same the same font. So I'll update you the backgrounds different. So I won't update you the same thing with this here. The backgrounds the same. Okay, so if I make a change in here, it will change the background. But because the font is different, I'm going to leave that alone so you can do some really kind of like really powerful kind of components where they're all related, but they can all be a little bit different as well. So I made that more confusing. It's confusing. Show a couple of other reasons or a couple of other things you can do things like the size of double clicked it to go inside. You've got to double click it to go inside your instance. Okay. And then I can like, I'm holding down the option key on my Mac to do both sides at once. It's a handy trick or alter on a Pc. Okay, so I've made that one bigger and let's go and change this one now. Double click it to go inside and watch this. If I see all the rest of them change, but not that guy because he is a little bit unique. Not completely the font store connected, but the box size is different. One last one. Let's have a little look at, let's do a kind of reverse version and let's make it more of a pill. So double click it. I'm going to make this 20 to make it massive. I'm going to make the border, turn this one off, grab the font color, change it to black or the blue outside color border, blue Size. Put it up to four. You can see that it's very different. But if I go in here now and I say actually I need this to be back to Ariel because you see everything changed and that's back to Ariel as well. It's not a very good example comic sans, you can see all updated. Okay, so you can control, you can get really tricky with it and I guess I want to show you this earlier. Not only is it amazing, but it can be a bit frustrating if you're like why why is updating when I'm changing them? Okay. You can click on them right click them and either reset to Master state to say go back to looking like the original or stop doing it right clicking it and say actually um group this component now it's not connected. You see the blue, the green border disappeared. Little diamonds gone from the corner. Now doesn't matter what I do in here, I can pick any old great font. That's another one. I love to hate brush script. Yeah brush script. Okay. It's completely unique and untouched. Alright. There was a lot packed into this one, a couple of things to remember. Is that throughout the rest of this course I'm going to talk about symbols. Okay. But really I mean components. And the other thing is is that the master okay controls everything and you can make small changes to the instances of that master to make things unique. And one other thing I'll mention is that throughout the course when when it was the old version of X. T. And it was called symbols there was a chance to push override. So we know when I made an update, let's say I go into here and I updated this font and I said it's going to be not Helvetica now but we'll use what's another font that I love to hate treason, do we? I don't even have it on my phone. Oh wow. Crazy. Let's begin to the one. Let's go for impact. Okay so I change it here. It updates automatically in the old version of symbols you had to push overrides. So if ever in the rest of this course I say and push overrides, you don't have to do that anymore. It's just easier. Alright, back to your normal regular scheduled video watching.