🎨 How to use Figma: UI Design Playground! 🚀

hi there welcome to teachers Tech my name is  Jamie and it's great to have you here today   I want to show you how to use figma for UI  design this is going to be a beginner's class   in figma and so we're going to be starting  from the very beginning on how to get your   free account if you're an individual and then  start designing right away figma is a fantastic   product for design and what I really love about  it you can prototype as well I'm going to show   you what that means in a moment so let's get  started on this beginner's tutorial on figma

have you heard of the term UI design before if you  haven't that means user interface design and that   focuses on the look and the layout so here's an  example of what we're going to be creating today   this is just a very three pages of an app that we  have here that we've created and we look at the   different things like a button or the images  in it or the text in it all these things are   part of the UI design now the other thing as I  mentioned is we can prototype this as well I'm   going to show you how to do this in this video but  if I go to prototype and just hit play it creates   hotspot so it kind of goes through and shows me  what the actual how everything flows through it   so I really get a feel so if you're going to be  presenting this to someone you can really present   something that will have a lock as an end result  to it so that's what I want to show you how you   can build today in figma the first thing we need  to do is sign up for our free account if you

don't have one and I'm just using a free account  that I'm showing you with today also go ahead go   to figma. com or I'll put the link Down Below  in the description just to let you know if you   do purchase it that is an affiliate link now just  go up get started for free and you'll see at this   point you can simply use your continue with Google  if you have a Google account and sign up that   way or create your own so go ahead and get your  account and then we can move on to the next step

now that you have your account I just want to  show you a couple of things before we start   getting uh going ahead with their design if we go  up to where your name is just take a look at this   and drop down if you wanted a different theme  whether it be the darker light you can change   it I do want to point out you can download a  desktop app as well I'm just using the online   version so what I like about this you can be using  it on any computer but you can also install the   the desktop app I just wanted to point that out  now if we were just going to go ahead and start   with a blank file in figma we can just go to this  blue button up here this design file so if I click   on it we get this blank page you can see this is  Untitled I can click in this and change the name   if I want and I can start designing but I haven't  shown you how to do that yet but we're not going   to start from a blank one anyway we're going to be  starting from a template and try to mimic and copy   the design that they've done just so we see where  all the buttons are since we're not going to be   using this as anything but practice now I'm just  going to go back here if I look in the left hand   corner it says back to files this will bring me  here now you can see this test one is right here   that I just opened it saved automatically if I  right click on it I could open it again open a   new tab I'm going to go ahead and just delete  this because there was nothing on it as well

I'm going to go to the bottom left hand corner  because this is where I'm going to get my   templates you notice across the top uh there was  some templates when we logged in and you'll see a   bunch of them but what we want to do is go explore  the community down here I'm just going to choose   that and now we're in the figma community we could  go ahead and search in Google for figma resources   and there are lots of free resources that you can  use I just like staying right within here to get   the things that I want I'll be showing you how  to get icons later through here but let's start   with finding an app and then we're going to copy  that app to learn how we can design with figma   let's click in here and I'm just going to type  in pet app because this is what I started with   the last time I'm going to go and just hit enter  and it you can see all the different app designs   all these designs that are here that I could start  with as I scroll down and you could search for a   lot of different ones but the one I want to start  with is going to be right here so this is the   e-commerce pet product app design so you could  type that in if you wanted to get the same one

that I have or you could start with a different  one as well go ahead and click on this one   and it gives you an idea what the layout is so you  see the four different pages on this and this is   the one that I showed you that I turned pink to  put some different pictures changed uh what it   was called I'm just going to go ahead and open  in figma so as I do that this will open it in   my files so here it is right through here we have  these four different screens take a look iPhone 13   Pro Max I'm going to show you how you can change  these frames but this is what we're going to be   starting with if I go back up top if you wanted  to change the name of this you can change the   name up here we could go back to our files and  you're going to see here it is now so this is   the one that we're going to start with and we're  going to aim for something like this but again   you can change the design depending what you want  as we go along let's go ahead and open this file

