Up next in 10
🚀 Want to learn professional UX UI Design? In this video, you’ll master website design step-by-step using Figma — the most powerful tool for UI UX designers in 2025!
🎨 This Figma Web Design Tutorial is perfect for beginners who want to create stunning, responsive, and user-friendly websites. Whether you're just starting your UI UX journey or looking to sharpen your design skills, this complete UI UX Design Course will guide you through every stage — from wireframes to final mockups.
💡 What You’ll Learn:
✅ UX UI Design fundamentals for real-world projects
✅ Complete UI UX Design Course using Figma
✅ Figma Design Tutorial – step-by-step web design process
✅ Create responsive layouts and professional interfaces
✅ Figma UI UX Design Tutorial with live project demo
🔥 Perfect for beginners, students, and aspiring designers who want to build a strong UI UX portfolio and master Figma design techniques.
📌 Watch till the end — and in just a few minutes, you’ll know how to design a full website using Figma like a pro!
#UIUXDesign #FigmaTutorial #UXUIDesign #FigmaWebDesignTutorial #UIDesign #UXDesign #UIUXDesignCourse #FigmaDesignTutorial #FigmaUIUXDesignTutorial #LearnFigma #WebDesign #DesignCourse
Show More Show Less View Video Transcript
0:00
Hi friends, welcome to tutors funny
0:02
channel. Today I'm going to teach about
0:04
the UI UX designs.
0:07
So UI UX design is very essential stuff
0:11
for in order to making the mobile
0:14
application or web design. So we have to
0:17
show the customer this how your website
0:20
look like. Okay, this is show the
0:22
customer this is your mobile app look
0:24
like. So they're very simple way, right?
0:26
So instead of starting from scratch you
0:29
have to
0:31
you first you have to go to the
0:34
respective tool which is a Figma by
0:37
online you have to type Figma
0:43
on Google search press enter key after
0:45
that you can click on it and you can
0:48
login via your Gmail account after that
0:51
you can get into this screen this screen
0:54
you can see there's a community click on
0:56
it. Okay, rather than you have to
0:59
starting from the scratch simple way to
1:02
you have to starting the work go to the
1:05
community and you have to to go to the
1:07
community search you have to type the
1:10
type the template which is I'm going to
1:13
do the website design for my business
1:19
it's just business
1:22
okay so the search bar you put is a
1:24
business website
1:29
you just put it so that what is the now
1:33
you can see there are a lot of website
1:35
still loading because my internet
1:36
getting little bit slow that's why it
1:38
takes some time to loading so you can
1:40
see when you type business website your
1:42
business templates are there so
1:46
you can use one of these and you can
1:49
modify it according to your customer
1:51
requirements that is very simple way to
1:54
uh making uh uh template UI design
1:58
because rather than you're starting from
2:00
the scratch it's very uh it take too
2:03
much of time to complete it. So here
2:04
there are many plenty of designings are
2:06
there. You can uh get one of these. So
2:10
let's check. Let's go for this. Click on
2:13
it. Now you can see the design will out
2:18
look like this way. So I'm going to open
2:20
on PMA. You click on it that button. Uh
2:23
it is it goes to the net new tab to open
2:26
open on Figma to your website that web
2:30
uh
2:33
web design. Okay. So here you can see
2:36
now it's loading from Figma. You have to
2:38
wait until loading success. So if it is
2:40
depend on internet connection. My
2:42
internet connection is little bit uh
2:44
slow that's why. Okay. Now you're
2:45
getting the page design look like this.
2:48
Now you can move your cursor over here.
2:51
your on your left side there's a label
2:55
here this a electronic cover that is the
2:58
name so click on it everything you can
3:00
see this is a logo everything if you
3:02
click on you'll be able to select this
3:04
one this your pages click on the pages
3:08
you can see the all the pages these are
3:09
the pages of the p this landing page
3:12
this about us so all the pages will be
3:14
able to stick see now I'm going to hold
3:17
on the so you have click on it uh hold
3:19
on the control key down and click plus
3:22
the control key and scroll on your uh
3:24
mouse wheel. You will be able to see the
3:28
landing page designs.
3:30
Now here this design you will be able to
3:33
edit these all things you will be able
3:36
to here extra they are giving that card
3:38
and everything if you want you can this
3:40
all things you can place it over here.
3:42
Okay. So here everything are there.
3:46
Now if if you want to you want to uh do
3:50
the image design and you have to place
3:52
it over here successfully. Okay. So here
3:54
if you want to here you can show simple
3:56
you can show to the customers.
3:59
What are there you have to put it here
4:00
this logo. This logo we just this logo
4:05
we don't need them. So we have to
4:07
instead of this logo we have to place
4:08
into your lawyer logo your company logo.
4:11
And this is the sample template.
4:13
according to the template you will be
4:14
able to modify rather than going to the
4:18
new design. It is everything. So this is
4:21
the image we no need this image you have
4:24
to here right click ungroup it here this
4:27
image here this one here you can see
4:30
here this image this all things okay so
4:33
simple you get it
4:36
right simple way
4:39
okay so very simple we are getting this
4:41
one okay that's how we have do it okay
4:43
so this this you will be able to edit
4:45
this all the contents whatever you need
4:47
okay that's why we have a very simple
4:48
way to do the UIUX ent part don't start
4:51
from the scratch that is take too much
4:53
of time to complete it okay here you
4:55
here this is if you want to change the
4:57
button color you click on it
5:00
here there is a color palette on your
5:02
left side here you will be able to
5:03
change the color whatever need so I'm
5:05
going want to change this color it's
5:07
possible here
5:10
color is must I'm going to make it as a
5:12
blue because this uh website is go the
5:17
color along with the blue so don't
5:19
change the color. Okay, don't change the
5:21
color the what is the color your website
5:24
according the matching color you must
5:26
select it. Okay, this is this go along
5:29
with this website all the uh blue. If
5:32
you want to go red you can this all
5:34
things are navigation bar everything you
5:36
have to change it as a red. Okay, that's
5:39
the thing you have to do it. Okay, the
5:41
simple stuff. So here simply you have to
5:44
change the image. So you have to just
5:46
delete that image and you have to place
5:48
your own image. Okay. What is the image
5:50
you
5:52
could would you like to design and you
5:54
can place that's a simple way to you
5:55
have to do it. Okay. So simply you have
5:58
to here I if you want to the same this
6:00
this kind of image if you want to design
6:02
so here click on it here. What is the
6:04
size here? This is the pixel
6:07
according the pixel you design and drag
6:09
it over here and show to the customer.
6:11
Okay. This is okay. This is very
6:12
important when you are making the HTML
6:14
CSS styling uh design. Okay, look at
6:17
this uh design. They are going to make
6:20
the website so that we have to create
6:22
the this design very professional way.
6:24
Then only they will be able to done
6:26
their works properly. Okay, that is very
6:28
must. Okay, that is keep in your hand.
6:30
UX design always consider about these
6:33
all the things. Okay. So how the design
6:36
look like three times they are concerned
6:39
about that uh c what what the customer
6:41
need. Okay. The entire website keep in
6:45
your hand. What what you think you just
6:48
implement that as a design look like
6:50
this. This design the developer will be
6:53
convert as to the website. Okay. They
6:56
only they they going to code it. But the
6:58
idea is yours. You have to put into your
7:01
ideas. your creativity ideas belongs to
7:04
the UIUX design. Okay. So that this logo
7:07
I want to I this is this logo I'm going
7:10
to remove it. Instead of that I'm going
7:12
to put into the custom client logo.
7:15
Okay. Here these are the addresses. We
7:17
have to change it as something uh I
7:19
don't need this one. So I want to only I
7:22
need this one all things I just remove
7:24
it. Imagine you have to remove it. I
7:26
need this links. So how to do the links?
7:31
links mean you have to write it this
7:32
one. If if this anything go wrong,
7:35
control Z to un undo it. Click on it.
7:39
You have to type it home.
7:44
Okay. Home little bit space. So space
7:47
mean you have to uh
7:50
select this one. Space bar. You have to
7:53
get the space loop like this. So you
7:54
have to write it about us.
7:59
You have to space it services
8:04
contacts
8:09
like this.
8:12
Now you can just things. Okay, this is
8:15
your text. You just arrange like this.
8:19
Okay, this how you have to do that. This
8:22
very professional way to you have it.
8:24
Okay. So this is the the spaces and
8:26
everything you have to consider about
8:28
the spaces and everything you have to
8:30
here. This is the spaces alignment
8:32
alignment all things you have to
8:33
consider.
8:35
Okay. Line letter spacing you have to
8:37
consider letter spacing.
8:39
Okay. Everything you have to consider
8:41
about here. Here letter spaces also you
8:43
can consider.
8:46
Okay. So like this you can simply you
8:49
have to do it. Okay. Simple way. uh
8:53
right so it's very simple okay if you
8:55
want to this is a button I want to
8:57
change it as a book now
9:01
you'll be able to change book now I want
9:03
to be the we have to do the background
9:06
color you have to give the background
9:08
color as well okay this has a part fill
9:10
color make it as a background color
9:13
something uh little bit blue
9:17
the text color I want to change it as a
9:20
for the this is a fill color Okay. So
9:23
color mean this flag is a uh color we
9:26
have to change as a
9:29
okay if you want to change that as click
9:30
on it this button I want to change it as
9:34
a border.
9:36
So I would be changed as a border color.
9:38
So this stroke uh
9:42
I want to change as a border. So the
9:44
stroke
9:49
here this one radius you have it is 20
9:53
press enter here radius also you have to
9:56
arrange it hold on the control key down
9:59
and zoom out here you can simply have it
10:02
this okay very simple here you have to
10:05
put into your own logo over here so here
10:08
we want to we don't need this one this
10:10
menu you'll be will be able to uh remove
10:13
it I already added here. Okay. So here
10:16
we have to if you want you have to
10:18
remove it over here. Sorry not this this
10:21
one. If you want to feel to remove it
10:23
remove it. But simply you have to do the
10:25
design like this. Okay. This is very
10:27
fine. So this how we have mainly design.
10:30
Okay. If you have put the logo here it's
10:32
very professional. You have to put it
10:33
some some other logo here. So like this
10:35
I'm going to something text
10:38
uh
10:41
class
10:44
something like
10:49
okay here now here this logo so I'm
10:51
going to change it as this one robots
10:56
something like that is this one the size
10:58
a little Okay,
11:04
hold on. Let's zoom little bit zooming.
11:18
You applied it as a blue
11:25
here.
11:33
30.
11:38
Okay. So if you have a symbol already
11:40
have a logo you can write it put it here
11:43
that is good. Okay. So I just put it
11:45
like this. So this we have make a simple
11:47
websites. Okay. Don't worry don't bother
11:49
about simple way we have to create this
11:51
all the things. This all things we have
11:53
to uh select all hold on the shift key
11:57
down and move the
12:00
keyboard up arrow key. Move the press
12:05
the keyboard up arrow key. Okay. So that
12:09
it will be go simple way we have to do
12:12
the things. Okay. This is the same same
12:15
like this way according to your customer
12:17
requirements you have to remove this
12:19
image instead of you have to paste on
12:21
the image. For all things we have to do
12:22
it. This is very simply we have to do
12:24
the web template. We have to edit the
12:26
web template for the customer
12:28
requirements. Thank you for watching.