WEBVTT

1
00:00:00.160 --> 00:00:01.500
Hi and welcome back.

2
00:00:01.530 --> 00:00:06.340
Today we're gonna be exploring how
to use Figma during our course.

3
00:00:06.370 --> 00:00:10.300
To use Figma, first of all you're gonna
need an account so let's just go

4
00:00:10.330 --> 00:00:14.780
to Figma.com. This is also going to be
provided in the resources so you can

5
00:00:14.810 --> 00:00:18.940
follow that link and the let's
just click on Get Started.

6
00:00:18.970 --> 00:00:24.500
And I'm going to continue with Google and I'm
going to say that I am a software

7
00:00:24.530 --> 00:00:27.800
developer
and I'm just going to say that I'm going

8
00:00:27.830 --> 00:00:31.900
to use it for my personal use and I'm
going to click on Create account.

9
00:00:31.920 --> 00:00:34.180
So my team name is just going to be

10
00:00:34.210 --> 00:00:38.580
Gridgum and actually
I'll just do this later.

11
00:00:38.610 --> 00:00:41.940
I'll skip this steps and I'm going to say

12
00:00:41.970 --> 00:00:45.220
that I'm starting for free
and I'll get started on my own.

13
00:00:45.240 --> 00:00:45.580
Great.

14
00:00:45.610 --> 00:00:49.780
So this is how your Figma
profile will look like.

15
00:00:49.810 --> 00:00:52.020
And here you're going to see all of your

16
00:00:52.050 --> 00:00:55.580
projects which you can
either import or create.

17
00:00:55.610 --> 00:00:59.980
And these are just some tartar
projects to show you how Figma looks.

18
00:01:00.010 --> 00:01:02.180
What I want to show you is the templates

19
00:01:02.200 --> 00:01:04.410
that you can find on Figma
and how you can use them.

20
00:01:04.440 --> 00:01:05.600
I'm just going to click here

21
00:01:05.630 --> 00:01:09.570
on Explore Community
and then here you're going to see a bunch

22
00:01:09.600 --> 00:01:13.340
of designs that are either
free to use or are paid for.

23
00:01:13.370 --> 00:01:19.130
We're going to click on Mobile and I'm
going to type in one of the names

24
00:01:19.160 --> 00:01:24.660
of the mobile application designs
that I put up for our use on Figma.

25
00:01:24.690 --> 00:01:26.570
So I'm just going to say that we're

26
00:01:26.600 --> 00:01:33.800
looking for free items here and I'm
going to search for donation app.

27
00:01:34.280 --> 00:01:39.780
And then here I'm going to find the
template that I uploaded for you guys.

28
00:01:39.810 --> 00:01:43.700
Here's the template
that I've created for you.

29
00:01:43.730 --> 00:01:49.340
So you can just click on Open in Figma
and this is going to open up this project

30
00:01:49.370 --> 00:01:53.780
for you and you're going to be the owner
of this draft so you can change up

31
00:01:53.810 --> 00:02:00.060
anything that you want in these drafts
and make the design fit your taste.

32
00:02:00.090 --> 00:02:03.340
Now let's talk about how
we're going to be using this.

33
00:02:03.370 --> 00:02:08.700
Right, we're going to be using this mainly
to determine the styling of the items

34
00:02:08.730 --> 00:02:12.220
and the spacing around
the components given here.

35
00:02:12.250 --> 00:02:16.730
This is going to be a great template
for us to know exactly how the items are

36
00:02:16.760 --> 00:02:21.540
styled here and how we can translate
this styling into our mobile application.

37
00:02:21.570 --> 00:02:24.500
For example, this welcome back text.

38
00:02:24.530 --> 00:02:30.730
It would be hard for you to find exactly
which font family could look like this

39
00:02:30.760 --> 00:02:36.060
welcome back text given here and then what
its size should be and what its font

40
00:02:36.090 --> 00:02:40.140
weight should be if it
were up to you to guess.