that we just added and I want to give you a little  walk around you can double click on this one you   can right click I'm going to go ahead and open  in a new tab the reason why I like doing this   just for quick access if I have this tab open  I can just click back here and then keep this   open as well but this is all up to you what you  want to do now when this opens you can see that   there's going to be four frames here where you  can look at the top here this one says iPhone or   iPhone 13 Pro Max we've got screen two three and  four this matches over here what we see so if I   go ahead and click this then this one is selected  as soon as I click that or this is selected take a   look over to the design up top and then you have  all these things this is where you're going to   make the changes to color to your font to your  fill all these things are over on the right hand   side here another way to select a different one  if I just right click on any of these notice it   starts getting selected as well and I have all  these options so we're working if we wanted to   change the layers outline stroke widgets plugins  everything's under that right click that you see   here as well where you have lots of different  options now if I go ahead if I want to see all   the different things that are part of this Frame  here on any of these so if I go to screen three   here and just hit this arrow that it goes down  then we get to see as I hover over any of these   each of that I that item will be highlighted  depending so if I was going to change layers   or anything I can drag these around this way too  as well just by clicking and holding but you can   see at any point if you were trying to find the  exact one because sometimes when you're clicking   on something it gets a little difficult because  you're clicking through layers but then through   here you could select that image if you wanted  to modify it from there so that a little bit   of a walk around I hear of it let's do a little  organization and then we can start with our design   by trying to copy this but also at the same time  trying to change it to what we might want instead

I'm just going to go ahead and rearrange the order  of these just so it's easier we can kind of do it   side by side as we work through and try to copy  them to do this if we look in the top right hand   corner you see 48 we have zoom options I'm going  to just zoom out look at the shortcuts this can   save you a lot of time as you are using this more  and more but if you can see the different commands   for the shortcut so if I just zoom out just like  this oh I'm going to rearrange the screen so this   first one here if I just select it let's say I  put this one here and then I'm going to go to   I'm just going to move that closed and I'm going  to take two and put it below and I'm going to put   three and put it below notice this is something  I really like about the design as I drag and hold   things around it lets me know the even distances  so that was going to be 84 that said 84 between   the top and the bottom one so that makes design  a lot easier that way as well so this last one I   have is screen four right here and I'm just going  to move this one down as well and I'm just going   to move it underneath and watch as I get to the  right distance here if I come up and line it up so   I know they're all the same distance not that that  matters for what we're doing but with alignment   and design that makes it so easy when you're just  dragging things around and you know that things   are in the right place the first thing I want to  do is delete one of these screens and it's just

going to be the first one because this is a pretty  simple one and I just want to work with the three   other ones trying to copy those today now I'm  just going to go ahead notice when I draw this   selection tool I can select everything on here as  well so same thing if I have it selected up here   if I hit delete on my keyboard it's gone now we  do have control Z to put this back or command C   on a Mac but if I hit that we can undo our last  step so that's always a good thing to remember   is that Ctrl C on Windows or command C on your  Mac but I do want this gone so I'm just hitting   delete I'm just going to be working with these  three right here and we're going to try to mimic   these and change these at the same time if we  wanted to name change the name so this is called   screen two if we double click in here if this is  going to be maybe we're going to turn the   name we just want to be able to understand what  screen is better we can change the name up here   but we're going to create replicas right beside  here and I'm going to zoom up to add so what how   they create that make this for us and they make  this quite easy we can put frames in of certain

uh phone sizes and to do this if I go up top here  and we're going to be this is where we're going   to be adding this is a move tool here you can  see and there's the scale this is where we're   going to be adding a frame to begin with so  if I click frame here and look over on the   right hand side look at through all the different  frames that we have I can choose whether it be a   phone an iPhone we have Android tablets desktop  this really speeds up the design process let's   say we're making this for the iPhone 14 pro  max they're they don't have it updated with   the new iPhone 15 yet but I'll go ahead and  just select that and now look at this we have   a frame and I can align this here beside it and  we're just going to work beside of it and we're   going to zoom up so I'm just going to go Zoom  to fit here actually I'm going to just go Zoom   to 50 to see how that looks right about there and  you can adjust it to what you want but what we're   going to try to do on this one over here is copy  kind of the design but change it at the same time

