Figma Shoe Ordering Mobile App Design (Figma Mobile Design 2020)

what's up guys and welcome to my channel building amazing things today's video we're going to be building a shoe ordering app with figma i'll share with you some tips and tools i use in creating designs make sure you watch to the end of this video so if you're new to this channel kindly hit on the subscribe button and the notification bell so you get notified once i create a new video before i get started thank you my subscribers now i have about 450 subscribers that's not much anyways you could support my channel by sharing commenting liking and watching my videos to the end thank you because i know you will so guys i'm going to share you one tip right now in this section and that tip is looking for inspiration from the internet before i make any design i go to the internet to look for inspiration and one of the best place I go to is dribbles you can look at dribbles they are wonderful ui designs you can pick out from dribbles and look at what they are doing I also look at Pinterest, Pinterest is also an interesting place but I got to find out about Instagram you can follow some hashtag on Instagram and one of them is ui trends which have over 294 000 posts so i got this design inspiration of this shoe app design from Instagram you can follow me up on Instagram I'm active on Instagram @hyginusukeh so follow me up there on Instagram so guys let's talk about the tool we're going to use for this design we're going to use Figma there are so many benefits of using Figma 1. it is a free tool 2. you can work with it on the browser 3. You can also work with it as a desktop application and one of the interesting thing about this Figma you can use it to do your prototyping you can also use it to work as a team if you have various people working as a team so you guys can collaborate and work together as a team so you can use other tools like you can use photoshop you can use Coreldraw you can use XD and the rest of that but in this tutorial, we're using Figma for this design so guys in your design you need some resources and one of those resources is images you need high quality images for your design that will make your designs to stand out so looking at this folder now i've downloaded four couple of images the black shoe nike the blue the red and the white nike shoes so i'm going to use these images but i got these images from the internet and i have removed the background of these images i'm going to show you in a couple of seconds how to do this so I go to unsplash.com, unsplash.com is a free platform where you can download good quality images with no copyright attached to them so these images are free you can download it and use it in what design you're doing either web design mobile app design and the rest of that so I also did a video on Figma on how to remove the background of images you can go check out the link below in the description also there's an online tool you can use to remove background images is pretty fast i use that online tool for this design so and the online tool is remove.bg you can simply just upload the images and it removes the background like magic so now I've opened my Figma environment if you're new to Figma I know this would look strange to you but I'm doing a course on Figma that course should be a crash course on Figma where you get to learn the basics so, for now, you're just going to look at what I'm doing and learn from what I'm doing um it's not going to be easy to pick up now if you're new to figma but remember i'm working on a crash course so you can also check out my crash course uh i hope that crash course will come out soon so now um on my figma environment if you're already used to figma you can um understand this environment very well so what i would do initially is um i'm going to tell you how this app is going to look like i'm going to basically just do two screen the first screen is where you get to see the available shoes from the nike store then the other screen is where you get to see the details of the particular shoe before you add that shoe to the cart so um basically that's the two screen I'm going to do for this video the idea is for you to learn um some basic skills and some basic um tools and tips which i'm going to bring out to you and which i'm going to show you and one of them is mixing color and one of them is also um playing around with shapes and bringing out different types of design so for now we are going to dive into the design aspect of this application i know you are excited so let's get started so the first thing i'm going to do is to click on my frame tool now if i select the frame too i'm going to decide which screen size i'm going to design this app for and i'm going to use iphone 11 pro x that's what i want to use for the design so i'll rename this um frame to let's say the products this should be the product screen where you get to see the different products so um i want the edges of these um products to be curved this product screen to be curved so i can go to corner radius and make it to be 30 and I have a curve corner radius so the next thing I'll need to do is I'll select my text tool and add a text and do some basic configuration of the text so I like using Poppins then um let's say the font size should be medium and um let's reduce the size down to let's say 24 and we'll write some basic text let's say our Nike um shoe store next thing I'm going to do is uh add a grid um a layer grid to this frame that will help me to align my contents like this text now i need to align the the text properly on this frame so i need to set my layer grid so i just click on this plus icon here and click on this box and select um columns usually websites are six so um 12 i use six for my mobile app design and i use margin of 30 so that way i can look at what the grid is and align this content very very well on this frame so now what i'm going to do is to select this nike and align it down to the spot and i make sure it's matching with this line of my grid line so i can turn off the gridline by clicking on this eye tool and it gets off my design so next thing i want to do is um i want to add a hamburger that maybe shows other options of the app so what i would do is to select my pen tool and i'm going to carefully zoom in here and click here and click hold my shift on the um on the keyboard and click also so when i'm done click on the escape so i have this i click on done i have this so i'm going to duplicate this um in three places and um if you check the the alignments they're not properly aligned so i have some alignment tools here that can help us to align this properly so i'm going to select this three um content and select distribute vertical spacing that way to align the spaces between them to be equal then um also i'm going to set this to be center so when i click on center everything looks aligned well and i'm going to increase the stroke to 2 and i have my stroke em my hamburger icon ready here so i can use my command G or ctrl G whatever you're using mac or windows to group this content next i need a search bar where i can search for tools for shoes sorry and uh i'm going to click on the box that all the rectangle to and make something like this then i'm going to add some corner reduce let's say um we're going to add 10 and then i'm going to increase this a little bit then um one thing you want to do is to reduce the opacity of this color so click on fill and reduce the opacity and just get something similar to this okay that's fine so um i'm going to crease this a little bit and that's fine so i need some icons i can go ahead and start designing the icons but it's going to take me a lot of time so one great tip i'm going to give out here is get your icons out of the box so what i do is i go to plugins i install a plugin for that and in my previous video i've shown how to install plugins but no worries i'm still going to show you how to do that so to install a plugin just right click and go to plugins then go to manage plugins so when you get to manage plugins here you can see the plugins i've installed before now so you can just click on these plugins here and you can search any plugin you want to install and then install the plugin plugin gives you extra functionality to Figma so i'm going to close that and i'll just right click and go to plugins i've installed this plugin so you can see here so i'm going to select um unless a feather icon feather icon is a good um icon set so i will wait for it to get opened depending on the internet how fast it's going to be so good my failure icon is open so i need a search icon so i just search and uh i'll click on this and this is my search icon so what i'll do is to bring this search frame into my product frame and i'm going to take this down to this point and um i'll reduce the size this is 24 well what i'm going to do is um i'll click on constraint proportions and reduce it 22 that way the width is also reducing so i can make it 20 okay 20 is nice i can set it down here and i can reduce the opacity as well and let me close my feeder icon i can reduce the opacity down this way and that's okay now next thing i want to do is i want to show cuts of um the shoe so what i'm i'm going to do is to add a rectangle again select a rectangle for the cuts um i'll add a corner radius let's say at a corner reduce of 20 and this is fine so um i'm going to pick i'm going to pick one of the shoes and let's try it so i'll go to my shoes these are the very shoes i've um downloaded so i'm going to pick the blue shoe in and let's look at the blue shoe so um i want to pick a color from this blue shoe so on one great tips here is you can pick colors from your images that way you don't have your images looking different color and your app looking different color so i'll just click on the fill here and click on the eye to here and click on this image and i have this color from the shoe and um i think i need to reduce the opacity of this color and i'm going to reduce it this way that's fine and i can add um i can make it a linear color that way i have two sets of color then i can rotate this color this way or i choose to make it ready or you choose to make it anything you want to set it to so but i'm choosing to make it radiant and i'm taking this part to this edge and taking this part this way then i'm bringing back the opacity of this back to 100 then i'm making it a change on this color so that i have a little touch of white at the middle if i increase it more you can see the white so i'm reducing it a little bit so i have a little touch of white on the background there so that's fine now so what next i want to do is um i'm going to duplicate this and i'll duplicate it by holding my art and um reduce the height so what i'll do now is i'll turn on my grid so that i can see what i have so i'm going to do this this way and bring this this way do some basic alignments so that it matches to my grid line so that's fine so i can choose um different colors let me set this also to match with the grid line and this is fine so i can turn off the grid line then i can change the color of this right to different colors so i can click here and i can swap between different colors so that's it so i'm going to swap a little bit this way to get this so i'll copy this color code and go to the next color and paste the color code here and i'm going to reduce it to have like a white in it a little bit of white and this is nice so what next i'm going to do this search i'm going to add a text that described that that's a search button so i have my search then um i also reduce the opacity of the search down and also reduce the size to let's say 18 and i'll bring it here so one thing i want to do is to group everything i have here i can set this to this height and set it to this height that way i can use align center to make sure that it's center and i can select these two and also use my alignment to make a center and i can select with the textbox and use my command j or ctrl g to group so i have that grouped then um next thing i want to do is um let me get in another shoe so let me get in the black shoe into this design and i'm going to take the black shoe to this point so what i'm going to do is to reduce this black shoe and this is too much okay and i think this is fine so i have this black shoe this way so this is one of the cut and this image i wanted to be behind on behind um detect behind everything so i'm going to bring the text box down the frame sorry the return go down and bring the image above the rectangle so now i'm going to give some description of this um of this um of this card for this particular item so what i'm going to do is add a text so i'm going to click on the text and um give you the text description this should be for the black nike shoe so i'm going to make this to be bold semi boot and i'm going to reduce the size to lex 18 now drag it to this point and that's fine i'm also going to reduce the opacity a little bit and this is okay so next i'll need to do is um let me bring down this image a little bit down then um this more descriptions i can duplicate um this text this black text i can duplicate it down to give another description and um this show is for a peer so i can rename add a text i can change the text to appear this time around i'm going to reduce the opacity um very wall or i rather change the color to gray and i'll reduce the font size to let's say 12. so i think grey is not that interesting so i'm going to take it down to black black then reduce the opacity okay that's fine so um you can zoom in and this um card is two cuffed so i'll reduce it to 15 and also do the same yeah so next thing i want to do is um i'll do that for um the price so i'm going to select this black and i'm going to duplicate it downward here then let's say the price for the price for this black nike is um let's say the price is 220 dollars so i'm going to reduce the size to 14 then reduce the zeros down to 12. let's also make it 11 just a kind of design then um i'm going to do some basic i join adjustment to this point i think that is fine so you can see as i'm working this image is disturbing me so i can click on the lock icon here so i don't get to select the image anytime again so i just have to select either the box or my text so anytime i need to do the adjustment i unlock the image so this text i need to bring it down a little bit this way and unlock the image so i can work with the image and lock it back so the next thing i need to do now is um i need to show that this is something you can select so i'll definitely add maybe a an icon here so you can select it so what i'll do is i'll select my shape select my circle or eclipse and i'll set the item width to 30 and then i'll set the color to white and i'm also reducing opacity a little bit then using my plugin i can right click and go to plugin and go to feta icons then i can look for a box like this is a nice check post that means you want to select this and add it to cut so i'm going to click on it and drag it into the products then drag it in to the cycle so i'm going to reduce this a little bit this way and let's make it 18 by 18 then the color for this i'm going to select this color right so close this and um instead of black for the color i'm going to select this and make it more darker so that it stands out it comes out so i'm going to do some basic alignment and i have this so um next thing uh there should be a navigation icon here that will take you back so i'm going to add um a box this way this will actually take you back so i'm going to look at the height of this diet is around 18. i'm going to make this um let's say 18 by 18 well that's not that's not good so i'll increase it a little bit and increase the width a little bit so i'm going to pick the color from this color and i'll use my paint to to do something to show that this is actually a navigation brow so i'm going to set the color to the line size to be true and um if you look at it and the edges are square so i'll need to format that so when i click on this and i select round the edges around and you can also change the meeting points that is the joints to also be round as well so that's fine so i can add some corner reduce to this let's say corner of three there's okay i can crease this a little bit and reduce this this way and do some basic alignment so i get what i want okay that's fine so you can click on it and click on the grid layout so you can do your basic alignment to the grid okay fine this one is aligned the night shoe is aligned our search bar is aligned so turn off the grid line so i'm going to do that for the remaining shoes so i'll quickly do that so guys uh i'll simply do some basic alignment like i'll have to select this and bring it down a little bit this way and um this is okay so next thing i need to do is to add our icons at the down um so what i'm going to do right now is to add a rectangle into this frame just right i'll go this way so i'm going to change the fill color of this frame i'm going to make it a little bit gray so as a little bit of gray then i'm going to make this footer icon should be white and i'm going to add a shadow to it i'll click on effects then click on the shadow here i'm making the top four also and i'm making the blueness to be like say 20. so we have a very nice shadow here so let me know what you think about the design so far what do you think how is the design coming along and tell me what you've learned drop a a comment what you've learned so far so what i'm going to do now is to select an eclipse and uh make a circle here and let's say the cycle should be 70 80 by 78 so now you're going to learn the basics of um using what we call the boolean functions in figma so i'm going to select this circle to have this color and this color is okay so i'm going to select the both of them then these are the boolean effects here we have in figma so i'm going to use subtract that way it does remove it and i'm going to add another circle to it remember we used 78 so this time let's try 70 by 17 and let me do some proper alignments and i'm going to pick the color pick back that color okay fine i'm going to take this a little bit up then add some effects by some shadow making shadow 20 20 is too much um 10 10 is okay then the opacity i can reduce the opacity and this is fine so what i'll do is i'll quickly add my icons to this so what i'll do is to right click and go to plugins and go to fader icon so what icons do i need i need the home icon so click on the home icon so i'm taking it into this products and i'll drag it here i will increase the size let's say 30 because this is the home and i'll make the color to the white i want this microphone to be here so make it to the white that's fine so don't know why it's not changing so i just need to close the icon and make it white so okay that's why so what next i'll do the basic alignment and make sure it aligns using the figma line so i need other icons so i need a hat icon so search for hats and that is it so i'll take the hat into the product then drag a hat this way this is okay you can align it a little bit down i need the cut so click the card and drag it to the product and then bring it down here i need this setting i'll click on the setting and drag it into the product drag it down here then i need the graph to show um reports so i'm going to look for icon for the graph and okay here we go so i'm going to use this and bring it into the product and drag it down yeah so i'm going to use my alignment to to my grid line so i'm going to set this to the middle this way and also set this to the middle i think that is in the middle the cut and set the um setting to building the window so i'm going to select the icons then click on align particle center that way all of them are aligned vertically center and i'll drag it down a little bit close my my icon then i click on the frame then remove the crit so great you have this design that's great you can do more you can do some tweaking you can do some alignment so that it will be neat another alignment you can do is selecting this boot and this boot icon and making it align vertical center so and then you can do order like let's change the color of the drop shadow here so i want the color to be this color i think and reduce the opacity and that's fine it's better than the black so you can do other settings here you can as well reduce this to let's say 65 by 65 i think that way to be more better and i'll do some basic alignment too and this is fine this is okay let me know what you think about the design and remember to subscribe if you've not subscribed to this channel please please and please subscribe like hit the notification bell and also please comment that will help me to create more videos on this channel so the next thing i'm going to do now is the next screen and um what i'm going to do is i can simply duplicate this to get this then um i'm going to delete some content i don't need on this basically i don't need all this content i don't need this i don't need this i need a hat i can and uh so the shoe is locked so i'll lock it and i don't need it so what i would do now is um um i'm going to add a rectangle this way i'm sending it i'm going to send the hat to be in front then i'll bring it down up a little bit then i'm going to add um some curve here so i'll click on the edit object and click on this so i'm going to add this a cover 30 that is small 40 and i think that's okay so select this point and also make it 40 or click on done and now add a fill color to the frame and this color i want to add is i'm going to select color from this or from the shoe rather then um i'm going to make this radical and um change the colors this way then um i'm bringing this up a little bit here reducing this then i'm increasing this a little bit okay this is fine so for this color i'm actually bringing back the opacity and bringing this little bit white in it then um i'm duplicating the shoe of the duplicating issue and i'm increasing the shoe using the shoe size something like this this is okay then add the color to this make it white and that's okay then um i need a button and the needed text description so i'm duplicating this text here and i say this text should be like um this should be the blue show right and i'm duplicating the pair of texts this way and this time around i'm saying one pair and i'm increasing the font size lesson 14 and um dragging it this way i still need to increase the lesser 18 and then this is okay so um i need a text description and i need a price so i can take the price from here and uh i can increase the size of this price this size is 24 so i make similar so um make this 24 and this so the color i'm going to pick color from the show or rather reduce the shoe color to 69 opacity the blue shoe 69 it does okay oh that's too much so let me increase it 89 let's say 80 00 80 and also make this 80 for opacity so remember grid line so i'll click on the product and show grid line so this is off our grid line so i'm going to drag it in and also increase that of the decimal values to let's say 13. and let's try 14 okay that's cool then produce it and set this to the line and also this is at the line so i can turn off the grid line now and um i need a text description for the products so i can drag this down a little bit and reduce the font size to let's say 18 then i'll say this should be the product description okay so i need some text of this product so i have a plugin called lorem lorem so if i install that plugin you can have access to it so when you click on the plugin it gives you dummy text so there's text element here so i'm going to add the text element i want the text to take this size so i'll click on auto generate fills the content immediately how pretty nice is this so i'm going to reduce the opacity to less to 40 and reduce the size to let's say 13 i'm going to increase the line height of this and okay this is fine i'll reduce this a little bit so we have our product description and i think this tech at this rectangle that they cover is too much so i'm going to make it 35 and also make this 35 now click on done then um next i need a call to action button which should be i'll add to cuts so i'm going to take this this way and then this is okay so i'm going to add a corner reduce of let's say 10 and 10 is too much so that's seven okay with seven change the fake color to this and i'll reduce this a little bit then i'm going to duplicate this text in here send it to the front then change the description of the text to add to cut then i'm going to change the color of the text to white completely and this opposite of bring it out then i'm going to make it semi bold so it stands out a little bit so i'm going to size this text to the rectangle that way i can align this text at the center and use online middle to get it to the middle so i'm also going to do another rectangle here and i'll remove the fear at the stroke sorry remove the fee add a stroke then a stroke of two and the color of the stroke should be this and i can add a corner reduce like this then i will increase this this way set it to the middle that way the person can be able to select favor um that as the favorite so the fee is white i'm going to change the field down to this sorry the height is hot so i'll just click on that and click on the vector image so that way i can add a feel to it and maybe remove the stroke so i'm going to select the color and select this color and that's okay so i can select this and do some formatting and select the bot and group them and select the text and the rectangle and group them as well then select a bottom of them then use my alignment tool i'm going to use another vertical center to make sure they're aligned properly well then um i'm going to bring this down a little bit in this a little bit and bring the price down this way so going to bring the price the product description if download want to add more you just have one pair you can select multiple um quantity you can select between one or two so i'm going to add something for that so i'm going to select this color this gray color i'm going to add some corner edges so here i'm going to add some text so i'm selecting this folder description text i'm duplicating it and i'm bringing it to the front then um i'm going to change this text to minus in case you want to minus one of the one of these quantities you've added and this should tell how many quantity i've added and the plus to add more so what i'm going to do now is to change this font style i don't like pompe for this so i may look for array array yeah error is fine for this so i'm going to select the three of them and use my alignment too and good so once i'm done with my alignment i'll set it to the middle this make sure i do the proper alignment to be aligned vertical middle online videos so yeah i have that so i'm going to reduce the font size and make it um 12. that's fine then i'm going to make it um make it um bold semi board or bot semi board depending so make it um both and also make the other one both so i'm going to bring this closer a little bit and that's fine so you can add more um product or you can minus for this particular shoe and let me know in the comment section what you really think about the design and remember to share like and subscribe to this channel share my video follow me on instagram at hygienes okay so i'm turning on the grid to look at this and um align properly to the grid make sure it's at the point of the grid here it's fine so turn off the grid so assuming there are more pictures to this so how do you how do you then um change the picture to see more so i'm going to add an eclipse down here so i'm going to make this eclipse 23 by 23. so i'm going to make the color to be black then i'll reduce the opacity a little bit then i'm going to duplicate this and the third one so i'm selecting these two and i'm also reducing the opacity more this way then um i'll select the board and say align vertically centered and use vertical spacing and use sorry horizontal spacing that way i have it that way and i'm going to select these two and also reduce the size to let's say 17 by 17 make it more smaller and make sure they are lying so great you have your design awesome so you can go ahead and do multiple things on this design um i've not done great um arrangements you can do more you can look at the design and see what you can add more to it next we're going to do the prototype for this design and that should be there so i'm quickly going to do the prototype we don't have much screen here so i'll just show the basic prototype to do a prototype just go to prototype and i'm going to change the background color to let's say having this as a background color then i'm going to select um iphone x then um i'm going to select the prototype our elements so when i click on this i wanted to navigate to the screen and when i click on the cat so i'm going to select moving then it's moving from right to left and when i want to go back i can turn off this image so that i can select this and say back or rather i should select the box and say go back to the screen and i'm using move out and it should move out towards the right so now basically all about the prototype to run your prototype you can click on this play icon here present oppose the prototype for you and let's see what we have cool this will valve so we can go back to the first screen this is the first screen so click on the cat yeah and one click on the back and it's working pretty well so guys thank you for watching this video i'm pretty excited i've bring out something like this for you to watch and learn remember to like subscribe share this video follow me on instagram at hygiene okay and i'm very active there chat me up i'll respond to you and bye bye see you in my next video cheers

Channel: Building Amazing Things

Views: 49,955

Keywords: figma mobile app design, mobile app deisgn with figma, mobile app design figma, figma mobile app, figma app, how to design mobile app in figma, mobile app design in figma, figma app design, figma app prototype, figma app protype, mobile app, app, design, mobile, figma app design tutorial, figma, figma tutorial, ui design, mobile app design, mobile design, figma tutorial app design, figma prototype, ux design, figma mobile app prototype, prototype, How to design mobile app ui

Id: JM7P7mWgJbo

Length: 48min 32sec (2912 seconds)

Published: Thu Aug 06 2020