All language subtitles for 29 - Figma UI — Right

Hey, everyone, and welcome back.

Let's jump right in because we're going to talk about the right sidebar.

Now, the right sidebar is really where you're going to do a lot of your work.

So let's jump right in.

So I'm just going to click on this frame over here.

You need to close this so your frame is going to have.

Well, our frame over here that I'm.

You know, the landing page frame that's housing, all of this content is going to have a bunch of different

things on the side here.

You'll notice that this is your like alignment and distribution up here.

So an example is I can take say these three things.

I'm just moving really quickly here just for the sake of the demonstration, but I can take these three

things and select them all, and then you can tidy them up by just moving them to the top or making

them all come to the middle.

You can space them out separately by clicking this over here.

So distribute like horizontally the same way.

And yeah, you can align them easily.

So that's where you're going to get your alignment and distribution.

You can also see your frame size or just the size and orientation of your your layer.

So I have the X.

The why.

That's where it's positioned.

I also have the width of the frame.

I have the height of the frame.

I have the angle.

You know, you can turn things if you want.

So I just threw a9d over here.

I'm just going to go back Command Z or control Z, depending on what system you're on.

You can even set a border radius up here so you can see that the border radius has smoothed that corner.

And that is basically all for your frame size, your orientation.

You have your position on the canvas, the X and Y values up here.

You have your dimensions, which is the width and the height.

Another interesting thing that I want to talk about is a constraints.

So we have sometimes you'll have your just your resizing options over here.

So this one set to fill and you can hug like hug the content.

You see how that kind of like messes up the frame a bit.

We'll get into this in much more detail, but this is where it's located.

You can fix the height of this.

So it's a set height.

You can clip your content.

So if I were to go like this, you can see that that content is not showing anymore because it's set

to clip.

So you can hide content beyond the frame.

That's where all of that is going to be.

And another interesting thing is your constraints.

Well, actually, let's go back here.

So if I select my hero, frame constraints are going to show up here because constraints can only show

up within a regular frame.

I'll get into that later.

But this is what constraints look like.

So left and right and top and bottom are for your vertical and your horizontal constraints.

So if I move the landing page like this, it's going to shrink with it.

If I move it like this, it's going to shrink with that as well.

So those are your constraints.

If you have an auto layout frame, these are where your auto layout details are going to be.

So we'll get into that later as well.

You have the ability to create layout grids if you're into creating grids.

So you can create grids if you want.

You have your layer properties, whether it's to pass through or darkened.

Kind of like Photoshop a bit.

And then the ability to set your fill.

So if I press just that plus button, I can create new fills in here.

I can also select this filter.

It's turned off by default, but I can select it and color it any which way I want and I can remove

it.

You have stroke, you can set a stroke.

You see a stroke just showed up on the outside, which is like a border.

So you have all your selection colors, you have effects and then effects.

You can select like drop shadow in shadow.

This is basically your bread and butter.

You can even export your screen from here as well as like P&G.

You can do it as PDF, SVG and JPEG.

So lots of options for you there.

You'll notice that text has its own as well.

So a text has its own properties and you can really dig deep into those properties.

The other part of this tab is you have design now you have prototype and prototypes.

Really great.

And this is how you would create flows together.

If I have two screens and I link them together in some way, like if I click on that screen, it goes

to the next.

I've created a prototype.

And then I can access it by clicking.

Plus, I can also see a bunch of different things.

I can choose the interaction, so whether it's on click or whether it's on hover or while I'm pressing,

and once I've chosen the interaction, I can choose the destination.

Where is it going to?

So just one frame to the next and then you can choose the animation.

You can go move in, you can choose smart animate, and it'll give you some cool bouncy effects that

you can use.

So lots of cool things that you can play with over here.

Another thing is you can define a lot of things like devices that you may see, whether it's like 1113

pro and you can customize that all here as well.

So that's what you'll do.

Your prototyping stuff.

Inspect is really great for developers to come in.

So if I wanted to just jump right here and go to my button, whoops, zooming in.

So if I'm going to go look at my button over here.

I can easily see all the properties for that button.

I can see its height, I can see its border radius, I can see the padding involved in that button.

I can see all the actual CSS code spit out over here.

This is where her developers will really find it easy to find the elements that you've created and turn

that design into code.

And that is the right sidebar.