1
00:00:00,330 --> 00:00:07,200
All righty, so in this video, we're going to be talking about figure what it is and how we are going

2
00:00:07,200 --> 00:00:12,430
to be using it and we're going to just set up the basics of our project.

3
00:00:13,080 --> 00:00:14,910
So first, what is Sigma?

4
00:00:15,570 --> 00:00:21,660
So this is a tool for web designers that allows them to create mockups and prototypes of websites,

5
00:00:21,930 --> 00:00:28,200
including all image and icon assets, as well as colors and layout positioning.

6
00:00:28,950 --> 00:00:33,810
As someone with years of graphic design experience, specifically working with layout and design.

7
00:00:34,080 --> 00:00:39,030
I can appreciate the connection between design and development that figure allows for.

8
00:00:39,720 --> 00:00:45,750
So I'm going to start by sharing a resource that in the course, I'm not going to go hugely in depth

9
00:00:45,750 --> 00:00:49,580
on this, but feel free to read about it at your leisure.

10
00:00:50,250 --> 00:00:57,120
The fundamental things that you need to know is that it works similar to Photoshop in that you have

11
00:00:57,120 --> 00:01:01,350
layers and each of these layers can have their own styling.

12
00:01:01,800 --> 00:01:09,600
In this case, it actually allows you as a designer to set the CSFs values for how it should be positioned

13
00:01:09,600 --> 00:01:10,400
on the page.

14
00:01:10,950 --> 00:01:13,190
And that's something we're going to look at as well.

15
00:01:13,950 --> 00:01:21,810
And the other main thing that is important is that it allows us to have shared styles so we can get

16
00:01:21,810 --> 00:01:24,720
the color styles from Sigma as well.

17
00:01:25,410 --> 00:01:30,570
And also the important thing is exporting image assets.

18
00:01:30,930 --> 00:01:35,010
So we'll get to this part later on in the next video.

19
00:01:35,550 --> 00:01:36,030
All right.

20
00:01:36,150 --> 00:01:39,960
Let's get started with our specific figure, a project.

21
00:01:40,620 --> 00:01:42,600
I will also provide this link.

22
00:01:43,600 --> 00:01:50,080
To the project, it is called landing page, it looks like this, and when you go to this link, you'll

23
00:01:50,080 --> 00:01:51,040
be greeted with this.

24
00:01:51,040 --> 00:01:57,700
If you've never gone to move before, the first thing you're going to need to do is log in in order

25
00:01:57,700 --> 00:02:01,000
to complete the handoff between the designer and the developer.

26
00:02:01,690 --> 00:02:03,100
So first, we're going to log in.

27
00:02:03,100 --> 00:02:04,690
I've already created my account.

28
00:02:04,690 --> 00:02:06,010
You can log in with Google.

29
00:02:06,610 --> 00:02:09,810
And once you do that, we can actually close this one for now.

30
00:02:10,300 --> 00:02:13,750
Once you do that, you can see that we have our landing page here.

31
00:02:13,750 --> 00:02:19,270
And as I hover over it, you can see that we have different layers, different assets happening here.

32
00:02:19,480 --> 00:02:22,810
I'm actually just going to zoom in to make this a little bit easier to see.

33
00:02:23,170 --> 00:02:24,310
One hundred and fifty percent.

34
00:02:24,820 --> 00:02:31,180
And then I want to make this fit within the page so I can actually use a keyboard shortcut in Sigma.

35
00:02:31,540 --> 00:02:33,670
So I'm just going to press shift and one.

36
00:02:34,090 --> 00:02:36,070
And now you can see that it's zoomed to fit.

37
00:02:37,110 --> 00:02:38,040
All right, awesome.

38
00:02:38,460 --> 00:02:43,140
So once you've logged in, this is all the work that the designer has done and essentially all we're

39
00:02:43,140 --> 00:02:46,490
trying to do is recreate this in our code.

40
00:02:47,340 --> 00:02:52,790
So the first thing you might notice on the left side here, we have a landing page when I click on it,

41
00:02:53,070 --> 00:02:55,320
this is our landing page layer, which is everything.

42
00:02:55,860 --> 00:03:00,870
You can see that we have some success over here, including a background linear gradient.

43
00:03:01,350 --> 00:03:06,060
If I collapse this, we can actually see that it's made up of a bunch of different layers.

44
00:03:06,060 --> 00:03:10,500
So you can see we have our main image, we have our branding, we have all of our other images here