now on the first step let's go ahead and change  the background ground color to something you   could try to match it to this if you'd want or  change it to something you like I could do this   in a couple of different ways if I select this  as soon as I select this Frame The Fill color   is right here so I could go and choose any color I  want from here so I could select one of the colors   here or I could move this around here to kind  of adjust to get specific colors I could enter   the hex number right through here you can adjust  all these different things to play around to get   what you want you can also undo like I showed  you before and it will undo all those different

colors that you've tried you could put a shape  in it as well so if I go up to the top left and   choose rectangle I could put a shape over top of  here and create it to the same size here and it   snaps kind of into place around that frame that I  chose for the iPhone 14 Max at this point I could   change this color here so if I chose it then  that's another option if I'm selected on this one   take a look over to the left now that I've gone  ahead and have the frame numbered here here's the   i4 iPhone 14 this rectangle 31 is here I could go  ahead to say change the name on here to background   if you want to do that if you don't want it though  if I just click on it and hit delete this way then   that is gone I'm just going to go ahead and pick  a color you can adjust whatever color you want   I'm going to choose this one for now but it's easy  enough to make different changes to this after now   that we have a color the next thing that I want to  try is placing this button creating it over here

now we can do this by using our shapes again and  we're just going to use a rectangle so I'm going   to go to the shape tools choose rectangle and come  back and I'm just going to start it just to kind   of get close but I can adjust everything to kind  of get it exactly the way I want notice when I'm   holding and dragging it gives me the size I  can let go if I go ahead and click on this one   if I wanted it to be the exact same size this is  371 by 58 pixels if I click on this one over here   I could just go ahead up over here and type this  in so if I take 371 and the other size was if I   click on it again was 58 so this is already 58 so  I line This notice when I get it centered here it   gives this blue line here and I know it's centered  across with these blue the edges here too so I get   that in the right place but it's not quite what  I want still this has the rounded Corners so if   I click on this here take a look in over here  they put this number here so the corner radius   is 60 on these if I just click on this it shows  me Each corner is the same thing if I go over to   this one here now and just go to that same spot  I can go and put my 60 in here but I want it on   all so it goes on all of them if I just type it in  there but if I just wanted it independently and to   be different I can adjust them that way as well  now if I want this to be the exact same color as   this I could select this but I want to know what  is this color so if I go back over here and this   is you can see 2d2d2d I could go ahead and just  copy this so I could go Ctrl C and go over here   and go to the fill over here and just go Ctrl V  and it paste it in hit enter now we have the same   color it's aligned in the same place let's go  ahead and add some fonts and we'll just keep it   the same for now they wrote get started what font  is this if I click on the font if I look over to   the side this is what it is here so if I click  on where it says enter I could change it here   if I want but I just wanted to make sure when I  add it it's the right one so if I go here and I'm   just going to go up to the font tool and add some  font right to here and I'm just going to type get

started and write it the same way I could go and  if I click off of it I can see where kind of the   alignment is I can drag it around it helps me  out when I'm dragging to see the lines where   everything is lining up on it so you put it to  where you think you want it I'm just going to put   it there for now I could change the color of the  font as well if you look at the different options   here with the font size we have our spacing in  different ones right now it's white but if you   wanted it slightly different if I click on this I  can see this is about the same on it so now that   we got a couple uh things I'm just going to adjust  this here I'm going to zoom up and sometimes this   makes it a little easier if we zoom up and  we can see dragging it just gets a little bit   more exact like that so I'm going to do that and  I'm going to go back to 50 just so we can see it I'm going to just quickly on this screen change  the name from this if I look over to the left here   it says rectangle 31 I'm going to change this just  to button here I'll call it this button one it's   going to be the only one on here now another thing  what I like to do is group my different objects so

