1
00:00:00,610 --> 00:00:01,810
Hey and welcome back.

2
00:00:02,680 --> 00:00:08,240
Today, we're going to be using fake money to create our very own grid, Sigma is a pretty powerful

3
00:00:08,240 --> 00:00:12,610
and flexible tool when you working with grids and there's so much you can do because of the way you

4
00:00:12,610 --> 00:00:15,610
can nest frames and styles and constraints.

5
00:00:16,090 --> 00:00:18,550
So let's jump in so I can show you what we can do here.

6
00:00:19,150 --> 00:00:21,790
So let's utilize the frame.

7
00:00:22,270 --> 00:00:23,290
Now, this is super cool.

8
00:00:23,300 --> 00:00:25,960
We're going to create our own grid with a base unit of six.

9
00:00:25,960 --> 00:00:28,420
So we're keeping our base unit in mind at all times.

10
00:00:28,930 --> 00:00:34,720
So F and over here, I have a bunch of grids I can choose from and I'm just going to pick a standard

11
00:00:34,720 --> 00:00:34,990
grid.

12
00:00:35,680 --> 00:00:39,190
This one looks good and MacBook right there.

13
00:00:40,450 --> 00:00:47,040
And let's just name it subcommander for Quick Shortcut, so, ah, I'd love it.

14
00:00:47,960 --> 00:00:48,870
Very original name.

15
00:00:49,700 --> 00:00:56,720
Now, what we're going to do is we're going to select our frame and we're going over here and we're

16
00:00:56,720 --> 00:01:00,350
going to go to Leo Gret, press the plus sign.

17
00:01:01,010 --> 00:01:06,110
And automatically when you press the plus line, you get this grid based off 10 pixels.

18
00:01:06,110 --> 00:01:08,810
And if you zoom in there, 10 pixels.

19
00:01:09,240 --> 00:01:10,430
Now, we don't want to use this.

20
00:01:12,720 --> 00:01:17,340
What we do want to use is we want to go over to here and we want to select.

21
00:01:18,690 --> 00:01:19,400
There we go.

22
00:01:19,890 --> 00:01:26,220
Now here we can kind of set the amount of calm, the gutter, the margin, any other types of settings

23
00:01:26,220 --> 00:01:26,820
that you really want.

24
00:01:26,820 --> 00:01:31,310
You can make your grid blue, make it whatever color you want.

25
00:01:32,010 --> 00:01:33,700
Typically, red is what I set it to.

26
00:01:33,710 --> 00:01:37,570
But it's helpful if you have other grids laying on top of each other.

27
00:01:38,400 --> 00:01:41,340
What we're going to do is bring a set number of columns to 12.

28
00:01:43,460 --> 00:01:46,630
Did just that, so they were about 12 columns here.

29
00:01:47,320 --> 00:01:54,820
We're going to set the gutter to 16 and the margin to 16 and we're going to keep this to stretch.

30
00:01:55,390 --> 00:01:57,310
So that way it stretches when we move it.

31
00:01:58,490 --> 00:01:58,940
Perfect.

32
00:01:59,240 --> 00:02:00,780
There's our great steak.

33
00:02:00,800 --> 00:02:06,410
Look, see, it stretches as we move, it does look confusing.

34
00:02:06,440 --> 00:02:06,850
There you go.

35
00:02:07,430 --> 00:02:12,320
Now, another cool thing is that in FIGLIA, we can start to apply grades even to frames within our

36
00:02:12,320 --> 00:02:12,730
label.

37
00:02:12,900 --> 00:02:18,530
So that means we can apply not only to the main frame that dictates our screen size, but we'll be able

38
00:02:18,530 --> 00:02:22,540
to apply to individual containers or even like components, like UI elements.

39
00:02:23,270 --> 00:02:25,330
So let's make a card element.

40
00:02:25,340 --> 00:02:27,470
So I'm going to do is I'm going to press F for another frame.

41
00:02:30,380 --> 00:02:31,340
This right here.

42
00:02:33,020 --> 00:02:38,960
And one going to do is the same exact thing, I'm going to create a little grid, so go over here,