45
00:03:10,500 --> 00:03:14,220
at the bottom, and we have our Appstore badges here.

46
00:03:14,430 --> 00:03:16,800
And then we have our text here as well.

47
00:03:17,430 --> 00:03:18,030
All right.

48
00:03:18,030 --> 00:03:20,970
So that's generally how everything's going to be laid out.

49
00:03:20,970 --> 00:03:24,960
As you click on them, you'll be able to export individual layers.

50
00:03:25,620 --> 00:03:28,230
But again, we'll get to that in the next video.

51
00:03:28,650 --> 00:03:32,360
So we're going to go back to clicking on the landing page.

52
00:03:32,370 --> 00:03:36,300
And this is the first styling we're going to apply within our project.

53
00:03:36,690 --> 00:03:41,430
But first, we're going to need to actually set up our project in visual studio code.

54
00:03:42,120 --> 00:03:47,640
So if we go back to our desktop here, we're going to start with the standard empty template.

55
00:03:47,640 --> 00:03:57,000
So I'm going to just use this, duplicate it, and then I'm going to rename it Splash Dash Page, and

56
00:03:57,000 --> 00:04:00,270
then I'm going to open this up in Visual Studio Code.

57
00:04:04,990 --> 00:04:08,260
OK, so we have our files open here, perfect.

58
00:04:08,830 --> 00:04:10,820
All right, let's start with the usual.

59
00:04:10,840 --> 00:04:19,380
We're going to change our title here to be Splash Page, and we can save that and then run our project.

60
00:04:20,680 --> 00:04:21,180
All right.

61
00:04:21,180 --> 00:04:22,510
So it's working.

62
00:04:22,540 --> 00:04:23,220
That's great.

63
00:04:23,890 --> 00:04:30,340
Now we can go back to our HTML, and the first thing we're going to do is we're actually going to create

64
00:04:30,340 --> 00:04:33,320
a wrapper div for everything.

65
00:04:34,000 --> 00:04:41,050
This is because we want the wrapper to be the 14 40 pixels and we want that to be able to be centered

66
00:04:41,050 --> 00:04:46,220
in the body because some screens will actually be wider than 14, 40 pixels.

67
00:04:46,220 --> 00:04:51,910
So if you have a 10 ADP monitor that with is actually 19, 20 instead of 14, 40.

68
00:04:52,360 --> 00:04:58,870
So to create a div with the class wrapper in visual studio code, we can actually just type period and

69
00:04:58,870 --> 00:04:59,620
then rapper.

70
00:04:59,710 --> 00:05:01,060
So that's the class.

71
00:05:01,060 --> 00:05:05,710
And then press enter and you see we have a div with the class of rapper.

72
00:05:06,310 --> 00:05:07,020
Very cool.

73
00:05:07,490 --> 00:05:09,280
OK, so we can save that.

74
00:05:09,730 --> 00:05:16,930
And if we jump back to figure here, we can see that we have some styling suggestions here.

75
00:05:17,320 --> 00:05:23,650
So the first thing we're going to do is we're actually going to copy the background first and we're

76
00:05:23,650 --> 00:05:27,400
going to put that in our body itself, actually.

77
00:05:27,700 --> 00:05:30,840
And we can get rid of this Midnite because we're going to deal with that later.

78
00:05:31,240 --> 00:05:35,170
And then we also want to style for our rapper.

79
00:05:36,310 --> 00:05:38,650
Itself and we'll jump back.

80
00:05:39,790 --> 00:05:45,940
To the browser and we're going to copy the physician relative and the width, but we're not going to

81
00:05:45,940 --> 00:05:50,110
copy the height because we want the height to be a little bit more dynamic than that.

82
00:05:51,010 --> 00:05:52,720
So we're going to paste that in there.

83
00:05:52,720 --> 00:06:00,370
So our position relative and we have our width of 14, 40 pixels, and instead of our solid height,

84
00:06:00,370 --> 00:06:02,920
we're going to have a more dynamic height.

85
00:06:02,920 --> 00:06:06,530
So we're going to give it a height of one hundred viewport height.

86
00:06:07,030 --> 00:06:12,880
So this is taking up one hundred percent of the screen real estate that's visible.

87
00:06:13,180 --> 00:06:18,010
If you increase the number more than that, it means you'll actually scroll down the page, which we

88
00:06:18,010 --> 00:06:19,540
will actually need to do later.

89
00:06:19,870 --> 00:06:23,300
And next, we're going to give this a margin of auto.