we have this text and this button one I want them  grouped together so if I move them around they   kind of stick together I'm just going to go ahead  and select both this way if they're both selected   you should see them highlighted both over here  now if I right click take a look at this we have   a group selection the shortcut Ctrl G but if I  select it now if I move it they move together on   it so it just makes it a little easier if I wanted  to move this higher lower I don't have to move   things independently they are together now if you  want this ungrouped now just go ahead right click   and we have ungroup as an option then you can move  them independently from each other so just some   tips as you're designing that could make things  easier now let's add a little bit more text here

they say shop for Your Love Today I just  want to say take your Pooch to the spa you can   write what you want so I'm going to go back up to  my text tool I'm going to just select a spot where   I want this and I'm going to say take your pooch  to the spa just like that notice I typed it first   and if I want to make changes now to it I need  to highlight this and then go to my font so if I   wanted it larger or I could select it like that or  I could just type into here as well maybe I want   it bold I can make all these changes we have our  color fill here if we wanted it different kind of   like it with the white with what I have right  now but maybe I'll change that as I go around   I can adjust this move it down so we'll leave it  right around there but you choose what you want   to say on it and then so the next thing that we  want to do is actually put an image they have an

image down here there's a few different ways that  you can place images in here we can go up to if   we take a look at our shape tools there's a place  image for video or images just to say if you're   using the free version if you try to put a video  in it won't work that is a paid for version but   the images do work so if I select let's say this  one right here dog and bath and I want this on   the front I hit open notice it's connected to my  mouse and click or drag to place and I'm going to   just click over here and then I can go ahead and  place this if you want to use the same photos that   I have I'll put a download link to these ones  they're just uncopyrated ones here but I can   put that link if you want to use those or you can  search for your own as well so that's one way I'm   going to go ahead and hit delete on this one I can  just write them in from a folder here's a folder   I have right here I can just drag it over so if  you have folders like that another way you could   do this you can copy paste right from the internet  so if I go over to pixels here which is so this is   just a you don't have to worry about copyright  with these are free to use so if I just   right click on an image and go copy image and I go  back and I can paste it I can go Ctrl V and look   at this I have I'll shrink this down and I just  copy pasted it off the another website so   lots of different ways that you can do this to get  the images in so for me though I am going to go   back to that first one I put in just drag it over  but I want some adjustments on this one I'm going   to zoom up I'll go back to 50 here I want to have  some curved corners on this one across the top I

don't want it straight across and let's say I  want to have 12 try 20. so if I just click uh   20 the bottom won't really matter because it's not  on the screen so I can make it the same for all of   them so if I hit 20 now I'm going to so the width  of this one if I double click right click on   this and I look it's 430 if I want this to be the  same right now it's 500 so if I type 430 up here   and I adjust this and it gives a little bit  of space on the side so maybe if I go 435   and I get a little bit of Curves on it now this  is up to you can changes how you want you can   move it lower or higher to get it all right so  we're almost just a couple more things on this

one we want to put a logo so you could go ahead  find a different logo that you want the logo I   have right now if I go back up to my image here  I have one right here so I can go ahead place it   right through here and underneath it I'm going  to write something else notice that this box how

big it is here I don't need it that big I can  actually crop this down so the crop tools right   here and I can adjust this I'm just grabbing those  blue handles because I don't need all that space   around it and sometimes when you get that big if  you have especially the transparency it just makes   it a little trickier to work with so now notice  I didn't change the size I just cropped out that   extra space that I didn't need around it I'm going  to go back click on this and I'm just going to   write Pooch house like I had before here so I'll  just type Pooch house I'm going to change the size   of the font a little smaller here let's go down  to maybe a 16 new it's too small we'll go 24.    and I also wanted to just be black uh to match  it for now here so I'm just going to go to the   bottom here select black just like that and  I'm just gonna just adjust this a little bit   so all I want to do on this one is add a status  bar but how do I go ahead I mean I could copy