41
00:02:40.170 --> 00:02:47.100
But here you can just click on this
component and then go to the inspect

42
00:02:47.130 --> 00:02:51.053
here and you would see that it's
font family is inter,

43
00:02:51.253 --> 00:02:55.340
the font weight is 600,
font size is 24, line height is 29.

44
00:02:55.370 --> 00:02:58.660
And here's also a little CSS code snippet

45
00:02:58.690 --> 00:03:01.780
that you could use if you were
developing the web project.

46
00:03:01.810 --> 00:03:03.820
However, CSS is not really something

47
00:03:03.840 --> 00:03:06.700
that we use in react native,
so it's not going to be applicable.

48
00:03:06.730 --> 00:03:09.860
However,
the only difference between CSS

49
00:03:09.890 --> 00:03:13.220
and JavaScript styles
that we use is the syntax.

50
00:03:13.240 --> 00:03:15.060
So you could totally use this as long as

51
00:03:15.090 --> 00:03:17.700
you maintain the syntax
that react native needs.

52
00:03:17.730 --> 00:03:21.540
But I also want to note here
that this is not always too accurate.

53
00:03:21.570 --> 00:03:22.740
So for example,

54
00:03:22.770 --> 00:03:29.520
we don't really want to set position
of absolute and width of 170 on our react

55
00:03:29.550 --> 00:03:33.610
native applications, but we could use
its font family and font styling.

56
00:03:33.640 --> 00:03:36.900
So it's up to the developers to understand

57
00:03:36.930 --> 00:03:39.340
what information is going
to be useful for them.

58
00:03:39.370 --> 00:03:42.900
And in this particular case, for example,
in our mobile application,

59
00:03:42.930 --> 00:03:47.900
we would most probably use only
the information highlighted here.

60
00:03:47.930 --> 00:03:51.500
So now let's continue
on to the other things.

61
00:03:51.530 --> 00:03:57.340
Here on the left sidebar you see
the layers presented on the screen

62
00:03:57.370 --> 00:04:03.540
and each screen has its own layer
and currently we're on the login screen.

63
00:04:03.570 --> 00:04:05.340
So if I were to open this up,

64
00:04:05.360 --> 00:04:07.820
you're going to see a bunch
of grouped things together.

65
00:04:07.850 --> 00:04:12.660
So let's say I'm designing this button,
right, and I want to know its color.

66
00:04:12.690 --> 00:04:16.660
Instead of estimating approximately what

67
00:04:16.690 --> 00:04:22.100
color this might be and wasting my time,
I'm just going to click here

68
00:04:22.130 --> 00:04:29.020
and this will highlight the group layer
using which this element was created.

69
00:04:29.040 --> 00:04:35.740
And then if I expand this,
I'm going to see what it is made up of.

70
00:04:35.770 --> 00:04:39.020
So if I want to see the color of this item

71
00:04:39.040 --> 00:04:45.080
and I don't see it here inside the code,
it might be because the layer item that I

72
00:04:45.100 --> 00:04:48.660
have created doesn't really
have the color assigned to it.

73
00:04:48.690 --> 00:04:51.220
So I might want to look inside more

74
00:04:51.240 --> 00:04:53.420
to determine where
the color will be present.

75
00:04:53.450 --> 00:04:57.700
So if I click on this rectangle,
here is the background color that we could

76
00:04:57.720 --> 00:05:01.540
use if we were creating
this button given here.

77
00:05:01.570 --> 00:05:07.340
Now, another very useful thing,
as you see on this screen right now,

78
00:05:07.360 --> 00:05:14.260
is that figma gives you dimensions
of the elements compared and relative

79
00:05:14.280 --> 00:05:17.380
to the other elements
presented on that screen.

80
00:05:17.410 --> 00:05:19.580
To see the dimensions,

81
00:05:19.600 --> 00:05:24.700
first of all you are going to select
the element and then you're going to press

82
00:05:24.720 --> 00:05:31.580
on Shift on your keyboard and you can just
wander around the screen and see how far

