Up next in 10
How To Make a Figma Prototype in Minutes!
0 views
Jun 17, 2025
How To Make a Figma Prototype in Minutes! Today, learn about the prototyping process with Figma! Follow this Figma tutorial for beginners to understand how to create a prototype. Use this prototype for user testing and to refine your user interface. #figma #figmadesign #figmaai #figmauidesign #figmaplugins #figmatools figmasites #figmatutorialforbeginners
View Video Transcript
0:00
hi friends welcome to tutors funny
0:02
channel today I'm going to teach the
0:03
prototyping model using Figma so you
0:05
have to click on the design
0:18
okay now here
0:21
the prototyping model which is used for
0:23
testing purpose we are using whether you
0:26
are uh when you are uh designing the web
0:30
template or mobile mobile template uh
0:34
how the template should works if you
0:37
click on this particular page it goes to
0:38
that another page it redirect to another
0:41
page so that's all things we have to
0:45
show into the testing part you have do
0:47
the prototype this model so how to do
0:49
this you have to first you have to draw
0:50
the frame first frame Okay okay this
0:55
frame I'm going to name it as double
0:56
click on this uh here you just you have
1:00
to write frame one it's okay if you want
1:02
you can change the name i just change it
1:04
as uh I just homepage
1:08
right second one I have to drop another
1:12
page which is a
1:14
we have called as about page
1:19
we have two pages first page select as
1:22
you have to change the color as
1:25
red color second page I'm going to
1:27
change it as this color you have changed
1:28
as green color
1:34
okay now then we have a two pages now
1:38
what you're going to is we have two
1:40
pages now first page I'm going to uh I
1:43
need one button so I'm going to this one
1:46
click on that not frame this rectangle
1:48
shape drag on it click on that and you
1:53
have to corn a shape i'm going to give
1:55
it as uh 10
2:00
this one I'm going to 10 i'm going this
2:03
register
2:13
okay click on this register
2:16
text hold on shift key down and select
2:18
this object as well we have to alignment
2:21
center alignment
2:23
middle that's it it is coming like this
2:26
so here we have to click on this uh here
2:28
we have to change the text font size
2:32
like this something
2:35
right now let's copy this these two
2:37
things you have just copied it uh you
2:39
have select this both text and this
2:42
objects both select right click layout
2:45
select as group selection here or you
2:48
have to control uh + G of your keyboard
2:52
shortcut if you have press all together
2:54
it it has been moved after that what I'm
2:58
going to I'm going to go to copy this
3:00
control C to copy ctrl + V to paste get
3:02
another copy
3:04
the same button I'm going to drag it on
3:06
the about us page here I'm going to
3:10
change the text as back something
3:15
okay you can give any name okay there
3:17
are two links i have added two links
3:20
okay okay this is the home this is about
3:22
here the layers if you adjust and drag
3:25
and drop it it automatically created
3:27
that's the
3:29
uh easy way to do the things on Figma
3:33
okay
3:34
right this very simple right now what
3:37
you're going to do is I want to link off
3:40
them first click on this this this is
3:43
your frame this is your part so you go
3:46
to the prototyping it's a prototyping so
3:48
prototyping you can see okay this is the
3:50
first one okay so here you have the
3:52
position scrolling
3:54
okay so here you will be able to see
3:56
okay so first you have to show the
3:58
prototyping setting device which device
4:00
you are going to show uh whatever device
4:03
you can take it here so TV MacBook
4:05
everything is there okay this one you
4:07
can show it as I want to show this one
4:10
as just a phone with just iPhone 16 okay
4:14
this iPhone 16 I want to show this okay
4:17
the iPhone 16 i want to show this right
4:19
so select this frame first so what
4:22
you're going to do is see frame first
4:23
i'm going to go to prototyping you have
4:26
to add this click on that flow this flow
4:30
is coming now what you're going to do
4:31
this flow is coming so I'm going to
4:33
click on this the flow this a flow okay
4:37
I click on this here the button is
4:39
running so I'm going to go to U
4:44
okay I'm just stopping okay now click on
4:46
this button
4:48
if you click on this button flow if you
4:49
add the floor you can see the click on
4:51
button this button when you click the
4:53
register button it goes to this page
4:57
okay you link it this page that's it you
4:59
have to write on tap that's it after
5:02
that click on this button this button
5:04
you have to back it when you click back
5:06
button it's coffee
5:08
that's it we keep this on tab
5:12
all right simply we have done this one
5:15
you have click on this flow here it's
5:17
come to the register page click on this
5:19
it's go to the back go to the click
5:22
click click okay now you have now you
5:26
have a good idea how to do the uh
5:28
prototype model in Figma very simple you
5:30
have to try on this it's very simple
5:32
thank you for watching