and move this over but if I didn't have that  where would I find this I'm just going to go   back to my first tab here back at this point and  I'm going to go back to explore the community now   I already have this search for this is the one  we're going to look for status bar navigation   but there's lots of different ones so if I go  over to here and I'm just going to paste this   in and you can type status bar navigation in or  you could be looking for iPhone mock-ups there's   lots of different ones I'm going to go ahead and  select this now you can just open in figma so as   it opens in figma it will just open that other tab  so I have two different tabs open here I have this   one and this one what makes it easy is just that  copy paste that I showed you before so if we're   looking for the iPhone one here so if we take  let's say this bar here and I know it's in white   but we can make this transparent and I'm going  to go ahead and then just go Ctrl C come back   over here and go control V and look at this I have  this here and I can resize this just by pulling it   across here I'll just click off of this here and  stretch this out to fit I can go by a bit and it   won't show off the edges but I don't want it to  be white here I want it to be transparent if I go   to this and go back to the fill we can choose our  transparency by bringing it all the way down here   so if I just close out of this one and I have it  transparent across we have our first page done our   first screen so let's go on to our next one that  has a little bit more details here with a few more   pictures I'm going to just do a few of them but  then I'm going to show you how to do those and   then you can kind of go through and complete it  as you just do the same thing over and over again

let's go ahead now and add another frame so we  can copy this one and we're going to go back up to   frame and what do we want well we use the 14 plus  Max again to keep it the same I'll just line it up   here so we already know we have this we could copy  down from our top one as well so if we go ahead   and take this one we could go Ctrl C and move it  down by control B so I just copied it so we can go   ahead and quickly grab that no sense for looking  at that again but let's kind of work on our   background first notice that what they have here  they have kind of a white I can tell the white   and then they have a shape here and a shape here  so let's go ahead and add those shapes to begin

with so I've showed you already how you can put  a rectangle in curve it that's what they've done   here so I'm going to go back up to my rectangle  and I'm going to just draw it in place here   I'm going to adjust the color to what I had  before so I'll just select my fill and it was   this one I might go back probably at the end and  adjust my colors again because that can be done   quite quickly what's the curve well if I look  over here click on this one the curve is 31 if

I open it up they went across all of them because  the bottom is not really showing so if I   click on this and just type 31 over here I get  it very similar here so between the two of them   what's the next thing that I want and it looks  lined up so I can kind of line it up if I want   to get close and I can always keep adjusting the  next thing is I have this white one down at the   bottom so I'm going to go back to my shapes here  and I'll put another rectangle and I'll put it   just right across here and that looks like it  will be white this time I'll just click White   and I'm going to curve it just like I did before  I'm going to bring in the size here to make it   match as well just like that and so this is curved  if I click on this one this is going to be 2020   and the bottom is zero so if I go to this one  I'm going to open this all up I'm going to go 20.    20. and now I have something very similar so  I'm getting kind of a the same look I have   my background set up the next thing I want  to point out are icons so they have an icon   here and I could copy and paste them over but I  want to show you where you can get icons so I'm