43
00:02:39,260 --> 00:02:44,450
select columns, and this is a good case where you would want to probably change the color because it

44
00:02:44,450 --> 00:02:46,580
gets a little confusing sometimes.

45
00:02:46,580 --> 00:02:50,330
I like to even, like, make the opacity just a little bit darker.

46
00:02:50,750 --> 00:02:51,930
So the 20 there.

47
00:02:52,460 --> 00:02:55,970
Now, this would be a container and you could set it to whatever you like.

48
00:02:55,980 --> 00:02:58,970
Typically you don't like have 12 columns on this.

49
00:03:01,830 --> 00:03:08,520
There we go, and it's like even a margin of 16 if we wanted to, but let's scale down the amount of

50
00:03:09,090 --> 00:03:09,720
Coatsworth.

51
00:03:10,440 --> 00:03:11,760
So over here we have four.

52
00:03:11,970 --> 00:03:13,920
I think that's that's OK for now.

53
00:03:14,320 --> 00:03:15,840
Like I said, nothing's really set in stone.

54
00:03:15,840 --> 00:03:17,670
But let's set that grid.

55
00:03:17,820 --> 00:03:18,790
So there's our grid.

56
00:03:18,810 --> 00:03:21,810
It's on our elements over here.

57
00:03:22,680 --> 00:03:24,390
You can see it's attached to that grid.

58
00:03:25,500 --> 00:03:27,700
Now, this is pretty cool, right?

59
00:03:27,730 --> 00:03:34,980
Like, you could create cards and those cards could be really uniform in style based off of your grid

60
00:03:34,980 --> 00:03:35,730
within the grid.

61
00:03:36,540 --> 00:03:39,120
And they'll be able to scale now.

62
00:03:40,730 --> 00:03:43,310
Oh, I see, it's not fluid.

63
00:03:44,350 --> 00:03:47,710
And let's get into constraints and I'll teach you how that works.

64
00:03:48,040 --> 00:03:50,350
So another scene on the grid now.

65
00:03:50,350 --> 00:03:52,060
The concerts are much more interesting.

66
00:03:53,050 --> 00:03:56,890
So you remember, like when we were trying to do fluid layouts like we were just doing right now and

67
00:03:56,890 --> 00:03:59,650
things weren't working as we expected to or as we saw before.

68
00:04:00,850 --> 00:04:06,520
Now, stigma allows you to play a thing called constraints to a frame that's like this frame of perfect

69
00:04:06,670 --> 00:04:09,290
and these are constraints on the right side.

70
00:04:10,120 --> 00:04:15,700
This will help you control element sizes in relation to the actual parent frame.

71
00:04:15,730 --> 00:04:19,540
So this is our parent frame and this is going to resize in relation to that.

72
00:04:19,990 --> 00:04:27,940
So this card element we're going to do is we're going to just set we're going to shift and click on

73
00:04:27,940 --> 00:04:30,150
here and you'll see that it's left and right now.

74
00:04:30,550 --> 00:04:36,370
So that means that when I resize my parent frame, it's going to change with that.

75
00:04:37,480 --> 00:04:39,040
Just so you can better see it.

76
00:04:39,040 --> 00:04:44,700
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

77
00:04:44,710 --> 00:04:47,280
by pressing for marketers control.

78
00:04:52,080 --> 00:04:58,920
So I'm going to take off that grid, I'm going to create these ones and give them a feel good, just

79
00:04:58,920 --> 00:05:00,130
do something like that.

80
00:05:00,930 --> 00:05:02,730
So this one is the one with the constraints.

81
00:05:02,760 --> 00:05:04,650
These ones do not have contracts.

82
00:05:04,860 --> 00:05:09,780
And you'll notice that that stays perfectly on our grid while the others don't.

83
00:05:11,810 --> 00:05:17,570
You can even do this from the top and bottom as well, so you'll notice that if I'm going to do this,

84
00:05:17,990 --> 00:05:21,270
this will skill top to bottom with my parent frame.

85
00:05:21,620 --> 00:05:22,880
The others won't do that.

