Up next in 10
🎨 Master Figma Web Design in Minutes!
In this step-by-step Figma tutorial web design, you'll learn how to create a clean, modern, and responsive website header using the power of Figma design tools. Whether you're a beginner or a UI/UX enthusiast, this video is perfect for leveling up your Figma web design skills.
💡 We'll walk you through the entire process of Figma UI design, focusing on layout, typography, spacing, and user experience design principles. By the end of this tutorial, you’ll know how to craft a beautiful and fully responsive design in Figma — ready to impress any client or employer.
✅ What You’ll Learn:
How to design a modern website header in Figma
Best practices for user experience design
Creating mobile-friendly, responsive design Figma techniques
Pro tips to speed up your Figma web design workflow
A complete Figma UI design guide for beginners
🔥 Subscribe for more Figma tutorials, web design guides, and UI/UX tricks!
Show More Show Less View Video Transcript
0:00
hi friends welcome to tutor funny
0:02
channel today I'm going to teach how to
0:05
make the header section of the website
0:07
using Figma so Fixma which is a tool
0:11
which used to design the UI UX design
0:16
okay the based on the design we have to
0:19
code the websites okay so here this is
0:21
the how we have designed the
0:24
uh section so let's see how to do that
0:26
simple stuff
0:29
i just click on this
0:33
so you have to get the frame first this
0:35
a frame okay this a frame so we have to
0:39
drag the frame okay so don't worry about
0:42
the sizes if it is a web click on that
0:45
sizes would be your select as a
0:48
dimensions
0:51
size
0:53
okay
0:55
1920
0:56
okay 1 1,9 912 which is the width of the
1:02
web page which is the web page width
1:05
okay right now when you go to the
1:10
height
1:12
okay height we can we know we don't have
1:16
to consider about the height only we
1:18
have considered about the width color
1:20
I'm going to choose uh this is the color
1:23
I have choose it you you can uh choose
1:26
whatever color you need okay so at the
1:29
example I'm going to choose this same
1:31
color so you have to go to the field
1:33
color here click on that frame
1:36
the frame this frame I'm going to name
1:38
it as
1:40
one
1:43
you can notice that the frame name has
1:47
been changed that click on that again
1:51
coloring the fill color i'm going to
1:53
change it as a color like this this a
1:56
color
1:58
this would be fine this a nice color
2:01
okay this is a nice color i have
2:06
after that we need this text this text
2:08
here you can see here i'm going to write
2:09
it as a few but if if you have any logo
2:12
you can put it so you have to get the
2:15
text tool size would be I'm going to
2:17
change it as the size something like 32
2:21
uh font I'm going to select as this is
2:23
the this is out outfit okay
2:26
font I'm going to select as outfit
2:33
okay so the font I have changed it as a
2:37
typography you have to change the font
2:39
but you need I have changed it as outfit
2:42
this the font I have according the font
2:44
the design has been changed so you have
2:46
drag and drop it over here
2:49
select the
2:51
you can you can select the text select
2:55
as the alignment vertically we need a
2:59
sorry not here not here ctrl Z and do it
3:04
here horizontally center this is
3:06
horizontally center mean this is
3:07
horizontally center okay i want to
3:11
change the uh font color
3:16
change as white okay so after that we
3:20
have to give the drop shadow as well
3:23
drop shadow how to give the drop shadow
3:25
they go to the effect just option drop
3:27
shadow so blur option you have to select
3:30
all three is possible okay so we have to
3:34
give the drop shot it is good okay
3:36
something here very nice look you can
3:39
zoom it hold on your control key down on
3:42
your keyboard and you can zoom it and
3:44
using your uh mouse wheel hold on
3:47
control key down and
3:49
uh scroll the mouse mouse wheel at the
3:53
same time you will be able to see the
3:56
zoom in zoom zoom out this is very
3:58
simple shortcut key to uh do the things
4:02
okay okay after that you have to go
4:04
along with this design so I have to put
4:06
in this rectangle you have to draw it
4:09
here
4:17
so this one you have to write it here
4:19
this one
4:23
right here
4:27
now here what I'm going to do is I'm
4:28
going to change the color
4:38
write
4:39
out the text this is the text okay so
4:42
text what I'm going to do is you have to
4:43
write it here Java
4:47
this color is the okay Java so this
4:50
color the text size would be I'm going
4:53
to change it as a uh this size I have
4:56
given here as okay here we have given
4:59
the text size little bit small
5:04
uh let's do it as
5:09
type of
5:11
80
5:13
that would be fine the size 8 would be
5:16
fine okay 8 would be fine so the sides
5:21
this uh this uh this also size we have
5:23
80 you have use 60 fine
5:27
okay the website is this size will be
5:30
fine
5:35
okay click on that you have to
5:41
okay this side 18 you have to give as a
5:44
little bit one name the font we have to
5:47
change as a instead of outload you have
5:49
to open s this is a very best font open
5:53
s
5:57
this also the very beautiful
6:00
control key and zoom out and see here
6:02
this is this also very best front can
6:05
Check it over here open sense
6:08
uh we have to color light
6:12
bold extra bold there are so many things
6:18
it default come as a light
6:23
and uh we have go to over here it
6:26
automatically select as upper case you
6:28
have to know upper case i want to select
6:30
as a uh lower case okay not upper case
6:34
it's default to come as uppercase okay
6:36
now here it's simple it's very very
6:39
simple here
6:41
very nice
6:43
okay it's very nice you have to put it
6:45
as a regular one it's simple
6:50
after that you have to the same thing
6:51
you have to drag it over here this one
6:53
should be I have to uh make it a space
6:56
so here in between this one as a
7:03
uh Write
7:05
it over here this one has a PHP
7:15
ASP
7:22
out of that Python
7:30
C#
7:37
and after that we have write more
7:45
select all
7:51
give the
7:53
uh space in between them uh let's put it
7:57
as
7:59
100 space in between them okay it's deep
8:03
it's okay yeah you can adjust the space
8:06
so 100 under 100 under 100 under 100
8:08
under 100 under 100 under 100 space each
8:10
okay in between Java and PHP and ASP
8:12
that all things we have put into the
8:14
under 100 under 100 under 100 under 100
8:14
under 100 under 100 under in between
8:15
under space of the text that's it that's
8:19
simple stuff you have to do so let's
8:21
select all hold on the shift key down
8:23
and select all control G to go group
8:25
them and this one you have to vertically
8:27
you have to align them okay this
8:31
vertical
8:33
like okay sorry horizontally you can
8:36
align them it's coming like this very
8:38
simple so after that we need a simple
8:40
stuff we need here i need a simple
8:45
this polygon tool to more
8:48
so drag on it here following on tool
8:50
simply you can drag it if it is a you
8:52
can put it there hold on the shift key
8:54
and drag it it is proportionally it will
8:56
be drawing this one also you have to
8:59
drag it and you hold on your uh select
9:03
press your arrow key on your keyboard
9:05
and you have to adjust this one i need
9:08
little bit closer to the more one okay
9:13
once uh this one click on that you have
9:16
to go to the rotation you have to put it
9:17
as the 100
9:21
so it's coming like this okay how would
9:24
I get this one it is based on my
9:26
experience if it's a 19 this is the
9:28
rotation if it is 160 mean 180 mean it's
9:31
coming like this if it is minus mean it
9:34
goes above
9:36
okay if it is minus here you can see if
9:38
it is put minus before the 180 it goes
9:42
this rotation will be go above okay this
9:45
okay this is go stop okay right that's
9:48
how we So let's select this one you have
9:50
to fill color you have to select this
9:51
one as a
9:53
uh
9:55
black stroke i I want to stroke i want
9:58
to deal with the stroke as well
10:02
that's it
10:09
that's it
10:11
simple
10:12
yes
10:16
simple that's the thing you have to do
10:21
here very simple you have to done the
10:23
your homepage this is simple look okay
10:25
this based on this design you have to uh
10:28
do your websites okay very simple
10:31
okay here you have to do the designs
10:33
very simple
10:36
okay this how you have make your website
10:38
design very cool thank you for watching