going to go back to this other tab that I have  open here this is the community tab this is the   community tab that I showed you before and I'm  just going to paste this and it says interface   icons so go ahead and do a search for interface  icons and you're going to notice there's so many   different ones you could choose from here I'm  just going to choose this one interface icon   toolbar all right nice and simple I think  we'll get most of the things that we need   but if it doesn't you can kind of play around and  adjust to your own as well so again open in figma and we're going to be able to copy paste these  over so if I go back over to this one we have a   search a magnifying glass here search one so if  I go ahead and select this one I can go Ctrl C   come back over here Ctrl V here it is  and I can place it up so it has the you can see   this one kind of has the Shadows around it as well  I can go and show you before what I did here I can   adjust these different things to kind of get  the Fill away to so if I wanted it transparent   just like that and now I have it I can size this  I guess this should go down here I can still size   it the one thing I want to point out is if you  drag this to a larger size now is it notice how   it distorts I'm going to go Ctrl Z if you hold  the shift key down and then pull it will stay   in the same so notice it stays as a square now  you have to hold the shift key down so I can   go ahead and place these around now what else do  I need let's go back to this one do we have the   through there's three dots here well that will  work for our purposes but if you wanted to go   find the four you could do that as well I'm going  to go Ctrl C back over here Ctrl V I'm going to   place this over here showed you what I did before  turn it trans oops the wrong one here I'm going to   move down a little bit uh transparent just like  that so I'm getting kind of a similar setup here   I'm going to put a logo across the top I'm going  to use the same logo that I did before so I could   go insert it again or I could just go grab it  here can control C and I could go Ctrl V here   I'll just paste it down here I'll make sure I'll  copy that here Ctrl C come back down here Ctrl V   and again if I wanted it smaller and keep it  constrained I could hold my shift down make it   smaller put it in place so maybe I just want the  logo here or I could write again the same thing   the pooch house below it as well so we'll keep  going down let's now go ahead and choose some   images here to play so I'm just going to create  one but then I want you to create the other four so I'm going to go ahead and start and copy  these shapes just the white shapes they have   I'm not going to put the same information in  but I'm going to go and start with the shape

and just go up rectangle and I'm  going to place it in just like that   I don't want to have the gray in there so  I'm just going to change it to White just   I'm going to put FFF 6fs and then place it like  that and that turns it to White now what is the   exact size if I come over here the rectangle is  right here rectangle 16. then I can take a look   164 by 229 and all the edges are 20. so if I go  to this one 164 I can just type that in by 229   and a 20 here and it will go  through all the corners so I have that exact   same size here I can line it up oops I grabbed  the wrong thing here so that's where the control   Z is a nice thing to have line it up to where  I want let's go ahead rather than making again   let's go Ctrl C for copy and Ctrl V so just make  sure it's selected Ctrl C and then go Ctrl V and   notice we have another one right there so let's  do that again just Ctrl V we've already copied   it so I'll bring it down and I want to make  four of these Ctrl V again so I'm just going   to place them line them up here watching the  different arrows making sure things are lined up   now what I want to do is actually place an image  into these as well so I'm just doing the one right   now if I go up to my image where I've showed you  before I can go and grab an image let's go and   try the facial so if I go and grab this one open  and just plunk this it goes inside of the shape   I can still move this around so what I can do is  if I double click on this one I drop down go to   crop it allows me to move it around maybe I want  this larger and just to focus on this a little bit   more and then I hit enter and then I've kind of  adjusted where I want now the next thing is I want   to still be able to write a little bit of text  down here about what the treatment is so I could   go and add one way I could do it is go and add  another shape to it and I know I don't I can just   kind of go over top here and again I'm just going  to move it to the White to get it like that do I   want it square like this so this is where or do I  want it curved on the bottom so if I open this up   this time maybe I'll just put it on the bottom  one so I'll put the 20 and then it just   matches around here so is that enough space I'm  going to zoom up to a hundred percent to see what   I have here so it's a little short I'm going to  just make this a little it was 164 the other one   adjust it and it looks like that's going to go  well there I can bring it up higher if I don't   think it's going to fit now it gives me some  space to write what it is so I'm going to go   ahead and this is just going to be we'll call this  a dog facial and I'm going to go and get some text   and I'm just going to place it right here  and write dog facial not Capital like this and I can move it around place it where I would  like do we want to have an amount that we'll put   right below it so we'll go back make another spot  here we'll line this up and we'll give it a mount   I'm going to call this one we'll say 450 expensive  facial for a dog we'll just do it like that   and now we can go and get i'll line this up here  we can change the color to any of this if you want   if we want the Stars we can go search for it the  same way that I showed you before for since uh   if I go through this one here I can double click  on it a few times to get to the right one so it's   this one right here I'm just going to go Ctrl C  if you want them and Ctrl V I'll do that one more   time make sure that I have that selected and I'm  going to copy this way too and paste there right   there I have my double ones here and I can bring  them over from this way here I did that twice the   copy there should be one more set there as well  so if you wanted to kind of do that or search for   or even just search for it just like the icons I  showed you before another way you can nudge with   your arrows if you can't get it exact for the  mouse sometimes I find that is another way I'm   just going to make a few quick movements on this  so I'm going to nudge this over line this over and   this one as well I'm going to go ahead and just  copy this basket you could search for this basket   with icons but we've already just like the stars  we already know so I'm going to go and control C   this and Ctrl V and I should have a duplicate  that I can move over and if there's anything   through here we have a heart on our other icon I  can go and select this one here make sure I get   the right one here you can see how the layers if  you keep double clicking it kind of goes through   Ctrl C Ctrl V and then it puts it right on top and  then I can kind of place it if you want to kind of   to stay in that format but you have the choice to  go search for them so that's just one spot what I   want you to do right now I'm going to go finish  these other ones by placing them in then we'll   go back with all four of them and then we'll just  add our home buttons and everything at the bottom   so these are the four pictures that I put in  place and the different prices I made up on each   of these you can go ahead and hit pause and if  you want to copy the exact same way I did it but   it doesn't have to be the exact same way focus on  aligning uh use the pictures that you want to use   right what you want I want to make another change  here I did make a change to the title I did add   poochaus underneath it I did make some movements  on that just by adding the text I am going to   change the color here to the pink that I showed  you that very beginning I just think that kind of   matches the other colors a little bit better that  I was working with the imagery and everything   the other thing that we're going to add right now  if we move over is a circle like this so we'll add   this circle over here a couple different ways we  could do this we could add one Circle being white   and then make another one another color smaller  to put in or we could just add a circle which is

