0
1
00:00:00,150 --> 00:00:02,900
Before we dive into design, let's first set up Figma.
1

2
00:00:02,910 --> 00:00:04,380
It's going to be a quick overview.
2

3
00:00:04,380 --> 00:00:11,430
I'm going to show you, just a general understanding of how the tool works, and all the important features
3

4
00:00:11,700 --> 00:00:15,350
that we will need, to design websites in Figma.
4

5
00:00:15,410 --> 00:00:21,780
I will teach you them and show you them, as we move through the material, and as you need
5

6
00:00:21,780 --> 00:00:22,230
them, 
6

7
00:00:22,320 --> 00:00:34,790
not right away. So, first things first, let's download Figma, right?
7

8
00:00:34,850 --> 00:00:40,910
We have two options: Mac and Windows.  I'm on a Mac, but Windows App works and looks the same.
8

9
00:00:40,910 --> 00:00:45,020
So even on Windows, you'll be able to follow my tutorials perfectly.
9

10
00:00:45,020 --> 00:00:50,870
If you're on Linux or some other operating system, don't worry, you can use Figma directly in your browser.
10

11
00:00:50,870 --> 00:00:56,680
It's that awesome, but I strongly recommend using desktop app, if you have a chance.
11

12
00:00:56,720 --> 00:01:01,480
These are Font Installers, which are needed for the browser only. If you're downloading the app,
12

13
00:01:01,490 --> 00:01:03,400
don't worry about this.
13

14
00:01:03,430 --> 00:01:05,930
Now, let's install it. On a Mac,
14

15
00:01:05,930 --> 00:01:09,640
it just needs to be moved to the Applications folder and that's all.
15

16
00:01:11,750 --> 00:01:17,120
No idea how it works on Windows, but I'm sure it's not your first time installing an application, so just
16

17
00:01:17,120 --> 00:01:27,350
go with a usual installation.
17

18
00:01:27,370 --> 00:01:32,620
This is the initial screen, sign up with Google if you want to make it easier, or click here to sign up
18

19
00:01:32,620 --> 00:01:33,200
with an e-mail.
19

20
00:01:40,010 --> 00:01:42,410
Your name: Vako.
20

21
00:01:42,410 --> 00:01:46,470
What kind of work you do: Design. Create Account.
21

22
00:01:49,520 --> 00:01:53,620
And we're going to arrive on our home page, which is our file browser.
22

23
00:01:53,860 --> 00:02:00,740
All your Figma files will show here. Figma is cloud based, so you will need internet when working
23

24
00:02:00,740 --> 00:02:01,400
on it.
24

25
00:02:01,520 --> 00:02:08,510
You can work offline, but only if you load the file before going offline. Then you can work with a file
25

26
00:02:08,540 --> 00:02:13,010
and once you get back online, it will sync and update the file.
26

27
00:02:13,640 --> 00:02:19,310
It's okay, but I wouldn't recommend doing this. Just you know, make sure you're always online, when
27

28
00:02:19,580 --> 00:02:20,440
working on it.
28

29
00:02:20,450 --> 00:02:22,360
Let's start by creating a new file.
29

30
00:02:22,400 --> 00:02:24,800
We can do that from here or here.
30

31
00:02:30,970 --> 00:02:33,860
Let's close the onboarding tutorial.
31

32
00:02:33,900 --> 00:02:35,250
Now we are in the Figma editor.
32

33
00:02:35,280 --> 00:02:38,640
This is where everything happens.
33

34
00:02:38,640 --> 00:02:40,020
Nothing to be scared of.
34

35
00:02:40,020 --> 00:02:41,150
It's quite simple.
35

36
00:02:41,280 --> 00:02:43,540
Open files will show as taps.
36

37
00:02:43,540 --> 00:02:49,950
Sort of like your browser, and if you want to get back to the home page to open another file, you can
37

38
00:02:49,950 --> 00:02:52,110
do that from this icon right here.
38

39
00:02:55,030 --> 00:02:56,550
Let's go through a toolbar here.
39

40
00:02:56,560 --> 00:02:59,390
As you can see, it only has a handful of tools.
40

41
00:02:59,500 --> 00:03:02,150
Nothing like what you'd get in Photoshop.
41

42
00:03:02,260 --> 00:03:08,560
First one is a menu, it has a search field, which is a great way to find an option that you're looking for.
42

43
00:03:08,560 --> 00:03:15,000
For example zoom. Then is a Move tool: the default tool that is selected by, most of the time.
43

44
00:03:15,410 --> 00:03:19,310
It does exactly what it says, it moves objects and interacts with them.
44

45
00:03:19,330 --> 00:03:20,770
The next one is the frame tool.
45

46
00:03:20,770 --> 00:03:24,880
It's similar to artboard that you get in other design tools.
46

47
00:03:25,030 --> 00:03:29,680
All our designs will start with a frame, depending what we are designing for.
47

48
00:03:29,710 --> 00:03:34,210
We need to choose a specific size, the screen that we are designing for.
48

