Hi and welcome back.
Today we're gonna be exploring how to use Figma during our course.
To use Figma, first of all you're gonna need an account so let's just go
to Figma.com. This is also going to be provided in the resources so you can
follow that link and the let's just click on Get Started.
And I'm going to continue with Google and I'm going to say that I am a software
developer and I'm just going to say that I'm going
to use it for my personal use and I'm going to click on Create account.
So my team name is just going to be
Gridgum and actually I'll just do this later.
I'll skip this steps and I'm going to say
that I'm starting for free and I'll get started on my own.
Great.
So this is how your Figma profile will look like.
And here you're going to see all of your
projects which you can either import or create.
And these are just some tartar projects to show you how Figma looks.
What I want to show you is the templates
that you can find on Figma and how you can use them.
I'm just going to click here
on Explore Community and then here you're going to see a bunch
of designs that are either free to use or are paid for.
We're going to click on Mobile and I'm going to type in one of the names
of the mobile application designs that I put up for our use on Figma.
So I'm just going to say that we're
looking for free items here and I'm going to search for donation app.
And then here I'm going to find the template that I uploaded for you guys.
Here's the template that I've created for you.
So you can just click on Open in Figma and this is going to open up this project
for you and you're going to be the owner of this draft so you can change up
anything that you want in these drafts and make the design fit your taste.
Now let's talk about how we're going to be using this.
Right, we're going to be using this mainly to determine the styling of the items
and the spacing around the components given here.
This is going to be a great template for us to know exactly how the items are
styled here and how we can translate this styling into our mobile application.
For example, this welcome back text.
It would be hard for you to find exactly which font family could look like this
welcome back text given here and then what its size should be and what its font
weight should be if it were up to you to guess.
But here you can just click on this component and then go to the inspect
here and you would see that it's font family is inter,
the font weight is 600, font size is 24, line height is 29.
And here's also a little CSS code snippet
that you could use if you were developing the web project.
However, CSS is not really something
that we use in react native, so it's not going to be applicable.
However, the only difference between CSS
and JavaScript styles that we use is the syntax.
So you could totally use this as long as
you maintain the syntax that react native needs.
But I also want to note here that this is not always too accurate.
So for example,
we don't really want to set position of absolute and width of 170 on our react
native applications, but we could use its font family and font styling.
So it's up to the developers to understand
what information is going to be useful for them.
And in this particular case, for example, in our mobile application,
we would most probably use only the information highlighted here.
So now let's continue on to the other things.
Here on the left sidebar you see the layers presented on the screen
and each screen has its own layer and currently we're on the login screen.
So if I were to open this up,
you're going to see a bunch of grouped things together.
So let's say I'm designing this button, right, and I want to know its color.
Instead of estimating approximately what
color this might be and wasting my time, I'm just going to click here
and this will highlight the group layer using which this element was created.
And then if I expand this, I'm going to see what it is made up of.
So if I want to see the color of this item
and I don't see it here inside the code, it might be because the layer item that I
have created doesn't really have the color assigned to it.
So I might want to look inside more
to determine where the color will be present.
So if I click on this rectangle, here is the background color that we could
use if we were creating this button given here.
Now, another very useful thing, as you see on this screen right now,
is that figma gives you dimensions of the elements compared and relative
to the other elements presented on that screen.
To see the dimensions,
first of all you are going to select the element and then you're going to press
on Shift on your keyboard and you can just wander around the screen and see how far
this element might be from other elements presented on the screen.
So for example, from this input password
field, this login button is 37 points away.
So you might give margin bottom to this
password field or you might give margin top to this login button.
Also, if you wanted to see what's
happening horizontally around this button, you can just again click on Shift and just
drag your mouse to the horizontal location and see how far away this is.
And we see that.
For example, for this button we could have used margin horizontal 24.
So this is how Figma is useful.
Other than that for our project
specifically, you might need to export some images.
Technically, I will always give you
the images that you might need inside the resources, to be honest.
However, if you were working alone
on the project and you needed an image presented on the screen,
what you could do is just click on the image itself
and then go to the design bar right here and click on Export and choose the type
of the image file that you want to generate and the size of it.
And then you can just click on Export
and you can save this image directly on your computer.
If you don't like some of the items and how they are designed here,
you can also just click on them and move them around wherever you need to.
And there's a bunch of other things
that you could use in Figma, but I am not going to talk about those
just because this is not a comprehensive design course.
I just want you to know that these kinds of resources are available out there.
And if you were developing any other kind
of mobile application, it would be great if you use the design
resources to create your mobile applications because then you have some
kind of expectation of the design that's going to be created inside your mobile
application and you know what kind of user experience you're offering.
So this is a little overview about Figma.
I hope you enjoyed it.
This is something that we're going to be heavily relying on during our class.
So I will always provide you with resources that are needed for you
to access the Figma designs that we're going to be using in this class
and the you can open them up yourself as well and work along with me to transfer
these Figma designs into our mobile applications.
Thank you so much for watching.
See you in the next video.