86
00:05:23,150 --> 00:05:28,670
They'll only move with the top because of the constraint they have is taught and left, and they'll

87
00:05:28,670 --> 00:05:33,740
only move with the left because that is what the that is what the constraint is.

88
00:05:33,740 --> 00:05:34,160
Setsu.

89
00:05:36,660 --> 00:05:43,020
So applying these constraints allow us to maintain a fixed layout based off of our columns and gutters,

90
00:05:43,440 --> 00:05:47,990
please, for the sake of your own sanity, you should save your grids as styles.

91
00:05:48,450 --> 00:05:52,110
That way, we aren't constantly repeating ourselves when we create a new frame.

92
00:05:53,000 --> 00:05:58,680
Also, it keeps things neat in one place, so when you need to apply it to a frame, you just select

93
00:05:58,680 --> 00:06:02,660
the style easily like this, this is where you would select your style.

94
00:06:03,680 --> 00:06:06,630
We don't have any style say here and let's just go and create one quick.

95
00:06:06,780 --> 00:06:09,590
So let's just delete these cards.

96
00:06:10,040 --> 00:06:12,940
This is our 12th column Standard Grid.

97
00:06:13,250 --> 00:06:15,580
And what we're going to do is we're going to click that style button.

98
00:06:16,070 --> 00:06:21,290
We are going to click create a style and we're going to name it, naming conventions and things that

99
00:06:21,290 --> 00:06:22,680
are really cool as well.

100
00:06:22,940 --> 00:06:27,800
So what we're going to do here is this is how you would set and break up your grid styles.

101
00:06:28,070 --> 00:06:33,830
I'm going to just layout grid and I'm going to separate it like that.

102
00:06:34,220 --> 00:06:41,570
And the actual name of the grid, I'm going to call it my 12 call and I'm going to create that style

103
00:06:41,840 --> 00:06:42,410
notice.

104
00:06:42,410 --> 00:06:45,350
And you saw that title that I gave it, this little grid.

105
00:06:45,710 --> 00:06:49,010
We can even create another grid here.

106
00:06:53,030 --> 00:07:02,450
Create a baseline grid and set out to auto to the top, and like I said, I like using a four pixel

107
00:07:02,450 --> 00:07:08,420
grid here, no offset, and the gutters will be four and you can combine grids.

108
00:07:09,360 --> 00:07:19,200
I can create another column grid on top of this system and merge into 16 satellite gutta to 16 pixels,

109
00:07:21,060 --> 00:07:24,720
if you want, you can set the color just to differentiate between both of them.

110
00:07:26,820 --> 00:07:31,100
And you can see these two as a style as well right there.

111
00:07:32,250 --> 00:07:46,410
And I can just name these combined and we can call that 12 Colleville and four pixel bassline and the

112
00:07:46,410 --> 00:07:46,770
Riggo.

113
00:07:46,980 --> 00:07:50,330
So they're under combined and you can name many which way you want.

114
00:07:50,520 --> 00:07:52,680
We'll get into that much more later.

115
00:07:52,680 --> 00:07:55,980
But this is just a perfect way to create a new frame.

116
00:07:59,000 --> 00:08:01,640
Go into my little grid appliance style.

117
00:08:05,020 --> 00:08:11,380
Change styles easily, so please do that for your own sanity, it'll help you in the future, just kind

118
00:08:11,380 --> 00:08:15,640
of not have to recreate the wheel over and over again because it's not really fun creating the grid,

119
00:08:16,000 --> 00:08:18,660
but just to apply it easily to your layout.

120
00:08:19,030 --> 00:08:22,990
And another great thing is if I want to edit that grid, I can do so.

121
00:08:22,990 --> 00:08:29,590
I can go right here at the colors and it's going to edit everywhere else.

122
00:08:30,460 --> 00:08:38,380
So what you do is you just press this, you click onto this edit style section and you can edit it.

123
00:08:38,740 --> 00:08:45,330
You can even give it a description like really awesome grid.

124
00:08:46,810 --> 00:08:47,730
And there you go.

125
00:08:48,940 --> 00:08:50,650
That is how you make a grid and sigma.