Everyone, and welcome back now we're going to get into the design properties panel.
Now, this is where you're going to be doing a lot of work as well.
So I've created another square in my frame.
I placed it in the middle and I'm over here on the right.
So you'll notice three options design.
Prototype and inspect.
We're going be focusing on design and we to go through all these different options that you may see,
and it's going to be different and really depending on the different things that you are going to be
doing, like text and a shape will have different properties and we'll go over that.
So let's go through it.
So the first thing you have is.
The alignment this is going to align this object based off of its parent.
So in this case, if I click left, it's going to be to the left.
If I click to the middle.
This is the middle.
The horizontal.
Middle, right, top.
So you can if I wanted this to be centered perfectly, now it's centered to the middle vertical.
This is the middle America and this is the middle horizontal, if I want to be left and bottom bottom
left.
That's all I would have to do.
So if I wanted to be right, it would click this the line, right.
And then Allwine top.
So this is really great if you need to align an object to your canvas or your frame, but if you wanted
to objects where you can do as.
You can align them together.
This is really great if you have two objects, so if you don't want to drag over these objects and say
if you have three objects and you just want to select two, you just select one, hold down shift,
select the other.
And now they're both centered to each other.
And then you would remove them manually to be sent to the actual frame.
So those are the ways to align your items.
I'm going to delete these other two squares, bring this one back to the middle.
OK, next, we have these different values, we have a bunch here, we have your X and Y values, we
have your with and your height.
So these are your positional.
So if I say something like two hundred going move two hundred to the left.
So your X is your horizontal axis and your Y is your vertical zero is going to set me to the top.
So let's go back.
Your wife and your each are your within your height and this little chain is going to connect them.
So if I affect this property right here, if I say change it to four hundred, it's going to actually
be four hundred height as well.
But if I unlink this chain and I say set at the height of two hundred now the width won't change.
So let's go all the way back, OK, and we're going to do is just set this all to five hundred and I'm
going to center it again on my frame.
So we have a five hundred by five hundred pixels square.
Next we have our rotational value.
We can change this to say 90.
Which in a case of a square, it's not going to do anything.
But if we do forty five, there we go.
Or if we do 15.
So you can do that manually, but if you want to actually not do that manually, you can do it just
by going over here and you see how my cursor changes as I get close to a corner.
If I hold that, I can spin it, if I hold shift, I'll go in increments.
So I think it's 15 degree increments.
And you can spin it any which way you want.
And this is your corner radius.
So if I want 100, it's going to make it rounded, you can even select this little dot here and pull
it in.
So now I have two hundred and fifty radius, and that looks like a circle where I can make it small,
like a little card on a UI.
That looks really good now if we go back and just reset it to zero, we'll go back to our square below
that.
We have constraints now.
Constraints are really good for responsiveness in general.
And basically it's how your item reacts to when your frame is being stretched or contracted.
So in this case, if we look at our constraints, they're left in top.
So that means if I resize my frame from the right in the bottom, it's not going to do anything.
So I'm going to command Zengel back.
But if I select from the top left, it's going to move with that top left.
So pretty core right now, this is where it gets really interesting.
Now, if we want to make like, say, responsive cards and stuff like that, all we need to do is set
these properties.
So in this case, say, left and right and top and bottom.
Let's scale this, you'll see that now it's going to scale with your the way you scale your actual frame.
So this is great for responsiveness if you're working on a different screen sizes and you want to create
like maybe card components that you want to be able to reuse at different sizes and the content moves
easily within, this is the way to do it.
So I'm going to Kamandi all the way back to when we had a beautiful square.
And there we go next.
What we have is different blending modes.
So this is kind of something you would see in Photoshop.
We have like multiply, we have screen, all these different things really great for if you're using,
like, multiple colors.
And I say, I want to make this multiply.
We can do that also within Sigma.
So those are your blending.
You're blending modes.
Next, we have our filles.
This is very self-explanatory.
You just need to click this little section here and you can edit the hex value.
You can even change to RGB.
You have Celsius and so on, and you can go and just drag your cursor and change the color.
You can change that hues.
And you can go up and down, get all those different values.
And get some really nice colors, so they've got we got kind of like this nice turquoise teal bright
color right here, you can toggle that to turn on and off.
If you're working with different layers, maybe different components, you can also add more color fills
on top of one layer.
So this one is a linear one.
You can change that up here.
So in the case earlier, we had a solid color.
And we can change that opacity to see like 20 so you can see the layer below it.
So if I go back and I go up here, I can change it to linnear.
I can change it to Radil.
Angular diamond, and you can even have an image, so a lot of different options for you right there.
So let's go back, let's actually remove this layer just by clicking this minus button, so you still
have our nice fellow over here.
You can add stroke's.
So you can see a light black outline around this shape, we can change that over here.
So if I change that to 10, that's the value.
There we go.
So there's different ways you can have it centered, you can have it inside, outside, that's sometimes
up to preference, depends on what you're doing.
Like see if I'm using a button I'll usually have access to inside.
So it doesn't affect, like, different sizing in terms of the pixel width of the actual button itself
and the pixel height.
You can have different effects here.
So if I click that plus button, if the default effect is going to be a drop shadow, you'll see that
very faint drop shadow right there.
You can edit the values of that drop shadow, so I have it set to like 10 y, so it's going to move
it down 10.
And if I want to move it ten to the right, it's going to look like the shadows being cast to the right.
That means the light source is coming from the here and you can blur it any which way you want.
So I played it to say 20 and you can set the opacity and the color of that shadow.
So in this case, let's make it like a dark blue.
And we can see that right there, that's one effect, other effects that you can do are in inner shadow.
You can do layer by layer and you can do background layer, so let's stick to our regular drop shadow.
The last part of here is the export so you can export any which way you want.
You can do multiple exports.
We can set this sizing kind of like the prefix you can set the of which file type you want really easily
be able to export those to whichever desktop you have, file folder and easily access all those files.
Next, we have text, so I'm going to delete this.
Nice square that we made, so I'm just going to click, delete or backspace and I'm going to select
T for the text and I'm just going to click.
And then a hello and a comment, which we will select all of them.
And you'll notice that they still have the similar properties, like we don't have the corner radius
here.
Yeah, that's basically kind of what we don't have.
But now we have a text and we can change the copy to be whatever font or typeface that you want.
In this case, we can do like Helvetica or something like that.
We have our different font options or weights and we can adjust the size we have leadin.
We have all those different options.
We have kerning in there, too.
So this will likely this will affect your line height.
You can set it manually, you can set your kerning and your letter spacing to whatever percentage you
want.
And you can still use those different options.
Like if you have text over image, you can select like a drop shadow effect to fix that if you have
any legibility or readability issues.
And that's all you really need to know for designing within Sigma, at least using design panel over
here.