90
00:06:23,800 --> 00:06:31,030
So this is going to center our wrapper within our page if our page happens to be wider than 14, 40

91
00:06:31,150 --> 00:06:31,780
pixels.

92
00:06:32,170 --> 00:06:37,660
And I'm just going to give it a background of Dodger Blue now so you can see what I'm talking about.

93
00:06:38,350 --> 00:06:41,350
So we can save that now and jump back.

94
00:06:42,580 --> 00:06:49,870
OK, so we can see definitely a lot of blue happening here, but if we actually zoom out, we can see

95
00:06:49,870 --> 00:06:52,240
that we have our gradient background.

96
00:06:52,240 --> 00:06:54,670
It's very subtle, but there's a little bit of pink down here.

97
00:06:55,360 --> 00:07:02,440
And this is showing that our wrapper will remain centered even if the page is bigger than our 14 40

98
00:07:02,440 --> 00:07:03,060
pixels.

99
00:07:03,070 --> 00:07:04,970
So that's why we're using a wrapper here.

100
00:07:05,860 --> 00:07:06,250
All right.

101
00:07:06,280 --> 00:07:09,880
So I can set that zoom back to one hundred percent.

102
00:07:10,600 --> 00:07:11,020
All right.

103
00:07:11,020 --> 00:07:14,950
Now we're ready to start with the text for our project.

104
00:07:15,840 --> 00:07:22,350
So back in figure, we can see that we have a title here and we have some body text down here, so the

105
00:07:22,350 --> 00:07:27,360
first thing we're going to do is if we click on the title, we can see that we have a font family of

106
00:07:27,360 --> 00:07:29,010
future up t.

107
00:07:29,610 --> 00:07:35,460
So I personally know that this is a paid font and we want to stick with free fonts for our project.

108
00:07:35,730 --> 00:07:38,910
So I'm going to be changing this to Lato instead.

109
00:07:39,480 --> 00:07:42,300
So I'm going to jump over to Google fonts.

110
00:07:42,300 --> 00:07:45,660
In order to do that, you can choose a different font if you like.

111
00:07:45,660 --> 00:07:53,550
To me, this is a similar very popular font, so I'm just going to search Lato Lacto and I'm going to

112
00:07:53,550 --> 00:08:00,120
click on it and I'm going to scroll down and I'm going to select the regular font, going to go over

113
00:08:00,120 --> 00:08:07,890
to embed and I want to copy the import statement, so I'm going to highlight that copy that jump back

114
00:08:08,370 --> 00:08:10,350
and I'm going to pace that at the top.

115
00:08:10,950 --> 00:08:20,550
Quseir And then I'm also going to in the body, assign the font family to be lato comma sans serif as

116
00:08:20,550 --> 00:08:23,880
a backup just in case that doesn't load.

117
00:08:24,360 --> 00:08:30,830
Now we're going to need to build out the HTML with the font from our figure project.

118
00:08:31,530 --> 00:08:33,890
So first we will build out the text here.

119
00:08:34,560 --> 00:08:41,280
So we want our title and text comment title there and then we're going to create a parent container

120
00:08:41,280 --> 00:08:45,750
because we're also going to put in the App Store badges in here as well.

121
00:08:46,230 --> 00:08:50,340
So we're just going to use dot text dash container to create our div.

122
00:08:50,880 --> 00:08:59,220
And then inside of this, we're going to create an H1 dot title to specify this is our title class and

123
00:08:59,220 --> 00:09:02,490
then we're going to create a paragraph element.

124
00:09:02,490 --> 00:09:07,140
So P text to give that a class of text.

125
00:09:07,440 --> 00:09:13,650
And then we're going to jump back to the browser and close our Google fonts for now and go back to Sigma.

126
00:09:13,980 --> 00:09:19,680
And we want to actually copy the text so we can just copy this right here.

127
00:09:20,700 --> 00:09:24,470
And then jump back and we're going to put that in the title there.

128
00:09:25,610 --> 00:09:29,810
And then we're going to highlight this and we're going to copy the text here.

129
00:09:31,010 --> 00:09:33,920
And we can jump back, piece that in.

130
00:09:35,190 --> 00:09:40,380
OK, I'm going to use alt Z to word wrap so that we can actually see everything that reminds me, we

131
00:09:40,380 --> 00:09:41,490
can actually get rid of font.

132
00:09:41,490 --> 00:09:41,880
Awesome.

