Designing an App in Figma - A Step-by-Step Guide for Beginners (2022)

if you're 100 a figma beginner and want to learn  how to design an app in figma then this video is   for you hey code chris jason here and welcome back  to the channel if you've been here for quite some   time then you've probably encountered several app  design tutorials from us most especially the figma   tutorial that was released two years ago in 2020  now this video is going to be an updated version   of that tutorial because it's been two years and  figma's evolved and has made a lot of changes to   the software which would make it very attractive  for you if you want to learn more about designing   user interfaces and figma so in this video we'll  take a tour around the figma user interface   learn the different features or tools that can  help you create an app design and in the end we'll   design one screen using the tools that i'll be  discussing later on so without further ado let's   move on to the video so first of all why figma  there's already a lot of design and prototyping   tools out there but why figma well first of  all it's free so right here i'm in the pricing   page of the figma website and they have like three  plans for p for everyone they have the starter the   professional and organization plan so they offer  a lot of features but even if you're a free user   you can already have three figma files unlimited  personal files unlimited collaborators plugins and   templates like access to plugins and templates  and also you'll be able to access their mobile app   which you can use to like view and test your  designs second is that it's browser-based so   there's no need to download their app so  they have an app that you can download   like a desktop client that you can download but  there's no need to use it because the browser   version is already good enough in itself third  is the wide variety of plugins that can help you   design more efficiently so plugins vary from  being able to help you organize your files   plugins that help you come up with icons plugins  that help you come up with images and so on   so these things you don't have to start from  scratch knowing that there are already available   plugins that can help you achieve these things so  fourth is the collaboration features that may be   useful if you want to ask for feedback with your  design so figma primarily is a collaboration tool   so right here you can see their selling point is  that nothing great is made alone so it emphasizes   on the collaboration features that they have  that some tools out there don't necessarily have   so figma right here is like you can think of figma  as like a google docs for design uh you can see   right here um this is a sample interface of figma  as you can see right here there are two users in   this figma file and they are collaborating  simultaneously on one figma file or design   file so that's why we really recommend figma if  you want to like um use it with your friends or   co-workers and all those things so as for us we've  been using figma here at code with chris for years   and we absolutely love how it works such as the  file organization and collaboration features   as for me i've only been using figma for the past  two years and before that i was using adobe xd and   envision studio and i don't think i'll ever look  back with the experience that i now have with   figma and because i've only been using this app  for two years i think you can think of me as a   relatively beginner user so i can show you your  way around figma with a beginner's perspective   now to access figma all you need to do is to go  to figma.com and sign up for an account right here   you can sign up by email so it's  really an easy experience from here   once you have an account you'll be automatically  redirected to the figma dashboard and from there   you can create a design file and voila welcome to  your canvas so voila here we are at our dashboard   so here we're going to rename this file as  figma practice so from here we're going to   take a tour around the figma user interface  as you can see right here and i'm not going to   dive into the details about each tool  so i'll just give you a brief overview   and after that we're going to like redesign an  app and as we do that we'll dive into like the   common tools tips and techniques that are used  in the design so as you can see right here so   so in here in the top um section is like your  menu bar so here we have the figma button so   this is our like um figma related actions so  you can see file edit view object these are all   like figma related options or settings so you  don't really have to worry about most of them   most of the time except for like the plugins in  which case um you may may use often than not so   as you can see right here i have lots  of plugins that help me with my design   so preferences um basically i don't think you also  need to worry about these things except if you   want to like change the theme of your figma ui so  if you want a dark interface or a light interface   something like that but let's keep it in the  default just for this video so light and then   get desktop up and help an account so these are  all self-explanatory but again as i mentioned you   really don't need to worry about most of them  most of the time all right so next one is the   move and scale tool so the move is basically  your way of moving around the user interface   and the scale allows you to resize objects so  for this one let's say for example we have a   rectangle and we want to scale this proportionally  if we want to do that then let's we're going to   press k as a shortcut and once we have  that you can see this double edged arrow   as you can see right here so this is the normal  arrow if you want to resize it it's a normal   two-sided arrows but if we want to if we're  going to scale for you to know that you are   scale there's like four arrows like two on each  side so that means that you are um enabling the   scale option so right there scaling it lower  and bigger it's just basically a proportion   right there so if you want to go back just press  v and right here as you can see your move cursor   so next is our so i'm going to delete this  if you want to delete anything just press the   object and press backspace or delete so next  one is our frame tool so frame is like the   most one of the most common elements used to  create an app design so frame and frame is like   here so if you click on frame you'll basically  you'll have a lot of presets frame presets on   the right side so you have like the phone  tablet desktop and all those things so   basically what these means that these things are  the dimension of the screen size of each device   so if you click on like frame oh sorry if you  click on frame and click on iphone 13 pro max   then basically you have a frame like or like an  artboard or a canvas the size of the iphone 13 pro   max so this is like the exact um screen dimensions  of that device particular device and for the slice   tool this is one of the most like one of the  lesser known or lesser used tools in figma so   i don't think you need to worry about this i i  don't think i've ever used it before as well so   no need to worry about this as well so next one is  the shapes the shapes are here the shapes are like   the building blocks of the user interfaces like  apps are built around shapes like um rectangles   which are basically your buttons your menu  icons or something like that basically   they are shapes that were like modified to make  it look like an icon or something like that but   that's something that's quite advanced  so don't worry about that right now   the main purpose of shapes like i mentioned is  like they help you create the building blocks of   user interface like buttons icons and all those  things and basically sections like on top section   or a menu section right here so let's change the  color and something like that just a little accent   on your app design so we'll dive into the details  later on but basically that's how shapes work   so shapes you can they have a variety of shapes  to a shape if that makes sense or a polygon so you   have the option to create a line so if you press  line or press the l and you like drag it anywhere   you'll form a line right there so if you let go  you'll now you have a line so if you want if so   you don't need to worry about creating um straight  line because if you created it something like this   you can always just set the angle to zero so now  you have a straight line so if you want it to be   like vertical you can just change it to 90 and  you're done so let's delete that and then you   have an ellipse which is basically a circle and an  arrow that arrow like hit like this is basically   a line with an arrow on the on the edge  which is basically self-explanatory again   so again polygon so this one you can customize  the size of this um shape so we here we have our   yeah over here we have like three sides or three  corners so if you want it to be four now you   have a diamond five pentagon all those things  so basically it's very customizable so if you   want a custom shape just go to the polygon tool  and start self-explanatory and place image oops place image is basically a way for  you to import images in your canvas   so i usually don't open this drop down and place  an image what i do is just you can just drag and   drop from your desktop to your figma canvas you  can drag and drop items there or you can also do   a command shift k like like like that and it you  can easily import images from there so pen tool   is pencil is basically it kind of requires like  immediate experience or a bit of experience in   figma because even i am not well versed with the  pen tool so basically this is your way to draw   so to draw things like um for example like this or  basically like blobs basically those elements like   to that add some styles in your design so  that's how pen tool works and yeah it kind   of requires a little bit of experience for  you to like get familiar with the pen tool   but with the app that or with this practice  video um we won't be diving into so much about   the around the pen tool so we'll be mostly using  the shape so no need to worry about that for now   a pencil pencil is basically a way for you to  like if you want to draw like arrows like that   basically um you can do that so pencil tool is  something that is also not used as much if you are   going to design an app screen or an app ui so you  won't be using the pen tool or the pencil tools   as much as the shapes so no need to worry about  these things as well but yeah it pays to know   how these things work so the text tool again  here text and you can type the quick brown fox   just like that so you can click  on text or just shortcut key t   and just type in like that and yeah so the hand  tool is basically lets you move around the canvas   as well so it's just like the move tool but the  hand tool is basically lets you move around like   this so if you have like multiple designs this is  a good way for you to navigate to those on designs   so you can also the shortcut for the hand tool is  h so let's cancel that so h hand tool or you can   also press space or hold space and while you're  holding that you can like just move around so this   is my approach to the hand tool because it's also  the same approach with other design tools as well   yeah so this one comments basically  for collaboration features if you want   to comment here just click on the comment  or c hotkey c and type in this looks good and there you go and you now have generated  a comment in the design and basically anyone   who is invited to this file will be able  to preview your comment just like that   let's delete this or basically um resolve and here  are just your profile share if you want to share   your file to other people and then you play if you  want to preview this as a prototype so here is the   play like this is what it would look like in an  actual device your your app design here is your   basically your zoom on settings uh if this is like  a 50 zoom and all those things so on your right on   your left side rather you have your layers and  assault assets panel so layers are basically   how your objects are stacked on top of each other  so if you have here the rectangle you have the   rectangle one if you are going to copy and paste  or if you're going to duplicate this so ctrl   c and control v now you have rectangle two  so rectangle two is basically on top of   rectangle one so that's how layers work so  you're like a very beginner knowledge here   so if you want to like change the color of that  just to emphasize on how these layers work so here   um underneath this um rectangle two is rectangle  one so that's how layers work so as you practice   more you'll get the hang of things but yeah  this is how layers work so if we group them they are basically combined as one layer so it but  yeah this the group the group itself is one layer   but underneath that group is the rectangle  one rectangle two which are still on like   in different layers so if that makes sense um i  hope it does all right so page basically if you   have like multiple files like for example page  two so for page one for example this can be your   ideas and this page two can be your design so if  you want to like stay organized the page one can   be ideas page two will be your actual design  or you can just put both ideas and the designs   in one page there's also uh there's nothing wrong  with that and for the assets these are stuff from   like components so if you're a beginner like me  when i started out i never i almost never like   access this pat assets panel because these  are like most of the time um components like   were housed in this panel and like any other  assets like i think images i can't remember but   mostly these are like for images icons basically  components stuff that that really doesn't concern   on most beginners especially me when i was  starting out when i was just practicing figma i   was more concerned about utilizing the bare bones  um functionality of figma which is designing the   designing an app and basically get things done  so assets for now you don't need to worry about   these things so let's delete this so next on  your right is your design prototype and inspect   panel so design is basically for example let's  create an object again like a shape rectangle   so when you click on this the design panel will  give you a lot of options so here is your x   y position so 84 basically means that they are 84  points on the x axis so if you place that to zero   then it will like be placed on the zero the x-axis  of the frame that it's in so right now because   it's inside this frame right here if you click  on zero um basically it will be placed on the   very edge of that frame which is this iphone frame  so the same goes for if we put zero on the y axis   it will go to the very top just like that so  that's how x and y axis work in sigma and this   is basically width and the height of the shape or  the rectangle so if we customize this right here   so if you hover over this w letter you'll see the  like the double edged arrow and if you drag it   just you can just like customize the width  of the shape and same goes for the height   you can just like customize it just like that or  you can just input a number whichever you want   and here is like your proportion setting  or constraint proportion if you want to   scale the object just as like what we did earlier  so this is also another way so if you want to   scale it proportionately click on constrain  proportions once this is enabled whenever you   like customize the numbers in here like for  example if we customize the make this 200   basically adding another 100 in the height  then the width will also have like like   double so basically we we made the height  doubled so the width was also doubled in   the in value so if we make the height again of  this like double it double the height to 400   then the width will also be doubled to 600 and all  those things so that's how constrained proportions   work so basically it mostly concerns um adjusting  whenever you adjust the settings right here so   here the angle the corner radius if you  want to adjust the corner radius make   this a rounded rectangle this is where you'll  do it so corner radius just drag it like that   so the bigger the object the more corner  radius you'll need if you want it to look   like a rounded rectangle so if this is  like a 50 in height let's set this to zero   so if this is 50 in height if it's just  a small object a corner radius of maybe   20 is good enough to make it look like a rounded  rectangle or even like eight yeah just like that   um we now have like a corner radius set  to eight and it look it already looks like   a rounded rectangle so here constraints on  constraints is basically where your i would   like to interpret this as a way where your where  the object attaches itself to like for example   um the object rectangle one is inside this iphone  13 frame right so if our cons if our constraints   are set to left and top whenever we resize this  um frame then the object itself will remain at   the left and will basically attach itself to  the left and the top um sides of the frame   so if we change the so if we change the size of  this frame on the right side then it won't move   at all even if we change it to the bottom it won't  move at all but whenever we change it to the left   as you can see right now it's it is attaching  itself to the left side of the frame i hope that   makes sense um so yeah um right here and goes to  the top it it's basically attached to the left and   the top part so yeah that's how those things  works that's how i'd like to interpret things   um scale for now for scale if we want  to like change this size so something   like that then basically it will follow  the scale of that frame that it's in okay so next one is a fixed position when  scrolling this basically an interaction   feature you don't need to worry about this  these are blending modes so also if you don't   this is quite also like a little bit of familiar  knowledge with blending types but for now we don't   need to worry about these things blending modes  transparency of the object so set to 50 those   things and then these are the color options so  i've been using this a while ago so by now you've   probably been familiar with how these things  work so just select the object and the fill   and right here you can change the color to  whatever you want and then you also you can also   enable like linear gradients um radial gradients  and all those types of gradients or you can also   add an image and upload an image just like that  that's also possible and then stroke is basically   allows you to add a border or a stroke  around your object or any kind of object   so here basically where your stroke is positioned  in so if it's center inside or outside that frame   and the effects is basically your drop  shadows so these are some things that   you can play around with as you gain more um  familiarity with the design tool or design   approaches so but for now we don't need to worry  about this thing so export is basically if you   want to export your file and upload it to  a website or something or a social media   you can just basically export this export to  jpeg now you'll have an image of your app design   so that's the figma user interface all right so  now that we know the basic functions of each tool   in the user interface let's try to create a simple  app design using what we've learned so far so   we'll be redesigning a symbol to do this app that  i found here so this is an app called tictic so   this is an existing app and it's one of the most  or not really one of the most but a more popular   um to-do list apps out there so some youtubers  out there are using tiktek because it's a very   simple to do this app right here as you can see  um so we'll be copying or redesigning this app   from scratch so let's just copy this image  so right click copy image and just paste it   here so now we have that one now we have an  image as our reference so let's delete this   frame oops it's frame so let's click on the frame  door or press f and select um iphone 13 pro max   or iphone 13. um i guess i'll just  move forward with iphone 13 from here   we'll let's just crop this image first because um  i'm a bit distracted with this um second device   image on the background so to crop this you can  just hold command if you're on a mac hold command   um or control then just drag it like that  and now you're just basically cropping the   image so let's just focus on this user interface  because this is the ui that will be redesigned   or re-engineer from scratch so here as you can  see we have the hamburger icon the today basically   the title of the screen or view and then the more  settings that today are basically a list of tasks   to do and then a plus icon and be another set of  icons in the tab bar or basically we don't have   to represent all of these accurately but if you  want to learn how to come up with these things   just continue watching the video all right  so now that we have this let's just redesign   all right so first things first uh we have our  um status bar right here so if we want to have   a status bar like this one you can just google  ios 15 you or 15 ui kit on figma and as you can   see right here you have the ios 15 ukra figma  the first thing the first on the search results   and once you arrive in this page you can duplicate  this so i already have this in our um on my figma   file so once you have this so let's verify so  let's say for example we want to duplicate this   so here let's find the let's go to  components and find the status bar oh it's here um after looking for the status bar component just  double click on here make sure to keep on double   clicking until this item is selected  so as you can see here the rectangle   piece we have the whole of the status bar so just  copy command c so i'm using a mac so i'm using   like mac terminologies here but if you are  using on if you are using windows you can   substitute command for control or if you're um for  option you can substitute option for alt so here   command c and command v here and there you go  now we have basically you can copy and paste   in between files so that's also one of the good  things about figma so here from here we can just   right click and detach instance because basically  it came from a separate file and we don't want   to mess things up here just drag it on the top or  basically if you want it to be exactly at the top   just make sure both items are zero and then we  make sure to check fixed position when scrolling make sure that it's always on the top layer so  everything that's fixed in fixed position is   always on the top layer so for example if you  duplicate this if you put this here as you can   see it's displaying underneath that fixed layer so  okay enough segway uh let's move forward with the   next item is the um hamburger icon the today and  this another icon right here so another thing here   for if you want to have like icons  or illustrations basically anything   you can just rely on plugins or you you can  create them on your own so if you want to   create them on your own you can just create  different lines of like different rectangles   and their smallest possible size until you get  the right size or the easy way is to go to plugins   and look for icons eight so icons eight is our  icons plugin of choice because it basically   houses a lot of plugins and different styles so  it's in bubbles cloud and ios it's in material   yeah it's in google's material  design language it's also in   office like microsoft office language basically  all those things but we are sticking with ios   because we are designing this as an ios app  for example so ios glyph click on azure glyph   and just type in menu and now you have like a  menu and it's free so if you have an icons 8   account and if you're using an icons 8 account  for free basically if you are on a free account   you'll just use this as a png so png is  basically an image and you won't be able to   customize them like their colors and if you scale  them up and down there's maybe there may be some   compromises when in terms of the quality but  if you just want to practice there's nothing   wrong with using png here let's resize this so  if you want to resize and be more precise with   our measurements click on make sure to click on  these constraints proportions and click on 24   because that's the typical size for icons so  just put it here and then let's type in today   text tool today type in that and then let's  change the font to bold and that's good   so you don't need to worry about which font  to use by default i think figma is using   enter so there's nothing wrong with enter it's  a very um web friendly and ios friendly font so   it also is a bit similar to ios default font so  the default font that you're seeing on your iphone   it's quite similar to enter so there's nothing  wrong with that so next one is the settings icon   or maybe more icon something like that let's  say type in more so right here you can see more   and there you go again this is a png file as  you can see here the icon is image so it's   not a vector or an svg file so svg is basically  is most preferred because it lets you customize   and scale images without losing its quality so  as you can see right here there's some pixelation   that's going on but again we're just practicing  so there's nothing wrong with this so again   make sure it's selected change just and there  you go so if you want to make sure that they are   aligned you can just drag the arrow just like that  and then make sure that they are aligned vertical   center and there you have it so the bigger  approach when it comes to like grouping this items   like in one row is to like right click and group  that's how i did things before but if you want to   have a little bit more advantage as a beginner the  right thing to do is to use right click and add   auto layout so the shortcut for this is shift a so  this is one of the most valued features in figma   suppress shift a because it will let you change  the position of elements whenever you're in auto   layout mode it allows you to change the position  of the elements responsibly and you don't need   to worry about the spacing in between them the  margins between them and all those things because   basically it's auto layout the figma itself  will automatically arrange this stuff for you   so to note that if you're an auto layout  you'll see this icon right here like a three   three lines so basically they are stacked  um from left to right something like that   so from here we will just change the padding  to 16. basically padding is basically the space   inside the frame so it's like the padding so it's  like a margin but inside the frame so let's say   name this as header so this is the header there  are 16 margins as you can see so if we hover over   this frame auto layout frame you can see there's  like um overlay of red lights so as you can see   and if you drag and you keep on hovering it'll  show up like a 16 value basically this is the 16   pixels of worth of space from the edge  of the frame so that's how padding works   so let's just align this to the leftmost side of  the frame just like that and we can also create   if you click on this independent paddings we can  create separate padding sizes or thickness to each   side so the top padding can be 64. if it's too  much you can just make it 24 or 32 something like   that and the bottom padding here at the bottom  of this frame can be 16 again and if we drag it and let it snap to this just below this um  status bar and we need to resize this because   as you can see it's not utilizing all of the  space on the right so let's just make sure   that it will snap on the right and from here  go to this um advanced auto layout settings   click on spacing mode space between and just  like that it will automatically utilize all of   the available space all the available space with  the auto layout tool so i think we're doing okay   we can adjust the settings just like that again  so basically from this um the padding is evenly   distributed across all sides so 16 on top  bottom left and right so next one is today   check emails discuss marketing when etc etc so  from here let's just create that today and let's   adjust the size of this to maybe 14 so it  should be a little bit smaller than this one   so let's change this to medium or semi-bold  that works and then let's type in four   and then let's type in or let's go to the  plugins again and then go to the icons 8.   so if you've opened icons 8 before let's close  this so if since we've opened icons 8 before   the shortcut to open it again is command alt  b if you're in windows the shortcut is ctrl um   alt p if you're on mac control the shortcut  is command option p rather command option p   it opens up the icons 8. so basically that  shortcut opens up the most recent plugin that   you opened or used so moving forward let's just  put it here um chevron basically this download   arrow is called the chevron so this chevrons will  be displayed in different orientations uh like app   chevron downgrade all those things all right  so again it's in png let's change this to 24.   don't forget to constrain proportions there  you go let's put it beside here maybe 16 or 20.   yeah keep it 16 then from here let's select  them both like just drag it just like this and   then press shift a convert them to auto layout and  let's adjust the space in between these two items   so the space between the four and the chevron  let's make it maybe four or eight give them enough   space and then from here we'll select this one and  this one and two so you can just drag them just   like that then press shift a again and there  you go let's edit the padding our padding by   default should be 16 because that's what um we've  set under above so we want it to be consistent   so here let's drag it just like that and adjust  the oops let's close oh let's just move it around   go to the advanced layout settings spacing  mode to space between there you have it so that's our today like subheading   and then below that is our task items so our  task items are comprised of like a square   a task and the time itself so let's see um the  square oops square so let's make this 40 as   well make sure that they are proportioned and add  the stroke just like that and let's make it blue yeah i think that's good or maybe a little bit  darker and here you can see the there's a fill   color so the main color is gray so we want  to remove that or disable that so you can   either turn this off or remove it altogether  either way and then let's resize this to 24   there you go and we can adjust the thickness  of this stroke by two to emphasize on that   and yeah i think that's good the  corner radius can be i guess two   yeah all right so we have the checked box and the  task just type in check emails and then the time   so 18 o'clock and then the  icon there's an icon like clock right here i guess this one how the time should be so select them both or um  since we can't change the color of this icon so   if we are using svg we can definitely change the  color of this to something gray but since we we   are using png or an image file we can just set it  to like 20 or 10 and this one you can just apply   the fill and use this eyedropper tool this will  basically adapt the color that this one has so   if we hover over this alarm clock icon basically  you'll see the time in the same color as this one   so select them both or maybe let's resize this  first in 24 or 16. then the 18 can be i think it's   too light so let's adjust this just like that 18  and this one you can make it like 20. there you go so 18 so select them both and then pressed shift  a now as you can see this one are stacked on on   top of each other they're not side to side so  what we're going to do is just to click click on   this frame and then this one make sure to click  vertical direction and just like that and make   sure to this one make sure that they are top right  aligned not center so that's the difference if we   click on this oops that's the difference and  then adjust the spacing to zero now we have it   so we can make this smaller a bit more smaller  to 12. and then select them both and shift eight   and then maybe eight this  one can be a bit more smaller   check emails 18 o'clock so from here we can just  select them all so we have the first frame the   check box and the task item and then the time  so select them both and press shift a again   now we have another layout frame and we need  to first change to alignment to left aligned   and then change the spacing oops i'll  change the padding to and then a guest 8 and then spacing mode should be spaced between now let's drag this just like that all right we have today check emails so we want to  have multiple tasks right so in order to do that   we only need what we need to do is just select  this one and press command d or control d and just   drag it here you can see so let's redo that part  again task item one will be duplicated command d   now we have task item two so we just need  to drag it below make sure that it's below   and just like that until it will snap you will  feel it whenever you're um changing its position   so let's adjust the top and bottom padding  to maybe four same goes for this one four and   just drag it just like that oops all right  so once they're snapped duplicate them again   and it will snap duplicate it and once you've set  that position you can just keep on duplicating   things and basically um change this to like  this cost marketing plan morning meeting branding campaign and whatever else tasks that you  want to do so we want to keep this um   same as this one here we go so now we have  basically basically have these things already   so but as you can see let's close this as you  can see this tasks are grouped together right   they are in this like white group of frame or  shape so in order to do that we just first need   to we should have done this earlier by the way  but we forgot so what we're going to do is just   change this make sure to click on the iphone 13  pro or iphone 13 frame this is our top level frame   click on the fill and change the color to  something like um something off white maybe   blue and then change it to a little  bit whiter but not pure white   so yeah i guess that works and then we are going  to select all of these things so these frame this   check emails this this cost marketing plan this  task basically you will select them all and as   you can see by the way this one frame 2 is showing  up and the reason for this is because frame 2 is   not inside the iphone 13 frame so i should have  us seen this earlier so in order to fix this you   just need to put it down just like that it's no  longer showing up and basically they're all part   of the iphone directing frame they're basically  inside this frame so next one is again going back   just select them all and press shift a and just  like that we now have this group of tasks so   we just need to change the color of this frame  so task section let's rename this section as task   section then we have our layout grid or rather the  fill and as you can see we now have it in filled   pure white so it's kind of it's kind of separated  to the background so let's just adjust the some   um settings here so let's click on  the today frame like the day frame um let's set the padding to maybe eight there you go and let's also change  the top and bottom padding of this   task items to two so they are usually so we set  them earlier as four so let's just change them all   so double click on each of them and so in cases  like this you may want to not just drag to select   all of them so you can also hold shift so while  holding shift you can select multiple items just   basically for selecting multiple stuff so  apart from like dragging things selecting   multiple items there's also a good way to do that  so just change this to four and there you have it   now from here we will set the bottom padding  to something like 16 or 8 something like that   and then from here we will press shift a again  so that's so much all the layout but you'll   in a few seconds you'll understand why so  press shift again now we have like a frame   basically this slightly container it's basically a  frame within a frame or a frame outside the frame   so as you can see it it's already overlapping  the iphone 13 frame so we just need to do this   and then this one then adjust the padding to 16.  basically it snaps hug contents oops this one   so this one now the task section we need to select  fill container basically it will wrap inside that   frame but at the same time respecting the spaces  that we've set a while ago so this one again let's   select them each task item let's select each tax  item the full container as well and just like that   for the today as well let's select  make sure that today frame is selected   check fill container and there you have it   so as you can see this is the beauty of other  layout so even if you're still a beginner um   teaching you these things will basically unlock  a lot of possibilities for you when designing   a figma so understanding the auto layout this  early in this stage is a very useful technique   let's just design an icon or a button so you'll  know how to design one as well so let's press   o this will open up our ellipse tool and while  you open up the ellipse also press o again   hold shift and then drag it drag the circle just  like this until your desired size so i want it   to be a bit like 64. or maybe 62 just changes  here 64. and then put it here and then what   we're going to do is to click on the eye dropper  tool from the color settings and hover it over   this button and now we have the blue button right  there now next thing to do is just type in plus and then what we're going to do is to right  click and flatten this object or text what will   what this will do is that it'll convert the  text into a vector shape which we can now scale   accordingly just like that and change the color  of it to something like blue or white or black   basically a vector image now or vector  illustration or vector object so if   we put this together here and change the  color to white that's basically our button   so let's change it with that and now you  have the plus icon now here we can just   group we can either group or frame but  for me i'll choose the frame selection   and then i'll make sure that this is constrained  proportions and now we have it and then next thing   to do is to check on the effects and drop  shadow and let's just make sure to lessen   the transparency of this shadow to ten percent  now you have like a floating button right here   um let's change the color to something like blue  as well and then let's reduce the opacity of this   on this one let's reduce its opacity to something  like that so it's like a floating blue button next one is um if you want to change the  background color of your canvas by the way   just click on the background here  change the color to something like   black um whichever you prefer so let's just  put it in something like this grey so we can   better emphasize on the screen that we're  designing and then put it at the bottom so   from the last part we just need to um  get this icons i think these are the   check box calendar focus timer settings let's just  you know what let's just select four so maybe i   don't know what this is maybe it's a unique  icon or something so let's just find checked this checkbox all right so now we have the four icons let's  just resize them all select them all and then   constrain proportions then 24 or 32 and then  from here let's just align them together   but we have the on tasks the calendar the timer  and the settings so these things are like i think   they are custom icons that were made exactly  for the app so we don't have like um i think   i don't think we can replicate these things  so let's just select them all press shift a   let's drag it here and then maybe adjust  the opacity to 20 or rather let's don't   do that make sure to select all of them  so here select all of them in this layer   you can also select them via the layers panel  while holding shift and then press 20 percent and then since we have our um auto  layout this is like tab bar let's just resize this and make it snap to the sides and  just like that and adjust the spacing make it   space between or maybe um packed in the middle  and then adjust the spacing manually or 40 eight   something like that i think that's good maybe  54. yeah i think that's good and then from here   we can set the bottom padding or rather this  um left and right padding to 16 and the bottom   padding to 32 i guess and 16 here so the reason  for this is because we still need to put the   home gesture button so i don't i'm not exactly  sure what's that what that's called so yeah   we don't need to worry about having the blue icon  basically um you can just do it on your own like   this and like a rectangle and duplicate it and  just like that make a check mark or something we have a check mark it's not  perfect but that i think this will do so select them both and command e or flatten  and just drag it here and then this one   will make it blue um make sure  the eyedropper tool is selected   and make it in the same color as  this one so this one will be in white and white select the white and  then resize this to maybe 16 resize this to maybe 24. and yeah also this one let's put this to scale and  scale so this one i think the better way to do it   is to create a frame just like this one select  a frame tool the fill will be in the same color   as this one so let's delete this and then this one  will be inside this frame and now you have like um   a check mark um icon so the size of this is 32 so  let's just make sure to change this so 32 by the   way if you want to customize the size of this  um frame without affecting the elements inside   you should hold control or command hold command  and resize this on side to side so 32 and 32 there you have it and change the corner  radius to maybe eight or four or three   yeah oops change this to four and  there you have it so let's drag it here change this to 28 i guess or 24 yeah  that's better change the coordinates to two   and let's change this and remove  this now we have our task item   and there you have it so one last thing let's  move back to the ios 15 ui kit file and then   let's find the gesture button or the home  button i think it's here somewhere oh it's here   so here just double click double click again and  then copy and then paste so before we do anything   just make sure that it's inside this frame  so by default copy and pasting items won't   automatically be redirected inside this frame  so you just make sure to drag it over and then   this will highlight the page and then what  we'll do is to align bottom and align center   and basically i think we can adjust it make it  snap to the sides and there you go we now have   our home indicator so we can detach this instance  and circuit again and fix position now we have   our two simple to-do list app that we designed  and figma so it took quite a while but again   it's it's very simple it will take some time  um if you're a complete beginner it will take   some time to get used to but just keep on  redesigning things and you'll be good to go   so if we present this click on the present  and then here you go there you have our app   design that we designed on figma again if you're  a complete beginner the best way to practice is to   redesign apps it's just like learning how to play  guitar like you learn by playing existing songs   once you know your way around the tool you can be  more confident and write and play your own song   the same goes for design and development  by re-engineering existing works   we can learn from how such designs were achieved  alright so that's it for our step-by-step guide   to designing with sigma in 2022 i hope you  learned a lot from this video let us know in   the comments if you have any questions until  then see you and good luck with your design

Channel: CodeWithChris

Views: 116,485

Keywords: How to Make an App, How to Create an App, How Build a Mobile App, Xcode, Swift, iOS, Coding, Programming, iOS Development, Figma, Figma Tutorial

Id: VRf8cyeuxoo

Length: 54min 50sec (3290 seconds)

Published: Mon Jul 18 2022