Hey and welcome back.
Today, we're going to be using fake money to create our very own grid, Sigma is a pretty powerful
and flexible tool when you working with grids and there's so much you can do because of the way you
can nest frames and styles and constraints.
So let's jump in so I can show you what we can do here.
So let's utilize the frame.
Now, this is super cool.
We're going to create our own grid with a base unit of six.
So we're keeping our base unit in mind at all times.
So F and over here, I have a bunch of grids I can choose from and I'm just going to pick a standard
grid.
This one looks good and MacBook right there.
And let's just name it subcommander for Quick Shortcut, so, ah, I'd love it.
Very original name.
Now, what we're going to do is we're going to select our frame and we're going over here and we're
going to go to Leo Gret, press the plus sign.
And automatically when you press the plus line, you get this grid based off 10 pixels.
And if you zoom in there, 10 pixels.
Now, we don't want to use this.
What we do want to use is we want to go over to here and we want to select.
There we go.
Now here we can kind of set the amount of calm, the gutter, the margin, any other types of settings
that you really want.
You can make your grid blue, make it whatever color you want.
Typically, red is what I set it to.
But it's helpful if you have other grids laying on top of each other.
What we're going to do is bring a set number of columns to 12.
Did just that, so they were about 12 columns here.
We're going to set the gutter to 16 and the margin to 16 and we're going to keep this to stretch.
So that way it stretches when we move it.
Perfect.
There's our great steak.
Look, see, it stretches as we move, it does look confusing.
There you go.
Now, another cool thing is that in FIGLIA, we can start to apply grades even to frames within our
label.
So that means we can apply not only to the main frame that dictates our screen size, but we'll be able
to apply to individual containers or even like components, like UI elements.
So let's make a card element.
So I'm going to do is I'm going to press F for another frame.
This right here.
And one going to do is the same exact thing, I'm going to create a little grid, so go over here,
select columns, and this is a good case where you would want to probably change the color because it
gets a little confusing sometimes.
I like to even, like, make the opacity just a little bit darker.
So the 20 there.
Now, this would be a container and you could set it to whatever you like.
Typically you don't like have 12 columns on this.
There we go, and it's like even a margin of 16 if we wanted to, but let's scale down the amount of
Coatsworth.
So over here we have four.
I think that's that's OK for now.
Like I said, nothing's really set in stone.
But let's set that grid.
So there's our grid.
It's on our elements over here.
You can see it's attached to that grid.
Now, this is pretty cool, right?
Like, you could create cards and those cards could be really uniform in style based off of your grid
within the grid.
And they'll be able to scale now.
Oh, I see, it's not fluid.
And let's get into constraints and I'll teach you how that works.
So another scene on the grid now.
The concerts are much more interesting.
So you remember, like when we were trying to do fluid layouts like we were just doing right now and
things weren't working as we expected to or as we saw before.
Now, stigma allows you to play a thing called constraints to a frame that's like this frame of perfect
and these are constraints on the right side.
This will help you control element sizes in relation to the actual parent frame.
So this is our parent frame and this is going to resize in relation to that.
So this card element we're going to do is we're going to just set we're going to shift and click on
here and you'll see that it's left and right now.
So that means that when I resize my parent frame, it's going to change with that.
Just so you can better see it.
What we're going to do is we're just going to set that to like Gray and we're going to turn off grids
by pressing for marketers control.
So I'm going to take off that grid, I'm going to create these ones and give them a feel good, just
do something like that.
So this one is the one with the constraints.
These ones do not have contracts.
And you'll notice that that stays perfectly on our grid while the others don't.
You can even do this from the top and bottom as well, so you'll notice that if I'm going to do this,
this will skill top to bottom with my parent frame.
The others won't do that.
They'll only move with the top because of the constraint they have is taught and left, and they'll
only move with the left because that is what the that is what the constraint is.
Setsu.
So applying these constraints allow us to maintain a fixed layout based off of our columns and gutters,
please, for the sake of your own sanity, you should save your grids as styles.
That way, we aren't constantly repeating ourselves when we create a new frame.
Also, it keeps things neat in one place, so when you need to apply it to a frame, you just select
the style easily like this, this is where you would select your style.
We don't have any style say here and let's just go and create one quick.
So let's just delete these cards.
This is our 12th column Standard Grid.
And what we're going to do is we're going to click that style button.
We are going to click create a style and we're going to name it, naming conventions and things that
are really cool as well.
So what we're going to do here is this is how you would set and break up your grid styles.
I'm going to just layout grid and I'm going to separate it like that.
And the actual name of the grid, I'm going to call it my 12 call and I'm going to create that style
notice.
And you saw that title that I gave it, this little grid.
We can even create another grid here.
Create a baseline grid and set out to auto to the top, and like I said, I like using a four pixel
grid here, no offset, and the gutters will be four and you can combine grids.
I can create another column grid on top of this system and merge into 16 satellite gutta to 16 pixels,
if you want, you can set the color just to differentiate between both of them.
And you can see these two as a style as well right there.
And I can just name these combined and we can call that 12 Colleville and four pixel bassline and the
Riggo.
So they're under combined and you can name many which way you want.
We'll get into that much more later.
But this is just a perfect way to create a new frame.
Go into my little grid appliance style.
Change styles easily, so please do that for your own sanity, it'll help you in the future, just kind
of not have to recreate the wheel over and over again because it's not really fun creating the grid,
but just to apply it easily to your layout.
And another great thing is if I want to edit that grid, I can do so.
I can go right here at the colors and it's going to edit everywhere else.
So what you do is you just press this, you click onto this edit style section and you can edit it.
You can even give it a description like really awesome grid.
And there you go.
That is how you make a grid and sigma.