49
00:03:34,210 --> 00:03:40,030
So either we are designing a screen for a desktop computer, a laptop, iPhone and so on. As this is 
49

50
00:03:40,030 --> 00:03:46,730
a web design course, we will be designing for a desktop and laptop computers.
50

51
00:03:46,810 --> 00:03:53,380
We can draw it, but better option is to choose one of the preset sizes. We can choose the screen from
51

52
00:03:53,380 --> 00:03:55,050
this drop down.
52

53
00:03:55,060 --> 00:04:00,460
There are iPhones, Androids, Tablets we're going to choose one of the desktop screen sizes obviously.
53

54
00:04:00,460 --> 00:04:06,430
You're not stuck with these dimensions, if you want to you can resize it like this.
54

55
00:04:10,680 --> 00:04:12,380
Next is a shape tool.
55

56
00:04:12,390 --> 00:04:18,960
When you click a tiny arrow, it will let you select any of the following shapes: rectangle, line etc.
56

57
00:04:19,080 --> 00:04:20,190
Let's draw a rectangle.
57

58
00:04:20,190 --> 00:04:26,410
It's the first thing selected by default. And on the frame, you draw a rectangle like this.
58

59
00:04:26,580 --> 00:04:28,710
Same logic for other shapes.
59

60
00:04:28,710 --> 00:04:29,850
Then we have a Pen tool.
60

61
00:04:29,850 --> 00:04:32,860
Don't worry about this, for now, we won't be using it that much.
61

62
00:04:32,940 --> 00:04:35,280
Next to it is a Text tool.
62

63
00:04:35,430 --> 00:04:36,560
Pretty straightforward
63

64
00:04:45,470 --> 00:04:46,770
and finally the comments.
64

65
00:04:46,770 --> 00:04:48,800
This is for a collaboration.
65

66
00:04:48,840 --> 00:04:53,760
When you send it to your client, or team members to review, they can directly comment on each element.
66

67
00:04:53,940 --> 00:04:57,040
And that's all you need to know about the toolbar, for now.
67

68
00:04:57,300 --> 00:04:59,480
On the right side we have the properties panel.
68

69
00:04:59,490 --> 00:05:05,910
Fun thing about the properties panel is that it changes, based on an object, you have selected.
69

70
00:05:06,090 --> 00:05:11,760
We select a rectangle, and we get all the properties of this particular rectangle.
70

71
00:05:11,760 --> 00:05:15,200
When we select text, we get slightly different properties:
71

72
00:05:15,300 --> 00:05:21,480
font, text size, so on. We will explore each of the properties later when we actually need them.
72

73
00:05:21,480 --> 00:05:23,770
No need to memorize everything right now.
73

74
00:05:23,790 --> 00:05:27,300
Finally, on the left side we have layers panel.
74

75
00:05:27,390 --> 00:05:30,660
Every new element that we create, will show up here.
75

76
00:05:30,660 --> 00:05:32,170
Now, why is it called layers.
76

77
00:05:32,480 --> 00:05:35,370
And why not objects, or elements, or something like that.
77

78
00:05:35,380 --> 00:05:38,030
Because they lay on top of each other.
78

79
00:05:38,040 --> 00:05:44,100
And if you want to rearrange them, you just need to change the order, in the layers panel.
79

80
00:05:44,100 --> 00:05:52,920
For example, if we want the purple box to go below, we just need to drag that layer and move it below
80

81
00:05:52,950 --> 00:05:54,010
of the grey rectangle.
81

82
00:05:54,080 --> 00:06:00,510
And if we move any of these objects outside of this frame, you will see how the layers panel
82

83
00:06:00,510 --> 00:06:06,900
will update and will move the object outside of the frame, onto the general canvas.
83

84
00:06:06,900 --> 00:06:12,800
That's all you need to know about Figma, for now. More features will come up in all the practice exercises
84

85
00:06:12,800 --> 00:06:13,840
that we're going to do.
85

86
00:06:13,890 --> 00:06:21,870
If you haven't been following along stop, pause and go ahead and do this right now. And then continue
86

87
00:06:21,870 --> 00:06:23,370
with the next lesson.
87

88
00:06:23,370 --> 00:06:29,530
If at any point in this course you get stuck, you know, it's new tools they sometimes update and you know,
88

89
00:06:29,550 --> 00:06:34,560
different things change. And I might not be as quick updating the screens and everything.
89

90
00:06:34,590 --> 00:06:39,810
Obviously I will, but you know, they are, you know, they move very fast, all these tools and they
90

91
00:06:39,810 --> 00:06:44,980
update screens and user interface very quick, so I might show you something a might be all of a sudden gone.
91

92
00:06:45,020 --> 00:06:51,570
Let me know I'll fix that, but if you get stuck, you can always drop me a message, or ask a question
92

93
00:06:51,570 --> 00:06:55,840
in a discussion forums, either me or some other student will help you out.