live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Unlock the power of Figma design in just a few minutes! In this video, I’ll show you simple but powerful tricks that will help you create cleaner, faster, and more professional designs — even if you’re just starting out. Whether you're working on a Figma website design, improving your UI layout, or trying to speed up your creative workflow, these tips will level up your skills instantly.
This video is perfect for anyone looking for a Figma web design tutorial, a beginner-friendly Figma design tutorial, or anyone who wants to build strong UI foundations before joining a full UI UX design course.
🔥 What you’ll learn:
– Smart Figma shortcuts
– Quick layout tricks
– Easy component hacks
– Clean UI tips for your website design
– How to work faster like a pro
If you find this helpful, don’t forget to like, comment, and subscribe for more UI/UX and Figma design videos!
#uiuxdesigncourse #figmadesign #figmadesigntutorial #figmawebsitedesign
Show More Show Less View Video Transcript
0:00
Hi friends, welcome to tutors connect
0:02
channel. Today I'm going to teach about
0:04
the UI UX design secrets. Okay, so this
0:07
video is very helpful for you all to
0:09
learn web designing uh those who are
0:13
interesting in web design and UIUX
0:15
design. Okay, so first have a simple
0:19
template. So I didn't implemented any
0:21
images yet over here. It's just simple
0:24
template. So here this template how to
0:27
made this one as well. So here these are
0:29
the some some sites you can go some uh
0:32
education website or business website
0:33
you can have a look or this kind of this
0:36
colors this colors also very nice colors
0:38
you can match with this colors all
0:41
things you have to observe that when you
0:42
making the websites also okay this are
0:44
colors okay so this is a courses how
0:47
they made this one so this is of the UI
0:50
design so here here UIUX design okay
0:52
this is UX okay this one should be so we
0:56
the uh user
0:58
have easy to see this website and easy
1:00
to clickable the all things have we have
1:02
to observe okay so now here now what I'm
1:06
going to use is a pigma what I'm going
1:08
to do is I'm going to make the uh web
1:10
template for desktop so what I'm going
1:12
to is your frame is a frame click on the
1:15
frame here you can see that size at the
1:19
left side uh right side so I'm going to
1:21
go to the desktop version so that click
1:23
on the desktop okay this clicks desktop
1:26
you can see this desktop size. So after
1:29
that what you going to do is click on
1:30
it. So go below there's option J guide.
1:34
Click on this option here. You have to
1:37
make it as column. Column you have to
1:40
default you have to enter for the
1:41
website you have to 12. Okay. Press
1:44
enter key. So 12. So margin we have to
1:47
give as
1:49
80.
1:51
80 mean left and right here set as 80.
1:55
This is our desktop in here where you
1:58
can do the implementation process. So
2:01
here already we have did some sides. So
2:03
over here you can see over here the
2:06
sides. Okay. So here I'm going to this
2:07
one you have to the same thing. I just
2:11
uh this text I'm going to just control C
2:15
to copy this text.
2:17
I'm going to move it over here. Here
2:19
also this my my desktop one. This is my
2:22
desktop one. I'm going to paste it over
2:24
this text. Okay, this coloring I'm going
2:27
to change it as a colors
2:29
uh something
2:32
red.
2:37
Okay, you will be able to see the color.
2:39
So here we can see here this is that
2:41
palette. Can see this palette. Okay, so
2:44
here we are also the same thing after
2:46
this palette. You can see that palette.
2:48
Okay. Okay. So I'm going to get this
2:50
palette also that uh rectangle shape you
2:54
just draw the rectangle.
2:58
Okay. Rectangle your color you have to
3:00
choose choose is choose from blue
3:04
dark blue. Now this one you have to make
3:06
it as a
3:09
white. So you can see the outfit
3:13
it's not we can't see it because it's
3:15
rectangle is above this one. So here
3:17
click put above the lay above you can
3:20
see this clearly this how you can make
3:22
this simply properly the way this how
3:26
you can do the sides very properly okay
3:29
this 18 so you can see simply so the
3:33
offer you can see this offer you can
3:35
make it a sides and uh this uh rectangle
3:39
shape so you have to draw on it so
3:41
simply you have to get the rows shapes
3:44
you have to draw over here.
3:48
Okay. Over here you have to save it over
3:51
here. 20 pixel. It's too much. 10. It's
3:58
so far good. So add the text. We have
4:01
write climb offer. Make it as text.
4:12
Click on it.
4:15
So here.
4:17
Okay. So you have to make it as a
4:21
bold.
4:23
Make it as bold.
4:25
So here bold. Okay. This everything you
4:27
have to do it. Okay. So that color here
4:29
should be you have to make it as a
4:31
color. You have to use a different
4:33
color. Okay.
4:36
This one should be fine. Okay. This
4:38
should be fine. The dark will go dark.
4:40
Don't go the dark. This light is fine.
4:43
This how you make it a web template.
4:45
Simple
4:46
claim offer. So you have to write it.
4:50
Simple. You have to arrange it.
4:53
Simple.
4:55
Simple. You have to
4:59
hold on the control key down and sc
5:02
mouse scroll wheel. So you can zoom on
5:04
zoom. Zoom on. See uh zoom in zoom out.
5:07
Okay. This is simply properly we have to
5:09
go the websites. Okay. Okay, this is
5:11
simple way to have to implement the
5:13
websites. Okay, this how we have to
5:14
implement the website. Simple. The same
5:17
thing do here as well. You have to put
5:19
the same thing. Uh this is the size.
5:21
Okay, so size. So you have to write here
5:23
that
5:25
my
5:27
specify height
5:31
little bit uh eight height on that
5:33
height it's good.
5:37
Okay. Okay. It's a color. I'm going to
5:39
make it as a color
5:51
something this color is also fine.
5:56
Okay. The color color combination must.
5:58
So the same text you apply saving
6:04
put it to here.
6:07
So this color saving this text size
6:10
should be 75. You can uh decrease if you
6:13
want. Okay.
6:16
[Music]
6:19
Click on it here. Now what I'm going to
6:21
do is you click on the fill color.
6:25
Right? So this how we have make the
6:27
websites. Okay. So you have to write you
6:30
can uh put the images you want. All
6:32
things you can take care of. Okay.
6:34
simple way you have to implement that
6:36
way right. So that if you want to make
6:39
the images
6:41
uh here we have to this one should we
6:42
get a
6:44
uh
6:46
child
6:48
win that's a website name can write
6:51
child win so child
6:53
child win it's a website can name it
6:57
like this okay so if you want to make it
7:00
something the photos and everything you
7:02
can go over here uh you can make it the
7:05
back files uh
7:11
Okay. So that you can read the black
7:13
files.
7:18
Okay. So here we can see check on it the
7:20
images
7:23
community
7:25
something the
7:30
you can see some
7:32
uh you can see this designs the here
7:35
this websites the portfolio that uh
7:38
wedding photography there are a lot of
7:40
things are there so that I'm going to do
7:43
some
7:44
um
7:46
marketing
7:54
So marketing uh here you can see the uh
7:58
what is what is the text you are typing
7:59
upon the result will be displayed the
8:02
mark marketing components are there so
8:04
you will be able to download them and
8:06
put into your web page okay that's the
8:09
thing you have to do it simple right the
8:12
simple way you have to do it okay so the
8:14
marketing so there are a lot of
8:15
templates are there okay so So you have
8:16
to implement it over here
8:19
right.
8:21
So I'm going to go to my design again
8:23
child go to the recent project and open
8:26
it. Okay. So that you have to implement
8:28
it over here. So now what I'm going to
8:29
do is here this is fine. This will be
8:31
fine. You have to implement images and
8:33
everything. Uh so far you have to
8:34
continue this one. So after that you can
8:36
see that uh that one you can click
8:38
design mode. This is design mode. Okay.
8:40
Uh this are code quotes executive codes
8:43
that row uh this actions the actions we
8:46
click on the actions here you can uh
8:49
check everything here there are many
8:51
options are there on the action as
8:54
plugins there are many options are there
8:56
so now what I done is now again I'm
8:58
going to go to one component I'm going
9:00
to this page so I'm going to get this
9:02
one so design
9:05
component
9:07
this is must design component is a Okay.
9:10
Sometime this desert component you can
9:12
write this is a one button. I'm going to
9:15
implement one button.
9:18
This button I'm going to insert uh color
9:22
white color. Uh text would be
9:27
black event
9:33
just like that. Okay. Okay. So that we
9:36
have to increase the font a little bit
9:37
bigger. Then your font you have right as
9:41
a
9:49
uh you can see it open chats.
9:53
This is a good font. Okay. So you have
9:55
to make it like this. So you have to
9:57
size
10:00
put it here.
10:06
content.
10:07
Go here. Click on add
10:12
corner content.
10:16
End
10:21
both are select these. These two things
10:23
both are selected. Aligned center
10:26
aligned. Everything are selected.
10:28
Make it full. Nice. So I'm going to
10:31
again resize the font little bit. 18th
10:36
can select this one
10:40
8
10:42
perfect so this one I'm going to little
10:44
bit bold
10:48
something so I'm going to work it
10:50
something colors I'm going to change the
10:51
colors and all the colors also I'm going
10:55
to change it as here
10:58
I'm change it as black so that's so nice
11:02
it's very nice so very nice things and
11:05
now what I'm done I just copy this right
11:07
this this design component right click
11:09
on it create component you have to make
11:12
it as create component okay now go to
11:14
the page this page also we have to use
11:16
this component click asserts
11:20
assets the assets you can see that uh
11:23
components okay so here this component
11:32
uh this what's the Okay. Design
11:33
component
11:37
background.
11:40
Okay. So that you go to here design
11:42
component.
11:45
The design components are there. Here
11:46
this is design components there. It's
11:48
coming. Okay. So you go to pages.
11:51
Design component here. This there. Okay.
11:54
If you click on it, it's coming here.
11:56
Now this one every pages you can use
11:59
this component. Any problem. Okay. You
12:01
can use this component every pages
12:03
without designing. You can use in this
12:06
component every pages. Okay. You can use
12:08
like that.
12:10
Okay. So this is the reuse component.
12:13
Okay. This is meaning of the reuse
12:15
component. You can uh design once you
12:18
can use it anywhere of the page. Design
12:21
BS. Okay. You you don't have to re you
12:24
don't have to uh design uh each and
12:28
every time. If you are designing this is
12:29
design. This is the design component.
12:31
This screening of design component.
12:33
Okay, this is the these are the Prima
12:35
secrets. Okay, this is very important
12:38
stuff.
12:40
Okay, this is very important stuff. You
12:41
may got keep remember this one. Uh we
12:44
have this kind of a things are available
12:45
in flip.
12:48
Okay, after that you can go to that uh
12:50
there are many things are there. You
12:52
have to go to the things like that. So
12:55
that uh after that I'm going to go to
12:57
that the same thing have to uh moving to
13:01
the colors you can use the colors your
13:04
UI colors your color combination is must
13:07
when you are here you can see these
13:08
colors the colors are very awesome
13:10
colors okay the colors you have to
13:12
always observe the colors when you are
13:14
designing the web pages you have to
13:15
observe the colors there is a website
13:17
which name is white colors
13:20
you can see this this a tailment the
13:23
tailment color generator So you have to
13:25
see this the colors mostly this is the
13:27
very best sides pick up the colors and
13:31
all you can see this colors everything
13:34
you can generate the colors of prime
13:35
colors you can do that these colors as
13:37
well the color codes you can see this
13:39
color codes here this dark woods how the
13:42
color combination work this here get the
13:44
you can get that idea of the colors uh
13:47
how the colors are works these color
13:48
codes also you can get the idea which is
13:50
the color this is the dark it's dark uh
13:53
going to be Right. Okay, you can get the
13:55
idea. Every colors you can get the idea
13:57
of it. If it is red also you can see the
13:59
idea red how the reds works. The if it
14:02
is a dark red the dark red how the words
14:04
going to light light red. So these are
14:07
the color combination you are keeping
14:09
remember this is this is very must when
14:12
you are implementing the websites. Okay
14:14
the UI colors. with this color
14:16
combination. If you go to that uh Figma
14:19
is there
14:21
go to that Figma design. So that here
14:24
this action you can set UI
14:29
colors.
14:34
You can just type colors
14:40
pick colors.
14:43
No, no. Set that uh colors
14:49
action. You go to colors. You have to
14:51
that color assets plugins. Okay. Here
14:55
you can see the plugins. You go to
14:56
plugins color UI.
15:01
Change color.
15:03
Ah, here is UI colors.
15:09
You have this white colors. Here this
15:11
white colors.
15:15
Okay, you can see this colors colors
15:16
palettes are there. Here you can see
15:17
here. Okay, the that is there. Here it
15:20
is loading. If you click on it, this is
15:22
loading. It is added your colors and all
15:24
everything. Okay, it's loading. Okay,
15:26
there are things available. You can go
15:29
to and search and you can get the color.
15:31
You can have it the color and all. Okay,
15:33
these are plenty of options available in
15:35
Figma. You don't worry about this.
15:37
Everything is take care of Figma. Color
15:40
palettes are there. Okay, you can get
15:41
the color here as okay. So after that we
15:44
going to go to that uh designs if you
15:47
have consider design. So another site is
15:49
called that uh stack
15:54
short this website. So the UI design you
15:58
get the idea. So when you making the
16:00
websites so that's both the effects the
16:02
button effects you can see the buttons
16:05
how the buttons are there of the
16:08
websites. you can get the idea of it.
16:10
This video is very helpful for you all
16:12
to learn. Okay. So these are the when
16:15
you making the website these are the
16:16
buttons you have to check the how the
16:19
buttons uh styles are there the
16:22
interested. Okay. These are the buttons
16:24
uh the very best button styles are
16:26
working. So the board effects how the
16:28
board effects here it's cards.
16:31
Okay. So everything the board effects
16:32
the board effects how the board effects
16:34
comes. So the cards also the very must
16:37
nowadays here the card this very nice
16:40
card implementation you can see here.
16:42
Okay. So that this this kind of a card
16:44
this kind of this kind of card. So there
16:46
there are plenty of card designs. Okay.
16:48
You can make the idea which one I'm
16:51
going to use it on my website. So these
16:53
are the designs are there. The grid.
16:55
Okay. The grid designs. Okay. These are
16:57
the designs are very best. Okay. Okay.
16:59
This this kind of designs the foreign
17:02
websites are using the UK, US these are
17:05
kind of cards are simple cards design
17:08
they are using the grid designs. Okay.
17:10
Hman hammerman the hammer man for the
17:13
mobile responses how they are look like
17:15
headers the how the headers are
17:18
designed. So the headers also you can
17:19
see this kind of a designs effects.
17:22
Okay. So there are there are plenty of
17:25
things you can check on the progress
17:27
bar. Okay, the search bar these are the
17:30
things you can go to your stacks stack
17:33
sher you can check on it and get the
17:36
gain a good idea uh before you can
17:38
design the website this is very must
17:40
these all if you implemented these are
17:41
the things in your mind
17:44
your website is perfectly designed okay
17:47
you can know uh your design is very
17:49
perfect okay so that we have to keep
17:51
remember these are the things okay this
17:54
is very must right so that real time
17:56
colors that's And the site which name is
17:59
real time colors.
18:07
Okay. This real time colors.
18:12
You can go this real time colors. You
18:14
can see this is the colors here. You can
18:15
primary. You can see this crank here.
18:18
Colors are changed. You can see this
18:20
color codes and here also you can get
18:22
the color idea. Here
18:26
it's a this is a Figma flag also
18:28
realtime colors. Okay, you can see that
18:30
uh colors
18:32
there are different different text
18:33
coloring everything you can check on it
18:35
text coloring the fonts.
18:39
Okay so that uh that colors and primary
18:44
here you can see that I implemented this
18:46
color here. This you can check on the
18:48
color how the entire website all the
18:50
colors you can pick up this color. If I
18:53
implemented this color, this this is
18:54
good. If you if if you check on the
18:56
colors how the here this this completely
18:59
UI design is there. So you can implement
19:01
the color which which one is good here
19:03
this colors. If you implement this color
19:05
entire website how the website look like
19:07
before you can uh walk into the website
19:10
you can uh think about the colors and
19:12
okay this color. This color is also very
19:14
nice here. Okay. So these are the things
19:17
you have to observe when you are making
19:19
the website. These are the things you
19:20
have to consider. Okay. What color you
19:22
are going to use? What is the color text
19:24
color we are going to use? What are the
19:26
component we are going to design? What
19:28
are the this component is uh uh this
19:31
component is match with the background
19:33
color everything the text is clear the
19:36
user can easily visible uh it is easy to
19:40
read. So all things we have to consider
19:42
before you have to make the website
19:44
otherwise we going to fail. So these are
19:46
the things you have to consider when you
19:48
are making the website. Okay. These are
19:50
the best best practice uh session. Okay,
19:53
you gain the idea. So this is very
19:55
important stuff, right? These are the
19:57
very best websites you can of it. What
19:59
is here? This one this is for finding
20:02
the icons.
20:05
Okay, this for your websites you can
20:07
find out uh icons. Here are people are
20:10
asking
20:13
uh where I'm going to find the icons. So
20:15
this is just the websites where we can
20:17
find the beautiful country icon. So here
20:19
this here there are best icons are
20:21
there. Okay there you can get this icons
20:24
you can use them. Okay beautiful
20:28
consistent icons. Okay.
20:32
Okay. So this is this this is this is
20:34
for our icon when you implement icon on
20:37
your mobile phone icon. These are all
20:39
the icons will be we can use it for our
20:42
this icon. Just a copy this SVG file and
20:46
can use it. Okay. simple things we have
20:50
to implement. Okay. Very simple things
20:52
we can implemented of that feed mark.
20:56
Okay. So there I just copy and
20:58
implemented. Oh it's come here. Now here
21:01
only things you have to fill the color
21:02
selected color. Okay. Simple here the
21:05
icon is there. I just go over here copy.
21:09
I need this icon. Click on it. Okay.
21:11
Just copy the SVG back to my pigma.
21:16
Paste on it. icon should be there. Click
21:18
on that icon. I will be change the color
21:21
as simple. Okay, this things we have to
21:25
do it. Okay, I think you have
21:30
uh uh you can see you can see the group
21:33
and again you have change the color.
21:36
Okay. Right. So I think you hope you can
21:40
understand this all things well. Okay.
21:42
So let's moving to that other things.
21:48
Okay. Okay. Next, let's move into that
21:52
another things. Color construct checker.
21:55
This also the best sides for the for our
21:58
color construct.
22:02
These are the sides. You do note of it.
22:04
Simple note of it. So that these are the
22:06
best sides. Okay. The color correction
22:08
and everything. When you are the
22:10
designer, if you are a designer, you
22:11
must know these techniques. Okay. So
22:14
that if without knowing these design
22:16
techniques you cannot make the website
22:19
beauty beauty okay attractive. So that
22:21
we have to learn these are the what are
22:24
the site I give these are site you just
22:26
go to what this
22:30
internet connection is little bit slow
22:31
that's why it's takes about why is this
22:34
color constructive here this also you
22:36
can check it the colors
22:38
here
22:40
you can see this colors here text colors
22:43
and that this this also how the if you
22:46
implement this color how this card look
22:48
like if you implement this color how
22:49
this text look like so These are the
22:51
very best practice.
22:54
Okay, this a best practice. So when you
22:55
implement this is a very best practice.
22:57
So this if you you can learn it. This is
23:00
very quickly. Okay, this is a very
23:02
essential stuff to learn color
23:04
construct. So here you can implement
23:06
this card how the cards looks uh that if
23:09
you implement the this color this how
23:12
the looks so that everything you will be
23:14
able to check it check on it. Okay,
23:17
perfect. I hope you can you'll be able
23:20
to do this one. Right now let's move
23:24
into our Figma.
23:27
This our Figma Figma we successfully
23:31
this is the this how we have designed
23:32
the websites from the scratch. So I just
23:35
give the uh how the designers works. I
23:38
give gave the all the tricks. So again I
23:43
want to do that. This is our desktop
23:45
version. I want to implement the mobile
23:47
version. How to do this? Click on this
23:49
frame
23:51
here. You can select this the phone.
23:53
Okay. So can I I'm going to get this one
23:56
iPhone 16 Pro. Click on it. Yeah. This
24:00
is the mobile response. The mobile
24:02
response also what I'm going to click on
24:05
it. I want to get the grid view. Okay.
24:09
You have to make it as five. So you have
24:11
to make it as column. This one grid
24:13
column make as five. Let's make it a
24:16
five.
24:17
margin you have to give as 20
24:22
it would be fine this now here all the
24:25
contents you have to uh put it inside
24:29
this script
24:31
okay we click on this one you have to
24:33
I'm going to get the copy hold on the
24:35
alt and get another copy uh so here we
24:38
have to here we have to this one also
24:42
I'm going to get that things both
24:46
Okay, hold on the all alt and get the
24:49
copy of that one. Okay, so here right
24:54
get the copy. So that you have to put it
24:56
above event.
25:08
Okay.
25:10
Now what I'm going to do is I'm going to
25:12
go to do the thing is here we have to
25:14
reduce the things
25:16
click both
25:20
here arrange them
25:23
like that here zoom it
25:26
put something like that okay this how
25:28
you have to do that you have to now what
25:30
I'm going to this is your design okay so
25:32
that what I'm going to see how we have
25:34
to font I'm going to change it as simple
25:38
size it
25:40
uh extra 36 but clearly we have to see
25:44
see the font. Okay, that's a must.
25:48
This font we have to clearly see check
25:50
so that uh we have to check it.
25:54
Okay, this we have to arrange them.
26:02
Okay, you have to make it the alignment
26:04
and everything you have to make it like
26:06
that. Okay, the simple way you have to
26:08
do it. Right. So that according to the
26:10
way you have to do it. Okay. So that uh
26:12
that texting and everything. So this
26:14
texting also we can get there over here.
26:16
Texting also we can this you have to
26:18
make it as a black. Okay. Uh white
26:22
coloring you have to change as a white.
26:26
Okay. This is white. So this color this
26:29
this one how to arrange it this one for
26:31
the desktop. So I'm going to mobile.
26:33
Click on it. Drag it over here. It's
26:35
mobile. Uh mobile also what I'm this
26:38
one. You have to do this on the mobile
26:39
also that we have to do the color. So
26:42
this text color also you can go over
26:44
here just like that. You have to change
26:45
it the uh font size little bit small
26:50
like that. You can over here
26:54
and you have to make it this one as a
26:56
white. Okay.
26:58
Okay. So that here you have to go over
27:00
here.
27:04
Okay. Here just also we can do the thing
27:07
is simply here this here can align here
27:09
like this. Okay. Can align like this.
27:12
Simply
27:16
something something
27:18
if you want a photo you can alignment
27:20
right we like this case photo something
27:23
the user easily can read. Okay that's
27:26
how we have make it this one. So this
27:27
one also you can you can select it like
27:29
this way.
27:31
The mobile also you can put like this
27:33
way.
27:37
the user can read readable way.
27:42
Okay, this a mobile response. This how
27:44
we have can make the mobile responsor
27:46
very efficient. Okay, very simple. This
27:49
how we have to implement the sides very
27:51
attractive. This this how we have uh do
27:54
the components. This one while you are
27:56
doing the components you can observe the
27:58
coloring and user easily can read or not
28:02
everything you can observe. Okay. Right.
28:05
The syn simple this these are the things
28:07
you have to use the after that you can
28:08
use the competitor's website look like
28:10
this way how they made the design. So
28:12
how the mobile responsive there how the
28:14
responsive works. Okay. So everything
28:17
you can check on it. Okay that's the
28:19
things that is the best practice for uh
28:22
implementing the websites and all. Okay.
28:25
All right. So, these are the things the
28:28
most important things I'm going to uh uh
28:33
I want to teach you. Okay. So, that here
28:36
there are icons. You have to implement
28:39
the icons. You can see that there are
28:41
lot of icons. Yeah. You can use these
28:44
are the icons. You can test off it.
28:45
These are the icons are there. Uh you
28:49
can uh rename
28:55
Okay. So that there are lot of things
28:57
are available. Okay. So we can go
29:01
uh things these are things you can go
29:03
along with these things are very
29:05
important assets of the
29:09
uh Figma. Thank you for watching.