83
00:05:31.600 --> 00:05:35.500
this element might be from other
elements presented on the screen.

84
00:05:35.530 --> 00:05:37.660
So for example, from this input password

85
00:05:37.690 --> 00:05:42.220
field, this login
button is 37 points away.

86
00:05:42.250 --> 00:05:45.060
So you might give margin bottom to this

87
00:05:45.090 --> 00:05:49.300
password field or you might give
margin top to this login button.

88
00:05:49.330 --> 00:05:51.620
Also, if you wanted to see what's

89
00:05:51.650 --> 00:05:56.900
happening horizontally around this button,
you can just again click on Shift and just

90
00:05:56.920 --> 00:06:02.580
drag your mouse to the horizontal
location and see how far away this is.

91
00:06:02.600 --> 00:06:03.660
And we see that.

92
00:06:03.690 --> 00:06:08.460
For example, for this button we
could have used margin horizontal 24.

93
00:06:08.480 --> 00:06:10.980
So this is how Figma is useful.

94
00:06:11.010 --> 00:06:13.700
Other than that for our project

95
00:06:13.730 --> 00:06:19.020
specifically, you might need to
export some images.

96
00:06:19.040 --> 00:06:20.780
Technically, I will always give you

97
00:06:20.800 --> 00:06:24.740
the images that you might need
inside the resources, to be honest.

98
00:06:24.770 --> 00:06:27.100
However, if you were working alone

99
00:06:27.130 --> 00:06:30.260
on the project and you needed an image
presented on the screen,

100
00:06:30.290 --> 00:06:34.020
what you could do is just click
on the image itself

101
00:06:34.040 --> 00:06:41.020
and then go to the design bar right here
and click on Export and choose the type

102
00:06:41.040 --> 00:06:46.020
of the image file that you want
to generate and the size of it.

103
00:06:46.040 --> 00:06:48.020
And then you can just click on Export

104
00:06:48.040 --> 00:06:51.940
and you can save this image
directly on your computer.

105
00:06:51.970 --> 00:06:55.820
If you don't like some of the items
and how they are designed here,

106
00:06:55.850 --> 00:07:00.580
you can also just click on them and move
them around wherever you need to.

107
00:07:00.600 --> 00:07:02.860
And there's a bunch of other things

108
00:07:02.890 --> 00:07:07.420
that you could use in Figma,
but I am not going to talk about those

109
00:07:07.450 --> 00:07:11.020
just because this is not
a comprehensive design course.

110
00:07:11.040 --> 00:07:15.660
I just want you to know that these kinds
of resources are available out there.

111
00:07:15.690 --> 00:07:17.860
And if you were developing any other kind

112
00:07:17.890 --> 00:07:21.180
of mobile application,
it would be great if you use the design

113
00:07:21.210 --> 00:07:24.680
resources to create your mobile
applications because then you have some

114
00:07:24.710 --> 00:07:29.460
kind of expectation of the design that's
going to be created inside your mobile

115
00:07:29.480 --> 00:07:34.220
application and you know what kind
of user experience you're offering.

116
00:07:34.250 --> 00:07:37.020
So this is a little overview about Figma.

117
00:07:37.040 --> 00:07:38.860
I hope you enjoyed it.

118
00:07:38.890 --> 00:07:42.740
This is something that we're going to be
heavily relying on during our class.

119
00:07:42.770 --> 00:07:47.260
So I will always provide you
with resources that are needed for you

120
00:07:47.290 --> 00:07:51.100
to access the Figma designs that we're
going to be using in this class

121
00:07:51.130 --> 00:07:58.060
and the you can open them up yourself as
well and work along with me to transfer

122
00:07:58.090 --> 00:08:01.380
these Figma designs into our
mobile applications.

123
00:08:01.410 --> 00:08:03.020
Thank you so much for watching.

124
00:08:03.040 --> 00:08:04.040
See you in the next video.