ADVANCED MOBILE APP UI DESIGN AND PROTOTYPING [FIGMA]

what's up guys and welcome back to the channel building amazing thing in today's video i'm going to be showing you how to design this mobile ui and using some cool features in figma just like auto layout component variation guys variation is a new feature in figma and i bet you don't want to miss out in this future so keep watching this video to the end we're also going to talk about layer overlay for image editing also we're going to be talking about custom animate custom animate is another cool feature in figma you don't want to miss out in this video so custom element allows you to do some awesome features like this in figure so guys this video covers a lot of things for you to learn so make sure you watch this video to the end one more thing what do you think about this design go ahead in the comment section and let me know what you think about the design we can redesign this from your comments in this comment section so if you're new to this channel welcome to the family kindly click on the red subscribe button and the notification bell so you get notified once i create any video that has to do with ui design ux experience and programming in the long term so guys please support my channel liking commenting sharing my videos to those who are interested in these videos so if you're on instagram follow me up at hygienist okay i'm very active at instagram a lot having said let's get started so guys i have empty figma 5 and we're going to start up the design as soon as possible and remember the rules the first thing is to give this file a name i'm going to call it wiki project or wiki animal cool so the next thing i want to do is um i'm going to add some frames for this design and i'm going to use um my normal iphone 11 pro x so i'll just click on the frame 2 here the frame tool allows you to put some kind of frames like phone tablet desktop watch youtube design for watch i i pray in the long term we're going to design for watch paper and the rest of that so just go to phone and click iphone x so this is my frame so you could have so many frames so i'm going to rename this frame to build my splash and um i would love to add a radius or corner radius for this so i'll go to the corner radius property in additional reduce so that's fine then um next what i will do is um click on the text to and add the name of this project but i'm going to do some configurations for this text too so the configurations i'm going to do um i'm going to set this today i'm using a new font called montserrat so guys try out this phone it's interesting montserrat so i've done that and i'm going to set the size to 6 and i'll go ahead and type this i'm going to say animal wiki that should be the title of this so i'm trying to create the splash screen and um see how that looks like so guys what color will i be using i have a color so i'll just place that color here and cool that's the color i'm using so next i like to describe what this app is all about for someone just opening the app so i'm going to select another text so in this time around i'm not using montserrat i'm using pompeis for this if you if you watch my videos you know i use pompeos a lot so i'm going to set the size to 18 what next so i'll go ahead ahead i have a text which i've already copied so uh i'll just paste that that's the text so i just copied and paste and then i'm going to reduce this a little bit then i'll set this to be centered what next i could increase the line height so let me zoom in a little bit and that's fine so cool nice um next thing you want to see is um select my eclipse tool and draw something like this so the eclipse so we are going to design like a kind of curve at the edge here so i'm going to what size am i going to get this eclipse um let me see what size am i going to use let me see i'm going to use um let's say 360 by 360 360. okay cool so at the top here looking nice already so what i'm going to do right what i'm going to do is um i'm going to give this text this shape a color and um i have a color which i want to use for this so i'm going to copy that color and um or paste it here so another thing i want to do is to reduce the opacity of this color so i'm going to click either click here and reduce the opacity or just set the value to 60 so i've set the opposite value to 60 awesome so um next thing i want to do is um um add an image so guys i have some image so go to the desktop i have some images here and also i'm going to copy this image and i'll go back to my design and ctrl v well then copy so i'm going to drag it in awesome so i've dragged the image in here so next thing i want to do is um only make this image to be inside the circle and that feature we are going to use as i mentioned earlier is overlay layout overlay so let's see what we have let me drag this down and drag this and this down a little bit and bring the cycle so you could see what is happening then i'm going to reduce this image a little bit and then crazy this week and bring it down a little bit so what i would select is i'll make sure that the image i want to use as an overlay i want to use the layout as an overlay as behind an object with a background color so we have an object or a shape with a cycle and we have the image on top so we select the image and go to layout and click on overlay also how do you see this nice right can you see it's like inside the shape this is an awesome feature great so i'm going to select both the image and the circle and use my command g or ctrl g to group it then i'll i'm going to call this what am i going to call it um i'm going to call it um just call it a shape and um i'm going to drag it and um then i'll do some basic adjustments so bring this and kind of increase it a little bit and crazy as well so let me check the images okay i might decide not to use this image so guys i'm gonna choose not to use this image so let me select a new image this image is okay so yeah so this is the image i'm going to use let me reduce it a little bit then use my ctrl h sorry not ctrl h shift h to swap um you could use shift edge on your keyboard or option h to swap this on the mac then i'm still going to select the image the shape and the image should be on top as well then i'll select overlayout okay fine so i'll drag the image into my shape which i've grouped earlier then um i'll drag this to the top so i'll select the image and reduce it a little bit and set it to how i want it to actually look like so this is awesome in them this is an also feature in it helps you to do also things like in this channel building amazing things so i'm going to drag this to the top a little bit and um increase it so i'm just making some basic configurations awesome so i think this is okay thinking with this i'll reduce it a little bit so this looks like um just like a circle well i won't make my design more unique so i'll click on edit object once i select a circle and i'll drag this so it looks a little bit distort so it doesn't look like just a nice circle okay awesome so this look pretty okay so i'm going to do some arrangements here so i'm going to take this to the top here and take this this way and bring this so um another thing i need to do is add a grid and remember that we're going to use um colognes and set it to 6 and um set a margin of 30. so we could see the element of our contents also so next i would like to create a button so guys let me turn off this and create a button so let me turn it on again and i'm going to create my button using auto layout that is another feature which i mentioned earlier in this video so what i'm going to do is um we'll just select the text and let me say that text is return of the grid so you could see what i'm doing where's the grid click on the frame and turn off the grid so this text should be select text two should be get started so um basic configuration for that text i'm going to make it um 12 by in size so um select this and make it 12. well next i'm going to make a boot and i'm using pumpkins for this and um what else i love to do uh that's fine then um do i say i'm using auto layout for this yeah i'm going to use no also i will use um shapes for this and later on i'll show you how to use auto layout so for this shape um i'm going to set the height of the shape to 47 okay that's fine so for the length of that i'm going to click on the grid so i could set it from this grid point down to this grid point where next i'll add um a corner radius of 40 so it looks this way and um i have a color which i want to use for this design so for this button i'm going to put that color cool nice so what next i'll turn off the grid line and um take this text in here and um bring the text to the front and i'm going to change the color of this text to pure white awesome let me zoom in so you can see we'll have i think this is too small so yeah you can make it 14 and um instead of bold make it a medium cool so i'm going to drag this to this point and also drag this to this point that way we're making the text stay at the middle so i'll drag it to this point as well so i'm going to select align media so it's at the middle so i'll select both of them and group it i'll call this button awesome so um guys i'm going to select this like this and this and use my alignment to align horizontal center that's fine so i'm going to drag this to the top a little bit and drag this closer to the animal wiki text and we have a splash screen awesome so guys as i promised earlier in this video we're going to be talking about a feature in figma it is a new awesome feature called variants so variant is a new feature in figma that helps you to group and organize variants of same company you have similar components and you don't want to redesign those components you just want to organize those complaints and group them together too variant makes component easier to maintain and more intuitive to use so guys you could combine variants into a single component with constant properties and value for example you could have a button with different variants like a fill button and an outline button so guys let me show you how to do this right away in this video in my design i would love to use this button as a variant of a component so uh we could have an outline button we could have a feed button so this would be a nice use case to use variant feature in figma let me show you guys how to do that so if you look at the layout i have some pages which is the default page one so i'm going to call this page the design page and i'm going to add a new page i'm going to call this page the components the components page so i'll go back to the design page and i'll use my ctrl x or command x to remove this button from the design page and go to the components page i'm going to paste this right here in the components page so now i'm going to make this button a component by clicking on create component so i've made this button a component so the next thing i'm going to do is i'm going to make this a variant so um what i'm going to do is under the variants here you can see the variant in the property panel so i'll just click on plus as a new variant you can see what just happened now there's a group and there's a new button created so if you look i have my buttons and i have my default and i have my variant so under this default i'm going to name this as the fill button so we have properties and the property is fill web property one and the property is filled so i could select the second one and change the name to outline so this way i cannot change the properties of this outline to look different from this uh field so what i'm going to do is i'm going to select this color and um inside the outline i'm going to change the field of the um button of the box rectangle and i'll remove the fill i'll add a stroke and i'll change the color to this so i i could as well increase the line to two and um for the text i'm also going to change the color of the text to this color as well so i have the if you look at this this is the component with two variants of outline and fill so and these are under a property and let me look at it very well so if you look at this they're both on the property so when i select this component you could see the property they are under a sphere and outline so i could call this property buttons types so you could have so many properties you could have for um for over effect you could have fulfilled for few could say you have red orange green you have outline where you say you have red orange green but i'm just going to use button types and give it a feel and outline so cool i have my buttons now so i could go back to the assets and you could see on my local component you could also share this with your team if you have team working with you so i have my buttons here so i'll go back to my layout and click on my design so and go to my assets and just pick that here so that's awesome so but you you'll not see um the importance of this i'll show you why creating the login form so guys let's create a login form and use the variant we just created for the buttons so what i'll do is i'll duplicate this and i'll rename this to login and i'm going to rename this to um welcome and use my enter to welcome back sorry you could not see that i'll make it clear so i'm going to drag this to the top here and let me turn on my grid line make sure it's at the grid line okay that's fine so i'm going to create an a text called our email so i'm going to set this to the left align and auto wait so next what i'll do is i'll create a line below it because i'm trying to create a text box but before then i need to select the frame and turn on the grid line and then select the um paint tool and destroy line hold my shift and click add this stream and click on the escape so click on done so for that line content um i'm going to set the color of the line to a different color maybe i'll select this color and pick this color and set the line color to that so next i'm going to turn off the grid so i could see what i have so guys um i think that line color is too heavy so i'm going to reduce it a little bit so i have another color for it also so i'm going to select this boot and use auto layout on it um you could just click auto layout here and your auto layout will come out i have a video that explains auto layout very well so guys i'll drop the link in the description for you to go check it out so i'll set the spacing within this auto layer component i'm going to set it um what am i going to set it um as i'm going to set it to 30 um let me set it to 30 fine so next i'm going to duplicate this and i'm going to rename this to password and i'm going to select both of them and also make it auto layout so this time around for the bot of them i'm going to set a layout spacing auto layout spacing between the items to be 40. awesome so next what i will do is this button that is here i'm going to rename this button um instead of getting started i'm going to rename it to be logging so now i need another button and this button i need it to be outlined so remember the features so what i'm remember what we discussed about auto layout here we were going to see the importance of using it so when i go to access and i drag this here i get the login here so i'll go to variant you can see button types and then go to variant and select outline awesome what do you think about this feature this is very great this is a great feature and figma is taking ui design to another level that's awesome so i could just select fill or outline or if you have different colors you could have red yellow green so different properties being managed with this component within the component that's an awesome feature so we're going with our outline and thanks the next thing i'll do is i'll go back to my layout and um i'll select this text in case i forget my password so i'm going to write forgot capital f forgot to put your password so in case you forget your password you can go ahead and um remember it so i'll click auto with and i'll select um maybe center a line so for this i could also reduce the text to let's say 14 so it doesn't look um doesn't add smart other designs here so bring it down and um take this to the top a little bit so i'm just doing some basic alignment so take this a little bit to the top and select these two buttons and awesome while the login so guys remember i said in the comment section let me know what you think about this design and um give me your thoughts rate design and we could do another video to redesign this also so next we're going to dive into the dashboard and design the dashboard so guys let's go ahead and design the dashboard if you have not subscribed to my channel please do so i just duplicated um the login page so i'm going to rename the frame to dashboard and i'm going to delete some of this i don't need them also so i'm going to rename this to animal wiki and i'm going to set some properties i'm going to make the property to be 28 and um that's 28 okay awesome so what next i'm going to drag this sorry about that i'm going to drag this to the top here and um i'm going to right click and go to plugins i made a video about plugins so you could check my channel about plugins i also leave the video in the description so i'll look for search and i'll click on it and uh drag it into the dashboard that's the search i also need um the menu so i'll click on it and i also drag it into the dashboard there's the menu and this the search also so next i want to do is um i'll change the colors of these icons so close my feather icon and i'll change the color and also change this color as well next i'll do is turn on the grid line so that'll see what i'm doing and i'll drag this to top right here okay awesome and i also do that to this so i'll select both of them and use my command youtube group and i have my nav icons and i'll select both of them and make sure and make them align vertical center also so i'm going to turn off the grid line so i'll see what i have nice bring this down a little bit next um i'm going to duplicate this text over here and i'm going to change the content of the text so popular in case you want to see popular uh animals you want to check out four so i'm going to make this auto width and um yeah fine so what next um what should be the properties of this text so i'm going to set the text to be 14 and let me zoom in a little bit and i'll make it um medium medium will be fine so i'm going to drag this to this point and i'll duplicate it and i have four mammalians so animals are my millions i don't know if this plan is correct so i could also duplicate this as well all better still select both of them and add auto layout with my shift a and i have a video i also leave the link in the description for you to check it out it's about auto layout and the wonders of auto layout so when i make my control d i can change this to be amphibious and i could also duplicate this to get um bits awesome so i could set the auto layout spacing for each of them i could set it to be 19 19 okay awesome then this i add all to layout to it as well then set the height the padding and height to 2 and set um let's say set the spacing left and right to 20 or i'll set the spacing to be left and right to be 20 and i'll add our corner reduce and i'll add a color i'll select this color and add a few and add that color here so i'm going to as well select the text in and change the color for the text so white also nice in the limiting on the grid line and make sure it's starting at the beginning of this design of the grid line also turn it off and it's looking nice right let me know what you think about the design and write in the comment section what you want me to discuss later on so guys next i'm going to select my rectangle tool and i'll make some rectangle shapes like this and uh what should be the color of this rectangle so um actually what i want to do is um set a background color and what color i'm going to give this so guys i also made a video about color so in case you want to know how to how i select my colors so i'll drop the link in the video as well in the descriptions for you to learn about it so i've selected this i could go ahead and make a card for each of my animals but before then let me lock this rectangle so that i cannot move it anymore so for the cats i'm going to set the color of white and add some curve to it and i'm going to make it start let me turn on the grid line as well and make it to start at the beginning of the grid line and end towards the grid line so you could see the importance of the grid line so i could add more radius to this so i could go ahead and just um select this text drag it sorry about that select this text i'm dragging here and then the text should be in front of the rectangle also so i could reduce this a little bit uh make it off and this should be my millions so i can duplicate this and give it the name of the animal let's say we're talking about line on lines yeah so i could change it to monster monsterats my new font i talked about so let me just pick the name on the front and just give it so um regular insert so i'm going to make it 18 on 24 sound pretty nice and then increase this a little bit then i have some pictures of animals so lion for lion i'm going to pick this and i'll take it in and while looking so big i'm going to reduce it and let's just say 165 or 165 okay awesome i could use my shift h to swap it and bring it to this point reduce it a little bit as well i could do more by reducing the saturation of this image to get this so you can go ahead and reduce it more and what fits you so you have something like this so cool i think this is better to reduce it a little bit and awesome so i'll just quickly um select everything without doing it in group it's so i'm going to call this uh animecard my card was spelling and number card also so guys i'm going to duplicate this and immediately change the contents so guys i'm done with formatting it so i will um select other frames and make sure i aligned them properly by using my distribute horizontal spacing and that's it so guys nice looking so you guys can tell me what you think about this and that's it for the dashboard so guys we're almost done with our design the last design we're going to do is um the design that shows details of the animal so i'll duplicate this and i'll rename the frame to the animal so i'm going to delete the contents i'm not using in this so i'll quickly delete all these contents and for the frame deleted and what i'm going to do i'm going to select this and paste it here so this time around i'm swapping it the other way around so i'm taking it this way so the image here i'm going to delete it and use the image i'm using for this video sorry about that so i'm going to select an image i want to use i could as well pick the image from here so just drag it here and replace the image with the tiger so sorry so i'm going to delete the tiger and i have the elephant here so i'll increase this and swap it and this should be it so increase it a little bit at all remember the future which is the overlay awesome so i'm going to set it this way and um that is it so the next thing i'm going to do is i'm going to take this and duplicate it here and turn on my grid line so i'll make sure it's starting from the grid line so that is it awesome so turn off the grid line and give this the name of the animal then i have some text which i'm not going to um i'll just copy the text and paste it here i copy those texts from wikipedia so i could go to my access and bring my button remember our variation feature which we can make it outline i want to use a fear for this also then i'll add some icons i'm using um for the icons so what i can i'm looking for staff so go back to my layout i click on star on the start to be in this frame so i'm going to drag the star into this frame excuse me sorry about that and let me see let's start again so i'll select star into the animal where's that okay there's the star so i'm going to take the star this way also i need um a share button if you want to share this with people i'll select the share button and also i'll drag the share button into the anima card so what next i'm going to do is to change the colors of this individual uh icons which i've added so i'm close this and i'll change the color to this and also change this very color to this also so i'm going to turn on the grid line as well sorry about that i'll turn on the grid line so we'll see what i have so i'm going to take this to this point and also take this down to this point or close by this point so i'm going to select each of these and make sure i use my align center so i'll group this and take it to the top a little bit so for the elephant i could move it to start from the beginning and make sure that everything starts from the correct line awesome so turn off the grid line at 12 and that's pretty nice awesome so we could do some adjustment i could bring the stick this text was the button a little bit down and i'll bring this a little bit down and so so um just right up uh we're going to add some design features like you want scroll uh to other write tops so i'm going to make this um maybe make it um let's say 4 and i'll change this to the center and make this to have a rounded end joint of curved nice nice then um change the color so i'm going to change the color to this color also so click on done awesome great so guys we are done with our design the next thing we're going to do is a prototype so guys don't go anywhere i'll show you guys how to do the prototype as fast as possible thank you the video is a little bit lengthy but i'm sorry about that i'll try to make it more snappy with the prototype so guys i'm so excited to walk you through the animation part of this video let's get started immediately so what i would do is to go to prototype and you could see um make sure that your device is iphone 11 pro and this color background i'm going to change it to this color so that it will look nice to my design so the next thing i'm going to do is i want to do the the splash animation so to do this splash animation what i need to do is to just duplicate this sorry what i would do rather is to drag with my shift and alternate on the keyboard to duplicate this so i have to frame i'm going to use smart animate within this tool frame so what i'm going to do i'm going to rename this particular frame i will rename it to splash animate that way i will know what i'm doing exactly so now i'm going to animate from this splash to this order splash this is the splash and it this is this um ordinary splash screen which we have so what i will do next is i'm going to select this flash then click on interaction i'm trying to add a prototype to it so i'll click on plus and i'll click here and select our need and after delay and this after delay should be 300 milliseconds then what should happen after the 300 milliseconds or after delay you should navigate to smart animate which is the um splash animate which i created uh initially so that way it will animate to that so i'm going to select um the animation for this i'm going to select um smart animate smart animate is a cool feature in figma you're going to see how it works so instead of using ease out i have the option to use custom animation so it's nice to use custom animation yeah and you are going to see the wonders of this custom animation so next i'm going to set the time for this custom animation to be 800 milliseconds so now the next thing i'm going to do i'm going to um this um custom animation helps you to set how your animations with falling so i'm going to select this and also make this this way and let's see what it's going to give us so you can as well set the values here you could set 0 1 these are different values you could set over here so um let's try it let's run this and see what we have white loading let's have okay fine and um i'll set this to fit another thing i want to do i want to click on the canvas and change this to none i don't want any um device for this so let's look at it okay nice i don't want any device for it so let's see what happens when we start our design so nothing happens and you could say this is the first frame this is the second frame nothing actually happened so what i need to do so that smart anime to figure out what to do with the animation is i will need to um make a difference between this flash and this smart animate that way what i'm going to do i'm going to click on the image and i'll drag this image in inside the frame to the string and like say this way to the string end so let's see what we have so also this is what smart and meat will do it will determine the difference between the two screen and do this for you so remember what i did was to click on this frame and select the interaction i added an interaction of a delay and that delay i set this up to be custom animate so you can swap this and see the difference so let me do this and let's see the difference this is the difference so we can change it again and see what we might have so i'm doing this like this now so let's try it okay this is what we have cool so guys try this out this is a nice tool which can help you to do awesome animations on figma so guys i'm going to leave this this way and let's try it also so next thing i want to do is i want to select go back to design select each of these elements okay i'm going to select the description and the button then i'm going to make the opacity to be zero at the initial start so with smart animate it will now come up in this design and it will look like what we have in the beginning of this video so also this is how the video is going to look like and i'll also click on this flash and go back to prototype click on the interaction i'm going to make this 800 milliseconds so let's see what it looks like awesome awesome this is great this is lovely how do you see this write in the comment section let me know what you think about this animation this is really super awesome and figma is super awesome to help us with this let me know in the comment section what do you think about what i have just done now so we are going to do other um sections of this um prototyping guys sorry this video is a little bit lengthy next time i'll try to make things snappy and i'm so sorry about that so sorry for wasting your time but i believe you have learnt a lot uh why in this video we've learned about variants have learnt about components of lead about smart animates you have learnt about image editing overlay and the rest of the a lot has been learnt in this video so guys let me still walk you through on how to create the other animations i'll be very fast with that so if i click on this um login so i'm going to duplicate it down here this is the login so i'll call this um login animate one so this should be the first animate for the login so what i would do here is i'm going to take this very um arm shape inside just like we did with the other one so i'm taking it inside as fast i can okay i'm using my keyboard that's why it's a little bit slow so the next thing i'm going to do is select this frame and add an interaction so the interaction should be on delay after delay and um it should be 800 at 12 so i'm going to select uh navigate to instagram to login animate one so to navigate to this and i'm going to select smart animate and make it um custom and um i'll set this this way just like the initial one we did and this way then i'll set the time to be 800 milliseconds okay also meanwhile the button once i click on smart animate uh once i click on this button i'm getting started it should go to this frame so you should go to the login frame and this time around i don't want smart animate i want it to be let's say to slide in and um to use um easing so it will slide in use as in and i'll make this 300 milliseconds so that's where let's look at what we have so okay awesome then when i click get started it takes me here and this one pops up okay that's nice so the next thing i'm going to do is um to fill in the text for the email and the password so what i'll do is to duplicate this very one again at the top duplicate it down so i'm going to call this animate2 automatically figma has done that for us awesome so this is the second animate so i want once i click on this um text box it should come once i click on this text box because this is the last design once i click on this particular text box it should come to this and i'm going to use dissolve this time around i'm going to use um navigate to this command login animate2 and this time around i'm going to use dissolve dissolve is another animate feature so it's going to be easy and i'm going to make it 300 milliseconds so now on this frame i'll go back to the design and i'll add a text into this design what i'll do is i'll select this and i'll remove the auto layout attached to it i'll also select this as well and remove the auto layout select the other one and also remove the auto layout that way i can then select this and duplicate it in inwardly this way and i'll rename this to be the uh email of the user that is typing then i think i'll also reduce the size make it um 14 that would be great and that's okay so i'll align it properly and i'm going to make it our semi bold also i can also increase the letter spacings to four and that's awesome so this is what i should have once i click on this so let's give it a try and see what we have so i'll start afresh using my r on the keyboard so when i click on get started it takes me within some milliseconds this one pops up so when i click on this also with the dissolve feature this comes out this is really nice so next thing i will need to do right when i click on the password what should happen so i'm going to duplicate this as well so once i duplicate this i'll zoom in here and um i'm going to duplicate this um content here as well then the content of this should be um an asterix showing that i'm keying in some password values so what should happen once i click on this password button i'll go back to my prototype and drag it here i'm still going to use the same features which is dissolved is in enough 13 milliseconds awesome so let's restart our prototype and click get started awesome click on email this is great click on password this is great so what next happen when i click on login to login into the application so next is to get to the dashboard here once i click on login so what i'll do next is to duplicate the dashboard so i'm going to duplicate this dashboard this way after duplicating it i'm going to um go back to the design select each of this element then i'm going to drag this element inwardly inwardly downward inside this also so what happens once i click on this login click on the prototype and once i click on the login it should take me to the dashboard so i'm going to drag this down to the dashboard and it should be on the click to navigate to the dash board note this i'll rename this so that i know what i'm doing so i'll call this dashboard animate just to create a difference so once i click on this prototype takes me to dashboard then it shows so this time i'm going to use slide in and i'm going to make this 400 milliseconds and i'm going to use this direction to be the direction so on this dashboard i'm still going to add um an interaction to this so what i'll do is to click on the interaction and i'm going to set the interaction to be delay after delay and what should happen should it happen in 300 milliseconds and what then should it do it should navigate to the dashboard animate also so we're going to use the smart animate feature for this and i'm going to use is in and i'm going to make this 600 milliseconds so awesome so guys let's check this out i hope you understand this um get started awesome email password login and with the smart unit awesome this looks great so the next thing i'm going to do now which is the last prototype in this section is the the um card animal card so what i'm going to do is i'm going to duplicate this as well duplicate this downward and i'm going to rename this card to be anima animate so what i'm going to do is i'm going to select this item here and move it in as well because the idea is to use smart animate to get it to that awesome so now i want once i click on the um 11 card it should take me to discard and um what feature am i going to use what kind of animations am i going to use on this so what i'll do is on click you should navigate to um animal exactly that's what we have so it should be um easy and 400 let me make this 400 milliseconds also so once i click on the animal card it takes me here so after delay i'm going to add after delete so that will get the animation to this so what i'll click is i'll add an interaction and the interruption should be after delay and um i'm going to make um i'm going to make it 800 for now or so make it 300 and see the outcome of 300 this should um navigate to the animal animate and this should be um smart animate and this should be custom animate as well so i'm going to set this this way and i'll also set this this way and let's try our design our prototype design so i click on get started also click on the email click on the password click on login and this pops up really nice this is really nice so what happens when i click on the elephant and this is what i get so there's something here which uh i don't know where it's coming from so i'm going to look in the design carefully to see where that is coming from so um in case i don't find it that's all about this design so i don't know where this is coming from so it's probably going to be inside by design somewhere in the design so guys let me run this again afraid to see what will have nice awesome this is really great this is really great way to prototype your app design guys if you really enjoyed this video give me a like comment in the comment section tell me what you think about the design the prototype share this video to people who watch it and support my channel share my videos share my channel um encourage people to watch my videos thank you guys for watching this video love you all and take care until i produce another video bye

Channel: Building Amazing Things

Views: 29,088

Rating: 4.9728947 out of 5

Keywords: figma mobile app design, mobile app deisgn with figma, mobile app design figma, figma mobile app, how to design mobile app in figma, mobile app design in figma, figma app design, figma app prototype, mobile 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, smart animate figma, variants

Id: zi_zhrg3AV4

Length: 55min 32sec (3332 seconds)

Published: Fri Nov 06 2020