Original subtitles

‫Everyone I want to talk about now, the left sidebar.

‫So you'll see that I'm not in my test file anymore.

‫This is what it looked like before.

‫It was kind of a mess.

‫So I think it's probably best that we look at a real file that has a bit more structure to it so you

‫can understand what the left side byte looks like.

‫So I'm just going to pop this out and we are going to talk about this area, the left sidebar.

‫So the left sidebar is where you're going to find layers.

‫There's different types of layers here.

‫You can find frames.

‫There's groups, there's components right here.

‫This is a frame.

‫So what a frame looks like.

‫And this is an auto layout frame.

‫These are the different types of shapes.

‫So this is a line shape, which is a horizontal rule that's going to right across.

‫You can see a highlighted.

‫You have groups or different types of layers.

‫So if I were to make this a component really quickly, that's what a component would look like.

‫Or a master component if I make a copy of it.

‫That's what an instance of a master component would look like.

‫So I'm just going to backpedal over here so we don't get too deep in the weeds there.

‫But essentially there's so many different types of layers.

‫You can have shapes, images, gifs.

‫I mean, they're all the all show up differently here, just based off of their icon.

‫And this is we're going to find them and you'll see some of them are even nested.

‫So this is the header area.

‫And within the header area I have like the navigation for this design and within the navigation I have

‫like the main navigation which are these different options over here.

‫And if I click this little arrow, I can see all of those different options.

‫And essentially, you know, you can test different types and that's how Figma works.

‫They allow you to nest frames within frames or shapes within groups.

‫It makes it really easy for you to understand and where things are and kind of take the approach like

‫a developer as to how to structure some of your content, like within containers and so on.

‫So that's how nesting works.

‫And the easiest way to do that is I'm just going to take a rectangle.

‫So I'm just going to click the rectangle tool.

‫I'm going to take a rectangle.

‫And over here we see my special rectangle.

‫I can take that and put that within my header area.

‫So you can just drag them into wherever you would like and you know, they will show up accordingly.

‫So I'm just going to quickly delete that by pressing my delete key.

‫Or you can press your backspace key and that is how you get rid of the layer.

‫So you can easily.

‫Right click on the layer and see all the different options you have for it.

‫You can even do that over here if you'd like.

‫You can right click on on a certain layer and get those same options.

‫By doing that here, you can drag them, reorder them, you can even delete them by pressing backspace

‫or delete the delete key while you're selecting them.

‫So that's essentially it for how to kind of use them within the sidebar.

‫But you can also double click and I can name this to like Cool Logo instead.

‫So now that one's renamed.

‫So really, really great here.

‫That's just like easy way to rename files.

‫I love naming all the different aspects of my file just so it's nice and clear for me to come back to

‫it, even share it with others so they understand what they're looking at.

‫When I see things that are like Frame 1204, it gets really messy.

‫Like that's what it comes up as.

‫And if you just make new copies, like it's just they mean nothing.

‫They just mean frame one, frame to frame three, and it's really hard to follow that.

‫So I'm just going to delete that really quickly.

‫Okay.

‫So that's how you rename layers, nest layers.

‫You can also lock them, which I find really helpful.

‫Sometimes you want to work on something and you don't want like in this instance, let's say we don't

‫want to touch the navigation.

‫So all right, click over here.

‫You can also see the little lock.

‫You can hide it, but you can even lock it.

‫So once you lock it, you can't really.

‫Oops.

‫I'm going to lock the header.

‫Yeah, you can't move the header anymore.

‫So that's really great.

‫If you're working with like layers that are over top one another, you can easily hide it too if you

‫just don't want to see it at the moment or lock it.

‫So different options there.

‫You can also do that by right clicking and going to the bottom.

‫These are the shortcuts.

‫Shift command l on mac OS and shift command h on Mac OS and that is how you lock and unlock layers.

‫There's also another aspect so of this sidebar.

‫So right now I showed you layers, now there's assets.

‫You can come in here and create components.

‫So an example is if I take this logo or this button is actually probably a way better example.

‫So if I take this button and I'm just going to drag a copy by holding option on my Mac, but if I just

‫take this button and turn it into a component.

‫It shows up in my local components and then I can drag them from there.

‫And now I have a responsive button that I can use anywhere.

‫And Figma will just throw that.

‫Little tutorial up there.

‫Really helpful for us.

‫But that is how you would use your assets panel.

‫And you can use components for from other libraries, other projects.

‫Other people can just share libraries with you that they can control, but maybe you'd want the components

‫in there to reuse.

‫But this is a great way to use reusable components.

‫Remember, if you're on a starter plan, you won't be able to use components that extensively.

‫You will only be able to make components within your file like I just did, and use them so I can make

‫this a component.

‫Whoops, I'm going to grab the logo here that we made or that I made.

‫We're going to make this later, but I'm going to grab this logo over here and I'm going to turn it

‫into a component.

‫And now that logo is there.

‫So you can use your local components, but you won't be able to access components beyond that, unfortunately.

‫And that is the assets panel.

‫The last thing I did want to talk about, though, is the pages.

‫So you'll go back to your layers and you can see over here you're on the landing page or I'm on the

‫landing page.

‫You can see all the different types of pages here by just clicking this little dropdown and I can add

‫a new page and it's going to create a new canvas for me over here.

‫But if I go back here, I have that canvas.

‫If I go back here, I have my cover canvas.

‫So you can move through all these different pages as you see fit and you can create new pages.

‫Remember, there is a limitation to the starter plan.

‫I believe it's only three pages within a file, which isn't too bad to be honest.

‫Many people won't really exceed that.

‫And some of these files already have a bunch of pages, and you'll be fine using those files because

‫I've given them to you, but you won't be able to create new pages from that.

‫So just keep that in mind.

‫And yeah, and you can just delete pages, you can copy a link to a specific page, you can rename them

‫in the same way you rename layers.

‫You can do that all over here and you can duplicate pages as well like I just did.

‫And that is the left sidebar.