Components in Figma

- [Rik] So now that I've got my logo mark and my logo type, how do I combine them together? Well what I want to do is actually do a similar thing to what I had with my colors, so if I change one color, I want to change it everywhere. So for instance if I have a logo area, if I change this logo mark, it will also change everywhere too. So this is the kind of thing that I want to show you. What I'm going to do is just quickly make a brand new frame, so here we're going to make a frame underneath, and I'm going to make it quite big, just so we can play around with this, and this one is called just 'Logo' I'm going to call this frame, and what I'm going to do is I'm going to quickly select all of the logo mark internal bits.

So I'm going to select all of the stuff inside of here, and what I can do is right-click this, and then say Create Component. Now this here will create a new component, I'm going to rename this Component1 to 'logomark-component' just so I know what it is. And same thing with Aria Oslo, so I'm going to select all of this, and do the same thing I'm going to right-click and Create Component, and this is going to be the 'logotype-component'. Now what this will do is it will give me a new thing in here called Assets, and in here what I can do is just drag those things in and play around with them, so here in my logo area I can just drag this in, and drag this in next to here, and just start playing around with this a little bit more and kind of get the spacing a little bit more correct, maybe I want to make this a little bit smaller, maybe this one goes to the same height, and there I can start to play around with this a little bit more.

Now the good reason for doing this is if I change this color, it will change this logo mark, which will also change this, but if I change some of the spacing in here, or maybe even just change how this looks completely, it will change everything as well. So for a quick example, I'm going to go back to my Layers, and I'm going to open up this logo mark, and let's say I want to move this spacing apart a little bit, so maybe I want to kind of, maybe raise this up, notice if I raise this up, the logo down here also does the same and it's in proportion too.

If I move it apart, same thing happens. So this gives me a lot of control, because this means I can do things once, and it updates everywhere, it's pretty useful. So what I can do with my logo is say, this kind of looks okay, maybe I want to have a logo that's vertical as well, so I'm going to make a new frame over here, So for instance, if I've got a business card for instance, so this is logo, in the vertical way, and again I'm going to go to Assets, maybe I'll drag this in this way, and maybe move it in here, maybe I want to make this a little bit smaller underneath, and again I can just change how all of this looks I can play around with this really easily now, and just basically make whatever I want to make with this.

Now one other thing that we can use is if I select both of these, we can just switch back to Layers, I can actually use some of these things up here so this is Align Left, Align Center, Align on the right, so this actually is pretty useful, I can align everything to the top, of course, which is not what I want in this case, but this is kind of how I control a lot the stuff in here, I can select different things and have this ready to go. So this is a really good, powerful tool, if I change anything that's part of this, it will change everywhere.

So again, just a quick, show you again, I've put this in one place, and it's changing in three. Really powerful tool as part of Figma.