let me teach you how to create a figma prototype a prototype is an interactive representation of
your product design in a figma prototype is a link where you can share with other people and whenever
someone opens up that link they can directly see your design and then interact with your
product design on that page a figma prototype can get really complex if you are working on a
large scale product take Instagram as an example there's so many pages and so many interactions
you can take on a single screen however even to this kind of complex and huge scale product
the core interactions of a prototype is very similar and today I will teach you the core
interactions you need to know to create a great prototype first a page level vertical scroll
second a component level horizontal scroll third cross Pages interaction so if I click
this icon it take me to another page click that icon to another page this to another page
and finally modals so if you click a button something pops up and then it also pops out
let's go let's go to figma and create a new figma file you can name the file as prototype practice
create a frame and select the frame size based on your mobile phone size let's create a wireframe
that represents the home page of an app add a rectangle on the top of the page to represent
the app header then change its fill color to a darker gray to form more contrast now press T and
then add a text box on top of the app header to represent a text I'm just going to put in header
let's quickly adjust its font and its position now let's copy the header and then paste it and move
it to the bottom of the screen to represent the tab bar press r on your keyboard and create three
other rectangles to represent three icons on the tab bar press R again to create another rectangle
that represents a card on the app then let's command C or Ctrl C command V or Ctrl V and copy
these cards to represent three cards on this app now click prototype on the top right and then set
the device to your mobile phone device then select the entire frame and then hit the play icon on the
top right here we've created a prototype for this wireframe and you can click the share prototype
button on the top right to show the Prototype link with other people the challenge is to make
this Interactive first let me teach you how to do a page level vertical scroll go back to the
design file zoom out a little bit select the frame and then extend the length of the frame and then
select the entire toolbar and then drag it to the bottom of the screen now copy one of the card and
then paste it underneath to create more cards to fill the entire screen and then adjust the length
once again so that the entire page is filled with cards now if you go back to the Prototype
page you can see that this entire page is already scrollable vertically however the header and the
footer also Scrolls once you scroll the entire page now let me teach you how to stick the header
and the footer on the page please go back to the design file and select the entire footer
you can press Ctrl to make sure you are selecting all the elements here then right click and then
select group selection you can also use command G to group selection now go to the right side and
under constraint click the bottom line to make it stick to the bottom then check the fixed position
box now go to the app header select all elements here and group these elements by command G
then check the fixed position box now if you select the entire frame and then play
the Prototype again you can see that the entire page is scrollable but the header and the footer
always stick on the page as a recap increase the length of the page to make it scrollable
if you want to stick any element on the screen select that element and turn on fixed position
now let me teach you how to do a component level horizontal scroll let's go back to the design
file and let's make the first card a bit narrower copy this card and paste more cards on the side
if you go back to the Prototype now you'll find that the page is still vertically scrollable but
horizontally it does nothing so let's go back and let me teach you how to solve this problem
first select all the upper cards and drag it out of the frame copy one of the card and paste more
cards on the side then select all the cards right click and then select frame selection
now drag this new frame back to the mobile frame now you are able to adjust the frame size without
squishing the cards in it once you've adjusted the frame size to fit the phone size check clip
content finally go to prototype select this Frame and then turn on horizontal scrolling
now if you go back to your prototype you'll be able to horizontally scroll through the upper
cards you can always go back to readjust the size of the frame the horizontal scroll will stay there
as long as the frame width is smaller than all the cards width as a recap to make a component
horizontally scrollable on a page first frame the section then adjust the size of the frame turn on
clip content and then turn on horizontal scrolling next let me teach you how to create cross Pages
interaction let's go back to the design file double click on the page title and then name
it page 1. then copy this entire page and paste this page on the side we are going to adjust this
page to create a new page keep the header and the footer for the other element please either
adjust the rectangles from before or create new rectangles to create a page like this once you
are done select the new frame and click the play button on the top right you will be able to view
this new page on the Prototype page as well but the two pages are still disconnected so let's
go back to the design page and make sure the right side is selected as prototype then select
one of the icon and drag one of the dot to the other Page by this you've created a navigation
interaction so once people click on that icon it will direct them to the other page let's do
this again select the left icon on the second screen then drag one of the dot to Page 1. by
this a user will be taken back to page one once they click the left icon so if you go back to
the Prototype now we can click between Pages by clicking on the different icons on the tab bar
there's a different way to achieve the same thing let's go back to the design Page hit Ctrl Z or
command Z to go one step backward then select the left icon on page 2. then on the Prototype
page add an interaction by hitting the plus icon click on this new interaction and then change none
to navigate to page 1. this is a different way to create the same interaction as we created before
as a recap to create a navigation interaction click prototype on the design page then select
the element you want the interaction to start from then drag one of the dot to the page you
want it to go to finally let me teach you how to do an overlay effect let's go back to the design
page and click F to create a new frame this Frame shall be smaller than your Mobile screen
next use more rectangles to represent a screen like this now go to the second screen select the
icon representation go to the Prototype page then drag the icon plus sign to the new modal
page we designed under interaction details change navigate to to open overlay now if we go back to
the Prototype and check out this new effect we can see that once we click that interactive icon it's
going to open this page as an overlay to the page we were on let's further improve this go back to
the design page and under interaction details check both boxes add background behind overlay
and close when clicking outside now if we go back to the Prototype we can see that this modal is way
clearer than before with the new background and also you can close it by clicking outside the box
finally let's go back to the design page again and select the top right icon in the modal let's add a
new interaction and this time set the interaction as close overlay you'll see a cross showing up
here and if we go back to the Prototype this time if you want to close the modal you can simply
click that icon and it will close the modal for you if you've came this far you already
know all the things you need to know to create a great prototype but I just want to give you three
more tips to save your time the first tip is to download figma app on your mobile phone and then
click mirror on the bottom right then select any frame on your laptop you can directly play with
your prototype on your phone and this is a more realistic representation of what you are designing
my second tip is to use component for example adding an interaction for the current bottom
Tap bar is not very difficult but only because we only have two screens here I'm adding a new
screen to demonstrate what I mean if you have a component that will be shared across many
screens drag it outside the frame right click on it and then select create component then add all
the interaction details into this component for example if you click on the first icon it shall
direct to the first page the second icon to the second page and the third icon to the third page
then copy this main component and then paste it to the rest of the pages whenever you paste a
main component it will automatically become a sub component and now if you want to make any edit to
this main component all the sub components will reflect the change and this is a huge Time Saver
my third tip is to Shadow the user you need to first open up the Prototype link then send
the link to one of the user you want to test this on and once another person starts using
this prototype you can click on their profile photo on the top right of the screen and then
Shadow their interaction with your prototype so whatever they do with your prototype you'll be
able to see it real time congratulations you've learned a lot today and you can always go back
to repractice what you learned today this video is part of my figma tutorial Series so if you
haven't checked out other videos yet go check them out and I have a little homework for you
I challenge you to create a prototype of your favorite app and include at least 5 pages and
once you finish that comment your prototype Link in the comment section below and also
check out other people's work and provide them some feedback in the comment section I'm excited
to see your work and if you like this video you also like this tutorial video that I made
on figma components and an in-depth walkthrough for figma auto layout so see you in this video