Original subtitles

‫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.