Figma Web Design and Smart Animation

what's up guys and welcome to my channel building amazing things in today's video i'm going to be showing you how to create this awesome and professional web ui in figma i came across this design on youtube but the person who made this video did not really explain how he achieved this video so i thought it would be nice to make my research and teach you guys how to achieve this awesome ui and these wonderful animations attached to this video if you look at the animation is very awesome it interchanges within the different images of food in this design so this video promises to be an interesting one make sure you watch to the end of this video and if you're new to this channel can you hit on the red subscribe button and the notification bell so you get notified when i create awesome videos like this on this channel so let's get started [Music] so guys i'm pretty excited to show you guys how to do this and i've already done this several yeah i did my research lent and i'm going to show you guys how to do that so to get started the first thing i'm going to do is to give this file a name i might choose to give it a full um [Music] web app design then i'm going to use a frame for this and i'm going to use imac a mic is like a desktop um view like so i've added this frame on this canvas so the next thing i'm going to do is i'll need a grid line so click on the grid and select column and make the column to off usually websites are designed with 12 columns so add a margin of 100 okay that's fine so the next thing i will do is i need to add um let's say let me zoom in and let's say i'll add um let's say the title of this or maybe let's say the title of this um website or the logo name or whatever you call it so i'll click here and i'll set the properties to let's say 18 and set it to be medium and um set the font type to the pump piece then i'll go ahead and i'm going to call this foot haunt like you're looking for food that's awesome so the next thing i'm going to do is i'm going to duplicate this holding my alternate and drag click and drag with a mouse so i'm going to call this breakfast this is if you're looking for breakfast then i'll duplicate this and call it launch that is if you're searching for launch then i also duplicate it and um i'll type this to be dinner awesome so i'm going to select this tray and i'm going to change it to let's say regular and i'm reducing the front side to like so 14 and i'm making this i think i should make this bold oh leave it at medium and that's fine so what i'll do is to select the straight items and add auto um layouts to it using my shift a remember i have a video who talks about auto layout you can click on the link in the description to go watch that video so i'm going to select this auto layout and i'm going to make the auto layout um spacing between the items in the router layout i'm going to make it um let's say 63 that's fine and i want this to um start from this point from this point of the grid line and that is it so let me turn up the grid line and see what i have okay awesome this is looking great already so turn on the grid line and i'll select all of these and um align center and drag it to the top this is awesome so next thing i'm going to do is i'm going to create a login button to show users where to log in so what i'm going to do is i have a plugin called um fedor icons so just quickly open fade icons and look for um lock so i'll just click on the lock icon and i'll drag it in here and i'll drag the lock icon towards this point make sure that it's at this point of the grid line then um i'm going to select all again and make align center and this is awesome so another thing i need to do is to add a logo to this design so um let's just create a logo so quick so let me turn off the grid line so you can see the logo design so i'll select eclipse so i'm going to design the logo and um let me say let me set this to be 27 by 27 that should be the logo size and i'll drag it this point i'll click on edit shape then i'll select um let's say let me select bend too and i'll do something like this like import and this is okay so click done so another thing i could do is i i want to resize it so it matches with the size of the food yeah and this is okay another way you could do this you could um go to file if you don't have your ruler turned on on figma go to file and go to view then go to ruler so you can turn on the ruler so you have this screw layer so i could drag this ruler to this point of the food and i'll drag another one to the endpoint here so i will see how to resize this so that's perfect so this is okay so i'll delete this and also delete this and awesome so i'll turn on my grid line again so i need to align this properly to this edge and i'll select these two items and add auto layout to it using my shift a you can see auto layout audit so and um that's awesome so uh i could space this auto layout let's say 30 and i think this is fine or kind of reduce it let's say 20 and i think this okay then um inside the content of the auto layout select both of them and uh make it align center and that's fine so i'll rename this frame of the auto layout to let's say logo session and i'll rename this section of the frame to less enough session and cool i have this so i could as well select everything and then group it and call them um navigation bar navigation but awesome so i have my notification bar uh my logo session and my lock account and my navigation bar all set up so i could turn off the grid line and look at what i have this is awesome nice good so another thing i want to do is uh i'm going to change the color for the text for the food i'll change it to three three three three three three awesome like a gray kind of color so i will do that for wood lock icon set it to that as well then i also do that for the navigation i also set it that 233 awesome so um that's okay so next thing i want to do in the design um i want to add let's say what am i going to add um i'm going to add a cycle like an eclipse so i'm going to make the eclipse 1176 by 1176 and this is fine and i'm going to drag it up inside this frame i'm going to drag it up this way and i'm going to set it below the navigation bar and um i'm going to turn on my grid line so i could see what i'm doing and i align it properly so i'm going to take this this way to this point and um maybe i have something like this okay this is fine and um let me turn off the grid line so look at what we have okay we're close to the design so another thing is i'm going to bring my images i have image one and down to six i'm going to um share this resources to you guys so i'm going to drag this into my design yeah i'm going to drag this into my design and yeah my images i'm going to share this to you don't worry so i have this here and um the next thing i will do is um let me bring this so i'm using my alternate to duplicate it and i'm bringing this here and this looks like what i just showed you guys that i'm going to be designing and i'm going to drag this a little bit up i'll drag this up a little bit and also bring this up so i'm going to turn up the grid line to see my design okay awesome so next thing i'm going to do there are some text descriptions here so i'm going to turn on the grid line as well and then select my text box and um my text tool then click here i'm going to set this to let's see 48 and um pump peas and make it a medium i'm going to set the content to let's say delicious delicious so you get delicious milk so i'm going to set the color to 333 so almost all my colors here 33 so i'm going to set it to start from this grid line so i'm sure that it starts from the grid line i'm also going to duplicate this to have another text maybe a subtitle so i'm going to make this 36 and i'm going to change the content of the subtitle to quench the hunger if you're really hungry like i am now right now i'm looking at this meal i'm i'm already hungry so that's that so i'm going to turn off the grid line and we have something like this and turning the water have okay awesome so next thing i'm going to do is i need another more descriptive text and let's set to this point and um this text is going to be lexi 14 and i'm going to make it regular and i'm going to set um like letter spacing for then the text content i'm going to use a plugin coloring to just get me a dummy text so i'll use autogenerate also so i'm kind of the line height and this is okay so let me turn off the grid line so we'll see we'll have awesome glitchy right so next thing i'm going to do is uh i'm going to create a button down here so i'm going to select my return go to and create something like this to take this to grid line and um i'm going to as well i'm going to set the corner reduce set it this way and um another thing i would do is um what what what what what i would do next is um i'll have to select my text i'll need to add the text to it and and set this text to be align media and align center then i'll set the size to let's say 14 you know make it boot this time around and the content should be like quench now if you really want to quench the hunger now so i'm going to set um this to wrap with the shape and that i think this is okay for now so i'm going to select the two the text and the rectangle to and use my command g to group so i'll call this button then i'm going to select this text here and use my shift a to add um auto layout to it and kind of reduce the auto layout to let's say 6 and i think i'll go with that so bring this there so i'll turn off the grid line again good this is awesome so i need some colors for my awesome design right now looks like a luffy the little wireframe apart from this image so what i'm going to do is i need a color for this so i'm going to pick a color from this image so i'm going to pick the screen and awesome so this game looks great so next i'm going to do is um copy the color code and add that green to this awesome change the text to white okay that's good i'll change this text to green as well and when it's what next wordness i'm going to reduce the opacity of this so drag it to get a lighter a lighter gray awesome that's great so um let's run this and look at what it looks like um my image is still loading so let's okay awesome great so i think this is too big so i'm going to reduce this a little bit and turn on my grid line so i could set it so properly so i'm going to reduce it tomorrow and um i'll create a little bit okay this is fine set it this way so let's look what we have okay that's that's great so i'm going to set this color the icon to have my green color let's see what we have okay this looks great super awesome so um what next i'm going to create um another shape and um that shape i'm going to select an eclipse so i'm going to select this eclipse and have something like this and make the size 560 by 560. awesome so and um this is my button this my frame this frame is for what let me rename this to content and this image is the image at the center this is the navigation this is the second the eclipse okay nice so i'm going to select this and i'll bring it to the bottom and um i'll take the eclipse down what this week and um let me turn off the grid line so you can see properly what i have so i'm going to set this at the middle here the middle boot then i'll turn off the field remove the field add a stroke and make the stroke to be centered and create the size to the two and i'll go to more settings i'll set the dash and gap to be 10 by 20 10 by 20 nice awesome so i'm going to change this color i'm going to select the green color as well add it here then so um i'm still going to align this um let me turn on the grid line i'll look at it and uh kind of align this this way to be at the center okay that's fine i think i'm going to drag this to the top so i'm going to select this delicious content and drag it a little bit to the top so let's look at uh what we have okay that's great then the next thing i'm going to do is uh i want this shape to be maxed let me turn off the quick line so you see what i'm talking about i want this shape to be maxed inside this other shape so what i'm going to do is i'm going to um kind of duplicate this shape so i will drag it so you can see i have duplicated it so i have those two shapes here and i have the other shape i want to be maxed in one of them so i'm going to select the two of them and then click on max so that way i have the the smaller cycle inside the bigger circle so if you don't really understood understood this you could watch it again and again i believe you get to understand it more better so um next thing i'll do is let me look at the design okay awesome so next thing i'm going to do is i'm going to arrive arrange these images around this um line this smaller circle in so i'll set the images height all of them to be 100 and uh i'm going to get this first so i'll duplicate this yeah sorry about that uh i'm going to duplicate this here and i'll kind of draw other images in so take this here and um kind of um let me delete and drag this here sorry about that um drag this here and um drag this as well and then drag this as four and also drag this here so let me zoom in so you can see what i have so what i'm going to do is now basic alignment so align this this way and unline this this way also drag this to this point so what i'm doing is basic alignment so select these two and um align center and then select these two and also align center and i think i'll bring it down a little bit and select this tool and awesome great so what next so i want these images to be inside to be maxed as well inside this big um eclipse we have so i'm going to drag it into the max so i've dragged it into the max so awesome so let's look at it this looks great and um still going to do some alignment so uh and still drag this so we have one two three four five one two three four so targeting two one two three four one two three one two three and a little bit i think this is okay i'll drag it to this point i think i'm fine with that um i'll do the same yeah then i'll select this kind of basic alignment so that's awesome so next thing i'll have my toggle icon here so i'm going to set this icon this toggle icon i'm going to set it to be let's say 40 by 40 then um the next thing i'm going to do is i'm going to zoom in and um i'll set this this way and i'll select a rectangle let's say rectangle and um do something inside let's set this rectangle field so that you could see what's happening alberta st us33 good awesome so i'm going to drag this to the middle and i'll click on edit and select um my pen tool and add something like this and click on done then i could click on edit as well and select this point and delete and select this point also and delete or click on done so i'll select this other stroke and make the stroke to be two and [Music] i kind of set this color to be green and i'll set this to be white awesome so i'm going to rotate this so i'm going to rotate by 135 and i think i have it a well rotated i think this is fine so what next i'm going to select the boot and use my command j to group and call this um nav icon whatever you choose to call it it's up to you so i'm going to duplicate this and um take it this way it's a little both of them and make sure they're aligned properly well so next i think i should take it down maybe this way also it should be this way and this should be this way as well so awesome they will drag this a little bit down so just basically basic alignment so you could align it properly the way you want so let's look at it awesome so next we're going to be talking about the animation so we're going to working on the animation so uh the idea here is that we're going to make this to rotate and we want to click on these two buttons and also add some animation to this button so what i would do now is i'll click on this max tool you can see the images pin max in it so one great feature here is you can turn off the mac tool and you can see stuffs that have been maxed in it so you can show or hide tunnel or turn off so whatever you want to do so i'm going to click on this frame and also turn off and then create the frame so i could see all that designs so i could select this images and kind of duplicate it and drag it to the bottom and swap it using my shift v you can swap it using shift v you swap horizontal using shift b swap vertical using shift h whatever you want to achieve so i think this is okay for now and i'm still going to do some so my adjustment so just taking one two three just like three so let me do some basic adjustments [Music] here guys i'm just doing some basic adjustments so i have exactly what i want and um say this as well to make a call now i could drag this in here drag this in here right fine three or three twitter twitter so i could select this two in the line very well select this as well and then align it so make sure everything is aligned properly this tray align as well properly this one's also online properly so awesome so i could turn off so i could turn it on as well to see it and turn it off not to sit awesome um what next i'm going to do so i'm going to group this uh images let me turn it on again so you can see it so i'm going to group these images and adjust the images so i'll use my command g and i'll call this rotate images also and um turn off goodness what next whatnot so this center image i'm going to duplicate the center image so and uh let me duplicate this very one so i'll copy and select my frame and paste so i'll set it here so i have in this image here as well so i'll drag it up so i have image these two image my max and the shape awesome so i'm going to rename this to i'll remain this to image one and set the other one to be image 2 and the size is 100 as we know and this one is 292 so i'm going to select both of them and group and call it um center image then inside the center image i have my image 2 and i made it on image 1 so i'm going to drag the image to below it and i'll kind of reduce it my image too this time i'm just in 42 and i'm selecting the both of them and making sure they're line centered to each other so awesome great so um select the frame and make it imac that way it's back to the normal shape we have awesome so um i'm going to as well duplicate this button right angle so i'll have rectangle one and reticle two so i'm going to duplicate it right i'm going to retango 2. so right on one should be on top y ringer 2 rectangle 2 should be below there's another animation which we want to do so then once you're done with this if you go to the stage awesome you did a nice job we are done with the ui so we're working on the animation right now comment in the comment section what do you think about the ui and if you think figma is a great tool let me know in the comment section if you think i'm doing a great thing also let me know in the comment section so i'm going to duplicate this i've duplicated it i don't need this anymore so i'll delete i've duplicated this and when i click on this entire image for the second one i would like to use my ruler to guide where this is exactly this image okay awesome so i'm going to duplicate i will show you how to add a ruler so you could do that as well so i'm adding a ruler to this so i could get the edges of this images and that's that's nice so the idea now is um this center image for the second design so i'm going to make image two to stand out why image one is down here's at the back so i'm going to reduce image one so when i reduce image one and remember the other one was reduced to 42 so i'm going to reduce this to as well 42 by 42 sorry 42. okay okay okay okay so i'm going to increase this i'm going to check the size of this very one and the size of this very one is 292. so i'm going to increase image 2 to be 292 and using my rule of set initially so i'm going to set it exactly at ruler so i'm going to set boot our images to be centered aligned to each other and remember image one is at the back so i'll go ahead and delete the lines that's the ruler awesome so i'm going to select um i'm going to select the max and look at the shape so i'll select the rotate image and i'll kind of rotate it so it goes the other way around so let's uh 35 awesome this is great uh let's say 36 okay at 5.6 at 5.8 that's 5.4 so depending on what you want to achieve make sure you just get exactly what's so i i i shifted this to match with the second image so this kind of look like as if we'll rotate it so what next what neck doesn't that's what thanks so i'm going to change the color of this and i'll select ah let's say or color selection now for now i think we should go with this color this doesn't look so nice uh this looks like the other green we'll go with red we'll go red so i think this red looks okay depending on where you the color you're selecting so that's fine oh you go with any color you choose so i'm just trying to make sure select something nice i'll go over this color we'll go with this color actually i don't even know which color to go with i think we should just go with this color so i'll copy the color code and um i'll change each content to that color so that i'll delete this line i don't need it anymore so remember yeah i have rectangle one and two so at this point rectangle two has this color right and red table two should be on top good then this also should have the same color and these as well should have um that color okay this is okay for now so um i think we have something nice so let's try the animation so i'm going to select from this point go to prototype and drag this to this point then i'll set it to be on click navigate to imac 2 so it should be smart animate and you should animate in 300 seconds it should be is in so let's run the animations and see so i'm going to refresh this to be sure i have the new content of the design here so i just loads also still loading okay good so when i click on this awesome that's awesome so i can go back so i need to set the animation of this as well to go back to this and smart anime easy and same so let me see awesome it's interchangeable and this is awesome this is awesome if you learnt this is good you will see the buttons actually changing but i need more animations to the buttons so what i would do is um [Music] i'll go back to design and on this button i'm going to select rectangle 2 which is the other button and um actually rectangle two color is this color so i'm going to copy it so go back here to the buttons and rectangle two should be that color so i'll change it to that color and i'll set rental 2 to be on top and i'll kind of reduce it to let's say um set this to let's say 6 holders is looking so tiny so i'm going to drag it to this point awesome and um i'm going to reduce the opacity to zero so you don't get to see it so i'll do the same for this um this i'll do that for rectangle one which has green color and i'm going to set it to be on top and i'm going to set the width to be six and uh i'll drag it to this point and i'll set the opacity to zero so let's try the animation watch the button say that cool stuff animated there so there's using the smart animate we have this awesome ui so guys this is interesting this is what i i'm so happy dishing out to you guys guys please thank you for always being there thank you for subscribing for those who have subscribed to this video if you're not subscribed please subscribe also like comment that way youtube will know that this guy is putting up lots of content and great content on this channel so that they'll be able to promote my video and let me see um follow me up on instagram make sure you follow me up on instagram at hygienist okay follow me up make your design and tag me there i'll comment on the design thank you for watching these awesome videos see you in the next video bye

Channel: Building Amazing Things

Views: 92,386

Rating: 4.9526486 out of 5

Keywords: figma web design and animation, figma web design, web design in figma, smart animate, web design with figma, figma, web, how to make a website, web design, web development, how to design, how to design a website, web design tutorial, web design tutorial for beginners, design website, figma prototyping, figma tutorial, website design, figma logo design, ui design, ui design tutorial, ui, ux, figma smart animate, animation, figma animation tutorial, figma design, Figma ui design

Id: CBf0BOaIBVw

Length: 35min 3sec (2103 seconds)

Published: Wed Sep 23 2020

Reddit Comments

[u/AutoModerator]

Hey there, /u/girish_kumar_v! If your post is not already flaired, please add one now.

---

Reminder: If you have a problem or question, please make sure to post a link to your issue to help users help you.

---

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/-Unxsh-]

You need to use some z-index, that's the easy part.

The hard part requires some CSS and javascript (JS) knowledge. Like button onClick() - JS. Or like img { visibility: none; } - CSS.

I hope I did answer your question. :)