0
1
00:00:00,240 --> 00:00:02,940
We know how to gather inspiration for our projects.
1

2
00:00:03,070 --> 00:00:07,380
And now we're going to learn how to use that inspiration for our designs.
2

3
00:00:07,380 --> 00:00:12,810
As I mentioned before there are 3 stages to the mimic method which is copying, remix and the final
3

4
00:00:12,810 --> 00:00:14,760
stage - creating.
4

5
00:00:14,760 --> 00:00:18,050
In this lesson we're going to practice first one, the copying.
5

6
00:00:18,040 --> 00:00:21,550
You're going to fully recreate Figma's home page.
6

7
00:00:21,600 --> 00:00:26,610
Your objective is to match their design as closely as possible pixel by pixel.
7

8
00:00:26,640 --> 00:00:29,600
By doing so, you'll gain valuable hands on experience,
8

9
00:00:29,670 --> 00:00:35,190
you'll practice designing very common website elements, such as navigation bars and different components.
9

10
00:00:35,190 --> 00:00:40,560
And footer and all that. And do all that while you don't have to worry about colors, and typefaces, and
10

11
00:00:40,560 --> 00:00:42,480
fonts, and layouts and all,
11

12
00:00:42,660 --> 00:00:46,470
all the design stuff. Because you're just, you know, copying what's already there.
12

13
00:00:46,500 --> 00:00:49,910
One small step at a time, just like learning how to cook or play a guitar.
13

14
00:00:50,320 --> 00:00:52,950
Okay, so open the Figma file link to this video.
14

15
00:00:52,950 --> 00:00:55,560
Here you'll find the screenshot of Figma's homepage.
15

16
00:00:55,560 --> 00:00:57,210
It's not a full home page.
16

17
00:00:57,330 --> 00:01:02,370
I have removed some of the sections to keep things simple and it might not be the current version of their
17

18
00:01:02,370 --> 00:01:03,170
actual home page.
18

19
00:01:03,180 --> 00:01:03,810
But that's okay.
19

20
00:01:03,810 --> 00:01:09,340
We don't care about that. It's pretty simple and timeless design so it's perfect for this assignment.
20

21
00:01:09,420 --> 00:01:14,220
On the right, there is a blank frame, where you will recreate this exact home page. When you work on
21

22
00:01:14,220 --> 00:01:18,450
this assignment, I want you to notice all those design principles that you've learned so far.
22

23
00:01:18,450 --> 00:01:21,290
Notice how are they using hierarchy and contrast,
23

24
00:01:21,300 --> 00:01:27,090
how are alignments made. Notice things that you think they've done well, and those that you think might be
24

25
00:01:27,090 --> 00:01:28,540
improved. With what you have
25

26
00:01:28,570 --> 00:01:33,180
practised in Figma already, you know enough to complete this task. Although, I'll get things started and
26

27
00:01:33,180 --> 00:01:34,710
demonstrate some of the parts.
27

28
00:01:34,710 --> 00:01:38,680
First, let's prepare some guides, so we know where to align our objects.
28

29
00:01:38,700 --> 00:01:43,320
It doesn't look like they're using a strict grid here on their website. Or at least I couldn't figure
29

30
00:01:43,320 --> 00:01:44,950
it out, but I don't think they are.
30

31
00:01:44,970 --> 00:01:47,560
So we are going to have to draw guides manually.
31

32
00:01:47,700 --> 00:01:52,460
This is quite simple in Figma. In the menu search for the ruler, so you can enable it.
32

33
00:01:53,730 --> 00:01:59,040
Once you click on it, you'll get this vertical and horizontal ruler on the page. To draw a horizontal
33

34
00:01:59,040 --> 00:02:04,800
guide, click and drag from the horizontal ruler. And you'll get this horizontal guide which you can
34

35
00:02:04,800 --> 00:02:09,360
position anywhere on the page, or on the frame. And the same thing goes for the vertical guide.
35

36
00:02:12,570 --> 00:02:15,090
Now, where do we draw these guides? On this frame,
36

37
00:02:15,090 --> 00:02:17,690
I have included the screenshot of the home page.
37

38
00:02:17,850 --> 00:02:19,060
It's hidden now.
38

39
00:02:19,170 --> 00:02:24,280
If you enable it, you can use this as your helper, when comparing your design with the original.
39

40
00:02:24,360 --> 00:02:29,940
While you have this enabled draw the guides on the edges of some of their elements so you can define
40

41
00:02:29,940 --> 00:02:33,570
the container where they have all their content put together.
41

42
00:02:49,800 --> 00:02:56,980
That should be enough for now. To delete the guide, just select it and hit delete.
42