the ellipse here and I'm going to just draw it in  here so let's get this I'm going to put this will   go 68 by 68 here just so it is a square and not  a square circle but that it's the same and now I   can go ahead what color do I want this to be well  I want it to be let's go find a darker pink here   we'll go like that and I'm going to add a stroke  so the stroke goes around the outside so if I go   and hit the plus here and add a white stroke and  I'm going to increase the size so let's try four   so just like that I have this circle here that  kind of matches this one here is the size a   little different this one's 61 by 55 here I could  you can adjust it the way you want if I wanted   it a little bit I could put those exact ones  and I'm just going to make it 64 by 64 like so   and now I'll just keep it in place take a look at  the other effects if you wanted to add any if you   wanted a drop shadow so now it has a little bit of  a drop shadow but we can go if you want these gone   you can just hit the takeaway here the minus and  then it will go I'm going to go and grab this here   but again you could look it up as an icon control  C and I'll just go Ctrl B and if there's a coffee   here and I'll bring it over and place it in if  I just go back to our interface icons we could

copy these home ones and the heart one over as  well you could look for different ones maybe more   modern ones depending on what you want or else if  you want just to use these ones here we could go   Ctrl C and move them over and now Ctrl V and I can  place them on just like this and I'll line them up   so now that we have these icons in place let's  just go back up and we're going to put some images   across here of four different faces so you could  choose a technician in this little demo here now   I like to put the shape and then drop the images  into them so I can get them all the placeholders

