Up next in 10
Figma Login Page Design in Just 10 Minutes
Jun 21, 2025
Welcome to this quick and easy Figma tutorial web design video where we’ll walk you through creating a modern and responsive Figma login page design step-by-step. Whether you're a beginner or looking to sharpen your skills, this Figma UI design guide is perfect for enhancing your user experience design. In this video, you’ll learn how to: ✅ Create a clean Figma login page from scratch ✅ Apply modern UI/UX principles in your design ✅ Use Figma effectively for web design projects ✅ Improve your workflow using best practices in Figma design 🚀 No code, no stress — just pure design with Figma! 🔧 Tools used: Figma (Free Web App) 📌 Perfect for UI/UX designers, web developers, and digital creators. 👉 Don’t forget to Like, Comment, and Subscribe for more Figma web design and UI/UX content! #figmaloginpage #figmaloginpagedesign #figma #figmawebdesign #figmaui #figmadesign #figmauiux #userexperiencedesign
View Video Transcript
0:00
hi friends welcome to tutors funny
0:02
channel today I'm going to teach about
0:04
the Figma how to make the login form so
0:10
this login form we have to make the
0:12
login form okay like this okay so after
0:15
this login form your customer accepted
0:17
we are going to code code and design
0:20
okay we have to go to the HTML and CSS
0:22
and we have to make the code so first
0:24
what we going to do is first we have to
0:26
see how to how to make this design okay
0:28
right so let's this design I just get
0:32
and you have to get right here okay so
0:34
now I'm going to make the new one okay
0:37
right so the same design I'm going to
0:40
make it so first what I'm going to do is
0:41
I'm going to make the frame so frame
0:45
first you have to drag the frame
0:49
okay this frame I'm going to name it as
0:53
login two okay so if you you you don't
0:58
bother about this one it automatically
1:00
here it take it the layer and all it
1:03
automatically taken from Figma in
1:06
Photoshop we have to put the layer and
1:07
your designing here we no need bother
1:10
about this one everything is designed
1:12
now what you're going to designing uh
1:15
pattern what you going to do click on
1:16
this I want this color
1:19
go to the fill select this one this
1:21
login you can click this over here okay
1:24
click on that go to the fill You have to
1:27
make it the color like blue
1:36
yes I need this color you have to just I
1:38
drop to select this color right simple
1:42
okay this color is this okay
1:46
now let's little bit bigger
1:54
now what I'm going to do is I need this
1:57
form so let's click on this frame this
2:01
uh rectangle I drag it on it
2:08
select this one and select the frame
2:10
this is select the select this one and
2:13
click on it alignment center and
2:16
horizontally center okay you have to
2:18
click this one and then only it will be
2:20
selected so enter center and vertical
2:22
center okay everything is fine okay this
2:25
is a Okay this is a login this is the
2:29
main frame okay so the rectangle okay so
2:31
if you want you can name it this one as
2:32
well here uh double click and name it as
2:35
this one as a uh login for
2:40
for
2:42
name as login for okay otherwise if you
2:44
keep capacity it's no problem okay now
2:47
what you can do is Yeah simple here very
2:51
simple in order to make this form in
2:53
Figma very simple way now what you're
2:56
going to do is I want to make this one
2:59
as a color field color i'm going to make
3:01
it as uh
3:04
white and here in this one I want to
3:07
drag another rectangle shape i want to
3:10
draw I
3:12
I'm going to draw draw like this and we
3:14
have change this color
3:17
add this color click on that fill color
3:21
i want to change this color as this
3:23
color
3:42
you got changes this color okay can I
3:45
can find this okay okay this color
3:48
changes click here
3:51
this this color is so beautiful color
3:54
okay so you can change it any any color
3:56
you want so you have to hold on the
3:58
control key down and you have to zoom it
4:00
little bit and you have to adjust the
4:02
size like this okay
4:05
you have to hold on your control key
4:07
down and you have to zoom you have to
4:09
scroll your mouse wheel then you can you
4:12
can hear zoom and zoom out you can do it
4:15
here zoom and zoom zoom out using your
4:17
control key and mouse scroll V
4:20
you can adjust the thing like simple
4:22
okay very simple okay so we have fine uh
4:27
everything should be fine if you have
4:28
any problem you have to just click on
4:30
that okay perfect now what you want is I
4:34
need these two things i want to design
4:37
so how to make this one let's simply
4:39
drag it this thing
4:46
okay now what I'm going to say is drag
4:48
it like this here the space also we have
4:50
to it automatically arrange it here if
4:52
you drag it and you just click on that
4:55
now what I'm going to do is I want to
4:58
little bit you have to make it as simply
5:02
now what I'm going to see here this one
5:05
I I want to put it to one
5:09
this one I make it as color should be I
5:12
make as white
5:15
and I want to make it the stroke then it
5:17
we can find it the stroke it applied so
5:21
that it it is applied as one i want this
5:24
0.2
5:26
because only I I want just uh 0 uh 3 0.3
5:35
okay this is fine okay this is fine so
5:38
after that what I'm going to say I want
5:40
to drag another one
5:43
tangle
5:45
hold on your control key down and you
5:47
can drag and do it that is good okay so
5:50
this one also we have to put the stroke
5:51
as
5:53
uh we have to fill the stroke this color
5:55
as no we don't have a sports we don't no
5:58
need a stroke tes like this okay simple
6:03
now okay this one what I'm going to do
6:04
is I want to put it this one click on
6:06
that I want to change the icon this one
6:09
this icon also we have right click and
6:11
it defaulted this icon uh plugin is
6:14
there in your
6:17
uh Figma So you just select this one as
6:21
a user
6:23
this user you just drag and drop it
6:26
simple
6:27
drop it here what I'm going to do is see
6:29
drop it it is come come along with the
6:32
background okay it's come along with the
6:34
background so that uh background I want
6:37
to I I want to right click and I want to
6:40
ungroup it okay so ungroup it so I want
6:43
to ungroup this one i want to background
6:45
i don't need them this one background I
6:47
want no don't need them okay so the
6:50
background I don't need them okay so
6:51
this just this one only the icon we need
6:54
this icon we can change it i need a
6:57
password as well you have to pass press
6:59
enter key everything is there password
7:03
okay this protection
7:06
drag later on you can do it okay so very
7:09
simple that's why simple field mark in
7:12
order to design this okay so here this
7:14
one you have to right data and adjust it
7:17
okay now here this color I I want to be
7:19
change it as this one so you have to go
7:22
to the fill eyropper tool click on that
7:25
it would be changed this one click on
7:27
that fill color i I'm going to change it
7:29
as a
7:31
uh black sorry white okay it's perfect
7:35
this one will be perfect now let's check
7:38
on it this one and this one and this one
7:41
and hold on hold all hold on the control
7:44
key all key down and you have to drag it
7:46
it simply it drag like this here the
7:49
space also it automatically align the
7:51
space
7:54
okay it automatically align you can see
7:57
here
8:01
select this one everything first what
8:03
you going to do is before we have to
8:04
track it select everything right click
8:08
and group it group selection after that
8:13
hold on hold on the alt key down and you
8:17
have drag it
8:19
okay you have to select you have to you
8:21
need you can give the spacing how much
8:25
you need this is enough okay this is
8:28
enough okay you can see this is enough
8:32
this is this is enough
8:35
okay this one instead of that I'm going
8:37
to ungroup it
8:39
this one I want I don't need them
8:41
instead of that we have to replace it
8:43
this one so this one I want to ungroup
8:45
it and we don't need I'm not going to
8:48
pick up that background color and all
8:51
you have set here simple here the
8:52
alignment also setting here that's
8:54
that's the beauty of this one figma
8:58
simple do it simple very simple we'll do
9:02
the professional one okay so I want to
9:05
need this one i have to do the drop
9:07
shadow you have to apply the drop shadow
9:09
also you can apply the drop shadow as
9:10
well for the effect
9:13
yeah drop shadow simple if you want to
9:16
reduce the uh this is keep fine for me
9:19
this all the same thing go over here
9:22
apply the option that's it
9:26
okay that's it that's the thing we have
9:28
to do it okay simple simply
9:32
you have to do the thing and everything
9:34
okay so after that I need a button so
9:37
drag it the bottom
9:40
i want to do the button like this
9:44
yeah we can set here that everything we
9:47
can check it everything here that uh
9:54
we can everything it will be set okay
9:55
here this one this color this button
9:57
color also I I want to change it as this
9:59
color so you have to fill up fill color
10:02
eyropper tool click on that and get that
10:05
color and I want to put it to what I did
10:09
that uh text
10:15
uh login
10:20
text is login
10:23
paste on it over here login
10:26
this is test text would be fine
10:30
okay the text here this is the type
10:33
typography this is the font style I have
10:36
selected in in ra sense okay so we have
10:41
to rotate this one or simple thing we
10:44
have to click on that and we have to
10:47
this corner shape I'm going to check as
10:49
10% key corner shape good
10:53
click on that drop shadow also I'm going
10:55
to apply the drop shadow
10:57
simple drop shadow
10:59
After that we have to click on that one
11:00
this uh text I want to get the copy and
11:03
drag it over here this time I'm going to
11:05
name it as login for
11:08
that's it simple
11:27
yeah 34 give 34 30
11:32
it would be fine
11:35
select this one i want to change that
11:37
this one as a B
11:39
that would be fine you have to change
11:41
this one
11:45
now I want to size and you can check it
11:49
oh how the form look like okay simple
11:52
okay very simple you have to do the
11:55
simple things okay if you have any tools
11:59
you have to uh move the you have to just
12:02
select this one two things all things
12:04
you have just group selection now let's
12:10
this one this one this one
12:16
selection now what you're going to
12:17
select is this both
12:20
little bit up okay that would be fine
12:24
okay this is your login simple login
12:26
form okay this is very simple you can do
12:28
it by Figma okay keep watching this
12:31
video is very essential things in order
12:34
to you make your login form thank you
12:37
for watching