All language subtitles for 28 - Figma UI —

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.