ready so I'm going to use my rectangle and I'm  going to make one shape here the color won't   really matter too much because I'm going to be  it's going to be covered up in the picture I'm   going to make this 82. and just to let you know  if you uh constrain proportions if I click this   if I change this number here this number will  automatically uh change with it so if I wanted   it to be a square if I was going to go let's say  82 and this one 82 and then I lock it anytime I   change this if I go 85 the other one will change  as well so just a little bit about what that means   I'm going to add some curve to the corners like  I'll add eight I think that will be enough we'll   add some effects to it we'll add a drop shadow so  now but the reason I do this is making this one   I'm going to go and copy this Ctrl C Ctrl V and  I'm going to place another one and notice as I   drag just watching everything is aligned so I'll  control V for another one and as I drag it so I   know they're 13 apart as I hold on to it Ctrl V  for another one just like that so if I had more   people maybe I put another one off to the side  just like how this is this isn't quite lined up   I can adjust this to make sure all those lines  are there and you can see as you drag there they   go they should all be the same now so now if I go  get those images the placeholder images I can this   time let's select all four at once I can select  one place there one there and one there   so you can see how quick that is to do it that way  when you have your placeholders select all those   images at once and just click and they just fit in  and I don't have to go through and adjust each one so now that you have this completed the second  screen go back making sure I didn't change show   you that I changed the color to this first one  to kind of match on it and as I go down through   these if there's anything extra you want to add  any effects or Strokes to anything go ahead and   do that I want you to create a third screen so  the whole idea of this is when I click on this I   want it to go to this screen and then this one or  depending on which one you want which one you're   going to Hot Spot I'm going to hotspot this one  when this one gets click clicked on it's going   to bring me to this page so I need you to create  one more screen here using all the same things   that I showed you already you can hit pause here  if you kind of want to copy what I did you can   see I inserted the image I curved the corners I  just inserted some text in it did the same thing   that we did before with the search I have my logo  on top I've added this down below with the icons   very similar so go ahead create that third page  hit pause if you need to and then we're going to

add the prototype to make sure that we can add the  hot links to this to see how it works in action   so now that we have our three screens that we've  created we don't really need these ones anymore to   provide to do the prototyping on so I'm just going  to select this and hit delete and we're

going to remove each of these and now what we're  going to do is just rearrange these a little bit   I like to put them kind of across in a linear way  just to or to put the prototyping so I'm going to   put them here and I'll bring this one up here  and I'm going to go ahead and zoom back up here   just like that so I'll just line this up not  that really matters but we'll just do that   now prototyping is right over here so I'm going  to select prototyping and now what we want to do   is just where is it going to be the start of the  flow well this is going to be on this page here   so I'm just going to hit the start so when I hit  play it will be there now what do I want to have   happen when this is clicked I want to go to this  page notice as soon as I'm on prototyping whatever   I click here I can I get this circle here and  then I just drag it to indicate what do I want   to have happen so then that becomes a hotspot  it drags over there and then it will navigate   to this page so that's what I want to have happen  just like that and this all works for me when I'm   on this page what do I want to have happen well  depending on which one you created for me it's the   dog massaged here if anybody clicks on this here  I want it to go to this page notice the circle so   this is exactly what I want to have happen here so  it's highlighted or it's connected with this one   if you want to make it the whole thing notice if I  hover around the outside here select it maybe it's   better to tap that so if anybody goes over top the  whole thing then that's there if they get to this   page what do I want to have happen well maybe I  want to just have a back here so if I click this   and grab this circle I just wanted to go to grab  back to this page anything else this could go back   to home so what's classified as home maybe this  is this page classify just home or is this page   classified by it to home well we could make any of  these homes go back to wherever so if I wanted it   to go to this page I could connect it like that  I could make this one connect over there well it   didn't connect just like that so let's see how we  have it working in our Prototype all we need to   go is hit play up here and it then it's going to  go where I told it to start this should be a hot   spot right here and the next hotspot was going  to be right here so if I click this it brings me   to this now I can go ahead and do I want to go  back to home which brings me to the first page   or should I have it go to the second page  but I know this one if I can connect this   one would bring me back one page so you can go  back out of this one so if I go at this point   I can go just back here a step in the tabs that  are open across the top and then I can make any   adjustments if I want any of these gone too I can  go and just drag them off or I can click on them   and hit delete oops I deleted the wrong one there  making sure that I'm on Prototype select it hit   delete and then you can delete you can add more  to it too as well so I hope this tutorial this   beginner's class has given you an idea of how  to work how to design with figma and how to get   the prototyping working I would suggest finding  different templates trying to copy them trying to   play with all the design figma I think is made for  a user that if you play with this more and more   you're going to be creating some great things so  thanks for watching this time on teachers Tech let   me know what you think down in the comments I'll  see you next time with more Tech tips and tutorial