133
00:09:41,880 --> 00:09:44,540
We don't need that for this project, OK?

134
00:09:44,880 --> 00:09:47,960
And so we have our HTML done here.

135
00:09:48,240 --> 00:09:50,340
Let's save that and check it out.

136
00:09:52,790 --> 00:09:57,080
OK, so we have our fondant here and we have our Google font, so that's good.

137
00:09:57,080 --> 00:10:01,880
We can see that we now have a horizontal scroll bar, though, and that's definitely something that

138
00:10:01,880 --> 00:10:03,590
I don't want to have.

139
00:10:03,590 --> 00:10:11,900
I think that's usually a bad thing to have so we can fix that by switching our overflow X on the body

140
00:10:11,900 --> 00:10:12,970
to be hidden.

141
00:10:13,550 --> 00:10:17,960
So we'll go back to our success here and below our margin.

142
00:10:18,710 --> 00:10:20,630
We're in type overflow Desh X.

143
00:10:20,710 --> 00:10:22,220
This is only four left right.

144
00:10:22,670 --> 00:10:24,320
And we want that to be hidden.

145
00:10:25,510 --> 00:10:27,250
OK, we can save that in check.

146
00:10:27,640 --> 00:10:28,620
All right, perfect.

147
00:10:28,870 --> 00:10:32,110
We got rid of our horizontal scroll bar at the bottom here.

148
00:10:33,060 --> 00:10:37,890
So we still have margin above our each one, as you can see, there's a bit of white here, but let's

149
00:10:37,890 --> 00:10:41,490
copy the styling from the first to see what changes.

150
00:10:42,360 --> 00:10:46,440
So back in figure, I'm going to go over to our title again.

151
00:10:47,410 --> 00:10:53,410
And I'm going to copy all of this, but I am going to get rid of that specific font family, I'm going

152
00:10:53,410 --> 00:10:57,370
to copy the color, but I'm going to copy that separately because I'm going to put that in the body

153
00:10:57,370 --> 00:10:59,440
instead of having to have it in both of them.

154
00:11:00,280 --> 00:11:05,050
So we're going to go right below here and we're going to have a class for our title.

155
00:11:05,360 --> 00:11:12,040
And at a pace that in I'm going to highlight all of these press tabs so that it's indented properly.

156
00:11:12,370 --> 00:11:20,200
And I'm going to get rid of this font family here and I'm going to go back to figure to copy the color

157
00:11:20,200 --> 00:11:20,650
here.

158
00:11:22,840 --> 00:11:27,070
And we're going to paste that right here above our background color.

159
00:11:29,860 --> 00:11:38,800
Then I'm going to go back and copy these CSFs for our body text here so you can see that we have a position

160
00:11:38,800 --> 00:11:42,370
of absolute so that is setting exactly where would they want it on the page.

161
00:11:43,060 --> 00:11:49,570
So that's why having our wrapper be 14, 40 pixels is so important, because all of this is relative

162
00:11:49,870 --> 00:11:52,480
to that 14, 40 pixel width.

163
00:11:53,580 --> 00:12:01,170
OK, and we'll jump back and below this, we're going to use our text class here and we're going to

164
00:12:01,170 --> 00:12:03,390
paste this same thing.

165
00:12:03,390 --> 00:12:08,520
We're just going to highlight this, tab it over, and then remove our font family.

166
00:12:09,270 --> 00:12:11,970
And we can save that now and check it out.

167
00:12:13,710 --> 00:12:18,280
OK, so that's definitely looking a lot better.

168
00:12:18,300 --> 00:12:21,120
It is exactly where it should be on the page.

169
00:12:21,120 --> 00:12:27,360
So you can see if we go back that we have a gap here and we have a gap here on the top, which we are

170
00:12:27,360 --> 00:12:29,070
maintaining perfect.

171
00:12:29,130 --> 00:12:34,980
So our positioning is working out and copying over our success is going pretty smoothly so far.

172
00:12:35,700 --> 00:12:37,260
I can actually get rid of the.

173
00:12:38,150 --> 00:12:43,280
Background Dodger Blue, that was just to show how the rapper will remain centered on the page.

174
00:12:44,120 --> 00:12:45,400
OK, cool.

175
00:12:45,830 --> 00:12:51,080
In the next video, now that we have our position where we want it to be, we're going to be starting

176
00:12:51,080 --> 00:12:53,570
to tackle the image assets.

177
00:12:54,050 --> 00:12:56,450
So I'll see in that one by four now.