0:01 in this lecture we're going to learn how
0:04 to work on the platform figma how to
0:06 create a prototypes in one word we can
0:09 say that figma enables the creation of
0:12 prototypes and wi frames uh which allows
0:14 you to express your Concepts more
0:17 effectively whether it's for a business
0:19 proposal a project presentation or even
0:21 new startups today with the help of
0:24 figma we will learn how to create a
0:27 prototype of Instagram before to start
0:29 let's look at the interface on the
0:32 middle part we going to put down all our
0:35 assets on the right panel side we can
0:37 design our assets or add some
0:40 functionalities with prototype part on
0:42 the left side you can see all the layers
0:44 and assets that you have used in your
0:47 prototype top side is for the tool boxes
0:50 which allows us to insert shapes figures
0:53 text and work with different plugins
0:55 okay first of all to create a prototype
0:58 we need a frame frame it means type of
1:01 device let's go to the thirt button
1:03 select the frame uh we can see here we
1:06 have a frame for mobile phones which are
1:08 versions of iPhone and Android tablet
1:11 frames desktop frames so it depends on
1:14 what kind of prod prodoc you're going to
1:16 prototype so first let's say I would
1:18 like to create an Instagram on mobile
1:20 version let's SEL the one of uh mobile
1:23 phone frame uh in my case I decided to
1:26 work on iPhone 1 and 14 so on the top
1:28 left corner you can see the play button
1:30 if you'll press it
1:33 you could see the output of your frame
1:35 so your task is to manage both of your
1:38 tabs first tab it is your workspace
1:40 where you're going to insert all data
1:42 the second page it's your output where
1:46 you can see how your prototype is looks
1:49 like on real mobile phones okay so since
1:51 we creating an Instagram first we need
1:54 the Instagram's logo type so all uh logo
1:57 types icons that we going to use on our
2:00 prototype they already available for us
2:03 in section plugins let's go to resources
2:06 plugins and you can run here the plugin
2:09 which is called logotype run the vctor
2:19 Instagram
2:22 insert resize
2:25 it also don't forget to check your
2:28 output uh next thing that we have to do
2:30 is to work with a plugin I'm going to
2:33 run the plugin which is called icons uh
2:36 by default here you have a size
2:39 1990 but in my prototype I'm going to
2:41 use the icons on the size 30 and 30
2:45 let's search for her icon select and
2:55 send double check your output for
2:58 example in my output I cannot see the
3:01 heard and sent button it's because your
3:03 main frame is iPhone which is this one
3:08 on the left side uh but my two of icons
3:10 are out of my frame which means you have
3:13 to select both of them and drag inside
3:16 of iPhone make sure all your items has
3:19 to be under your main frame only in this
3:21 case all your items will be available in
3:25 your output section next part we have to
3:28 work with circles which allows us to
3:32 include or two upload our stories let's
3:36 go to shapes select the ellipse draw it
3:39 here uh on the right side we can see the
3:41 weight and height where I'm going to for
3:46 example apply side 60 and
3:48 60 and now I would like to duplicate
3:52 this cips and for the second one let's
3:56 assign the size 1550 - 10 and you can
3:58 change the color to differentiate the
4:00 first circle from the second one so why
4:02 do we need the two circles Front Circle
4:05 will get the Avatar picture the back
4:07 Circle will get the gradient color
4:09 that's the main reason why we got the
4:12 two circles here and please duplicate it
4:20 line in order to fill out the circles
4:22 with the avatars we need to First select
4:24 the circle which is on the front part
4:27 let's go for our plugins and round the
4:30 plugin which called unsplash un splish
4:31 is actually the website stock free
4:35 website to take different photos images
4:37 from these categories let's select the
4:39 portrait then select
4:42 one in the same way please fill out all
4:53 portraits the next part is to fill out
4:55 the backside circle with gradient color
4:58 to apply the colors for select your
5:01 ellips go go to the FI section and we're
5:04 going to change this solid into gradient
5:07 one in this part we have to manage these
5:09 two shapes the first shape allows you to
5:12 fill out the top side of your circle the
5:15 second shape allows you to fill out the
5:18 down side of your ellipse or Circle in
5:20 the first part select the color which is
5:23 close to purple in the second part
5:25 select the color which is close to
5:28 Orange and don't forget to drag your
5:31 second line in order to fill it out with
5:33 the color as always it will be on
5:36 transparent boat the same with others
5:50 [Music]
5:53 steps okay good next part is a text we
6:03 what else do we need we need the
6:05 horizontal line which separates our
6:08 story section from main page section
6:12 let's do it uh in our own example uh go
6:14 to the shape select the line make sure
6:18 the color is light gray like this and
6:21 now let's start creating the main page
6:23 section to create I'm going to for
6:28 example copy this SE user and paste it
6:31 here let's resize it make sure you have
6:33 highlighted both of your circles and
6:36 apply the same WID and height for
6:40 example in my case 25 and 25 let me copy
6:43 this users's username put it next to the
6:47 Avatar and the next comes here the three
6:50 dots um you know the three dots it's the
6:53 ellipse let's draw it here assign the
6:56 size for example three and three at the
7:00 same time the color has to be black one
7:02 and don't forget to duplicate since we
7:05 have a three dot you have to duplicate two
7:11 times now we need to post the picture
7:28 time okay the next part is again icons
7:31 like uh like commenting sending and
7:34 saving so this one is called bookmark in
7:37 icon part and the text like byart and
7:50 example to complete the liked by part we
7:53 need to copy the three avors paste under
7:58 your icons and let's resize the three together
8:00 together
8:02 to make the text bolt you can press the
8:05 keyboard combinations contrl b b means
8:09 Bol last time text let's say here posted
8:11 day is November
8:14 16 okay for this text I'm going to use
8:17 extra light and change the size for
8:20 example seven one moment don't forget to
8:22 check your output all the items that you
8:24 have inserted in your workspace should
8:28 be available or visible in your output
8:31 next part we need a downside uh this one
8:35 footer home I can search reals um what
8:38 else shop and
8:42 profile uh before to add all these icons
8:45 we need to First draw here rectangle
8:47 because when you'll scroll the page all
8:49 your items should be fixed on the
8:53 downside and the downside should get
8:55 white color so to get this white color
8:58 exactly we need this shape make sure it
9:00 has a white white
9:09 icons search for an icon home [Music]
9:20 first okay here we are in that P we have
9:23 finished designing our first page now
9:26 our task is to add some functionalities
9:28 which first we're going to start
9:31 scrolling our page before to add the
9:34 scrolling option we have to group some
9:37 items uh grouping we needed to fix the
9:39 positions or to scroll this positions
9:41 okay that's why we will start from the
9:43 downside first the downside if you
9:46 remember we have a rectangle and all
9:48 these five icons your task is to
9:50 highlight all of
9:53 them right side of your mouse and group
9:54 your selection so you can check it by
9:57 taking off this item from out of your
10:00 frame and return back so it means all my
10:03 items are grouped together next step is
10:06 to group the middle part items let me a
10:08 little bit res size this one it's too
10:11 small I guess list highlight starting
10:16 from profile including username SS the
10:20 pictures all your items and right side
10:23 of your mouse group selection let's take
10:27 out our grouped items out of our frame
10:30 so my task is to scroll the page that's
10:33 why we need a lot of posts so I'm going
10:37 to copy this my group item contrl c
10:40 contr v and paste your copied card under
10:43 your first post and one more time make
10:45 sure you have a three posts for this
10:47 three post we need three different
10:49 pictures double click to change your
10:58 [Music] unsplash
10:59 unsplash
11:02 okay now three of our P are
11:06 ready the next task is to group all the
11:08 three so I will start highlighting from
11:11 the first post second post and please
11:13 right click the right side of your mouse
11:16 group selection after that please return
11:21 back your post uh inside of your
11:25 frame okay let's double check our output
11:27 so all my elements on the right position
11:30 except the footer section right and I
11:35 need to bring all this footer items to
11:38 front side to bring it you have to click
11:41 the right side of your
11:50 front let's check one more time output
11:53 now it looks better and now we need to
11:56 scroll the page at the same time we need
12:00 to fix our foot part in order to fix the
12:03 footer select your group in my case it's
12:06 group number one let's go to prototype
12:09 here we have a scroll behavior and
12:11 inside position to fix our footer on the
12:14 down side we need to click the fix stay
12:17 in the place in the next part our whole
12:19 frame should scroll okay in order to add
12:22 a scrolling option we need to select our
12:26 frame go to scroll Behavior overflow
12:28 gives you the several options how to
12:30 scroll like horizontally vertically or
12:32 both directions we need a vertical
12:36 scrolling let's go back to output and
12:39 try to scroll your page uh please make
12:42 sure your bottom side is fixed and your
12:45 whole page Scrolls vertically great on
12:47 that point we finished the main page of
12:49 Instagram so so now we need to create
12:53 another frame uh in order to make our at
12:56 least one of the circles
12:59 clickable let's select the same frame I
13:01 used before iPhone 1314 here this should
13:05 be the same frame since it's the stories
13:09 page I need to fill out whole my frame
13:12 with the shape of rectangle run again
13:16 your unsplash select one stock free
13:21 F okay what do we next um we need here
13:24 user profile close button send message
13:27 part let's do it one by one
13:29 one [Music]
13:45 [Music]
13:48 uh the next step is to add here the shape
13:49 shape
13:52 rectangle uh to make it more similar
13:54 like an Instagram we need to put down
13:59 here the corner let's say 25 degree uh
14:02 and then we have to apply the transparent
14:15 mode okay to connect this two pages we
14:19 need to work with interactions first I
14:20 added the story to the circle let's
14:24 select the circle go inside of prototype
14:27 select interactions when you will click
14:29 or tap this circle in need to direct
14:32 your page from main page to the stories
14:34 page let's check it
14:38 out click it here is the stories page
14:39 but there is no way to return back to
14:42 the main menu so we need to solve it the
14:44 same with this close button select the x
14:47 button direct your page from the stories
14:51 page to the next to your main page again
14:54 click it now it returns you back to the
14:57 main page so make sure your page Scrolls
15:00 at the same time at at least one of your
15:02 circles should get a stories and one
15:06 more thing how we can for example click
15:09 the like button to get a red colored H
15:12 it's really easy so you can just easily
15:14 copy your second frame for example in my
15:17 case is iPhone number two I will copy
15:21 all items and paste next to it you need
15:23 to change only one item which is the her
15:29 icons
15:32 and the last interaction click your
15:35 shape one more time interaction when I
15:45 page go
15:50 back click it close it go back scroll it
15:53 click it open like it close it okay
15:56 really easy to create that prototype on
16:00 figma now your task is is to make
16:03 clickable at least one of the given
16:05 items from the footer
16:07 section when you'll finish on the top
16:09 side you have a share
16:12 button uh make sure it's anyone with the
16:14 link can edit copy your link and submit