43
00:02:57,180 --> 00:02:58,820
You can hide the screenshot now.
43

44
00:02:58,980 --> 00:03:00,690
Next, let's paint the background.
44

45
00:03:09,090 --> 00:03:10,830
Let's insert the hero image.
45

46
00:03:10,950 --> 00:03:16,380
I have actually saved all of the image assets in this file. So you can easily insert them in your design.
46

47
00:03:16,530 --> 00:03:21,660
They are inside this components Tab. Components in Figma are elements that we can create and reuse later.
47

48
00:03:21,660 --> 00:03:26,690
This is a cool feature and we will talk about it more in more detail in a later lesson.
48

49
00:03:26,700 --> 00:03:30,900
But for now, all you need the components for is to grab the image assets.
49

50
00:03:30,900 --> 00:03:34,240
You can also find these images in the components page.
50

51
00:03:34,260 --> 00:03:37,170
This is actually where Figma is grabbing their components from.
51

52
00:03:37,170 --> 00:03:42,000
So if you delete something here, it's going to disappear from the components panel as well. So find the
52

53
00:03:42,000 --> 00:03:44,540
hero shot and drag it onto the page.
53

54
00:03:44,550 --> 00:03:54,020
The same thing you can do with every other image, including the logo.
54

55
00:03:54,050 --> 00:03:55,490
Now let's insert the text.
55

56
00:04:05,970 --> 00:04:10,840
The typeface that they are using is a paid font, so instead, I found a free alternative on Google fonts
56

57
00:04:10,870 --> 00:04:12,400
that look sort of similar.
57

58
00:04:12,400 --> 00:04:13,390
It's called Karla.
58

59
00:04:13,960 --> 00:04:16,870
It's not an exact match, but a pretty decent substitute.
59

60
00:04:23,690 --> 00:04:26,040
They are using a bold style for the headline.
60

61
00:04:37,960 --> 00:04:39,540
Let's add the paragraph underneath.
61

62
00:04:46,950 --> 00:05:11,900
It looks like it's 18 pixels in size. And a little extra on the line height.
62

63
00:05:11,950 --> 00:05:13,570
Now lets add the button.
63

64
00:05:13,570 --> 00:05:15,780
Buttons are just rectangles with text in it.
64

65
00:05:15,810 --> 00:05:17,650
So we draw a rectangle.
65

66
00:05:17,650 --> 00:05:23,110
I'm going to enable the screenshot guide to draw the rectangle over it. And just sample the color from
66

67
00:05:23,110 --> 00:05:23,620
the button.
67

68
00:05:32,560 --> 00:05:34,990
Their buttons have rounded corners. To do the same
68

69
00:05:34,990 --> 00:05:38,760
we can change corner radius of our rectangle from the properties panel.
69

70
00:05:38,800 --> 00:05:42,470
Not sure how many pixels they are using, so we're gonna have to do that by eye.
70

71
00:05:45,880 --> 00:05:47,590
4 seems like a good match.
71

72
00:05:47,590 --> 00:05:49,710
Lastly we need to add the button text.
72

73
00:05:49,750 --> 00:05:52,860
It seems like the text size is same as the paragraph.
73

74
00:06:01,450 --> 00:06:06,790
We just have to center align the text. And also align the text with a rectangle from the alignment panel.
74

75
00:06:12,880 --> 00:06:13,150
Okay.
75

76
00:06:13,150 --> 00:06:17,490
There is just one more thing, I'm going to show you how to do. And the rest is up to you.
76

77
00:06:17,500 --> 00:06:22,570
We haven't had a chance to design a field like this yet, with the border. As usual, this is just a rectangle
77

78
00:06:22,570 --> 00:06:29,230
without a fill color, but with a border. In Figma that's called a Stroke. Which you can add to any rectangle
78

79
00:06:29,230 --> 00:06:31,840
from the Stroke Settings on the properties panel.
79

80
00:06:35,040 --> 00:06:41,160
Remove the fill of the rectangle by clicking Minus icon on the fill, or just change it to white.
80

81
00:06:47,410 --> 00:06:50,560
Changing the color of the stroke happens just like anything else.
81

82
00:06:54,700 --> 00:07:00,150
And you can change the thickness from here if you need to. And that's all.
82

83
00:07:00,150 --> 00:07:01,400
Now you know everything you need.
83

84
00:07:01,470 --> 00:07:02,490
Oh, and one last thing.
84

85
00:07:02,490 --> 00:07:08,370
This section right here has a longer text. I have included this text in the page here, so you don't have
85

86
00:07:08,370 --> 00:07:10,950
to type them out manually. That's it.
86

87
00:07:10,950 --> 00:07:11,390
Have fun.