Stunning SaaS Website Design In Figma (2023)

in the last video you learned how to use almost every single tool in figma this time we're going to take this to a whole different level in this video you're going to learn how to design this beautiful landing page for a SAS company called Cypress the type of content you're about to see is something that has never been done before well maybe but anyway we call this action driven content so you design as you watch today you're going to learn a bunch of new topics how to create a UI system from scratch with typography and color palettes components component variants and properties glass morphism responsive layouts designing for both desktop and mobile devices component prototyping with smart animate newer features in figma like rap and so much more this video is beginner friendly but I really really recommend you watch the previous one if you're just getting started quick side note in our next video we will be converting this design into a full stack production ready build using Cutting Edge technology energies so that you can start SAS businesses too don't forget to subscribe if you want to get notified when those videos come out so check this out guys we're gonna build something very similar to this it's a UI system um something very simple okay we don't want to jump into uh you know building the biggest UI system most complex UI system first start small and then we add to it and eventually scale alright so the first step is we need to create breakpoints okay what are break points breakpoints are basically frames for your mobile device desktop and tablet devices okay so let's go ahead and do that you hit F to bring up your frames and we're going to select desktop here we're going to drag it in here and we're going to hit F again and also get our iPhone 14 pro let's drag that in there too and let's just extend this all the way to the bottom okay now that we have a framed let's go ahead and create our grid layout so right here if you see here you see layout grid click on that and for desktop with the desktop selected you want to change this to columns and change that to 12 count okay and now the margin set this to 40 pixels you can all set to 45 actually that looks better and now go to the iPhone click on the layout grid and um click this change it to columns change this to 4 and the margin to 25 pixels okay the next thing we need is now our UI system which is our color palettes okay so to do that we're going to create a new file if you're in the free tier you can create three pages okay so right here we're on the free tier I'm assuming you guys are just starting so this is perfect for you okay so do this create a new page and we're going to call this UI system right here and we're going to create a section you can do that by clicking this one or shift s let's create a section nice big section to put our stuff in there what we're going to do is first we're going to create a big frame this is going to hold all the stuff in here okay and we're just going to give this a border radius something around there perfect let's first create some texture that says colors and we're going to use DM Sans all right that's the font and usually we just paste something like this just to you know make it look official for our clients um they know that hey this is our stuff okay and you can put your logo if you want whatever you want to do but we're just going to skip over that for now the next thing you want to do is create five boxes okay let's give this 15 pixel border radius and let's duplicate it one two three four five and now what we're going to do is we're going to fill this up with colors all right now go ahead and fill each of these boxes with these colors okay you see these colors right here click here click here and paste these hex codes in there okay so go ahead pause the video and come back and we'll continue okay awesome hopefully you have something like this in front of you to create color palettes for each of these we're going to use a plugin called Foundation okay Foundation helps us speed up the process of creating palettes and styles so this is all you got to do open the plugin and then click this drop down change it to material click on the color dropper and select these primary colors okay which are also called our brand colors they're not Primary in this case they are our brand colors Okay click that and with these names you see these names right here replace this with that name so this is washed purple okay replace it and now go ahead and hit palette and then hit create Styles so what this is going to do is it's going to first create our palette for us so we can drag that into our frame there and if you notice here I already created a bunch of colors don't worry about it but if you see here it has already created something called washed purple for you so go ahead and do that for washed blue uh primary blue primary uh purple and then when you come to neutrals stop because I'm going to show you a better way to get more neutrals okay so go ahead pause the video and come back in a second all right perfect hopefully you have something like this so let's go ahead and create the new tools that I was talking about so open uh Foundation again now instead of selecting material select ant design and then click on neutrals okay right here now change this to neutrals and click this dropper and now select the dark color what this is going to do is it's going to set the darkest color to this one and it's going to give you every shade of that okay awesome right and then click on palette and create Styles so now we have created our color palette so now when you click outside the screen you will see Foundation washed blue washed purple primary blue primary purple and neutrals and now what you got to do is you're going to click on this okay these what we created here all these uh boxes click on this you're going to click on this icon here hit the plus icon and now you're going to say brand okay you're going to put the backslash and then you're gonna say washed Dash purple okay and you can also add brand here so it's easier to identify so brand washed purple okay and go ahead and create this style and do the same for all of them except for the neutrals okay go ahead do that and uh come back to the video okay awesome hopefully you got all of them right and uh this is what you should see let's do the same for our brand neutral okay so what we're going to do here is we're gonna change this click this right here hit the plus I'm going to change this to Brand background or dark sounds better and now you'll see in here you created all your brand colors but you'll notice it's not under Foundation right so first of all we don't want this Foundation here so we're going to drag everything out of this Foundation okay wash purple washed blue primary blue and this primary and or neutral colors all right cool and now we are no longer indented under the foundation uh style and now we have all our Styles outside of it we're done with our color palette now any Styles you reuse can be changed globally across your entire design file okay so now let's create typography same thing copy this and paste it all right so this looks like it fell out so I'm just going to bring it back into the frame I'm going to change this to typography and I'll delete everything in here we don't need this anymore first thing we do is we create a text and we say DM Sans to know the font we're going to use okay and you can put fonts in front of here and push this to the right side create two more put this back here and call this mobile duplicate it and around here for now we'll just keep it up here we'll call this desktop all you need to do is create six of these okay so first duplicate this bring it here change this to header and put number one in there and now do command D to duplicate bring it down command D again and do that six times so one two three four five six one more okay perfect and now make sure that um this is all right set to this right here went ahead and I just created some guides right here okay so now everything here is changed to DM Sans and the last one becomes a paragraph okay it's not a header all right perfect and now let's change each of these to header two header three all right so now what you're going to do is you're going to select these two and do shift a create an auto layout out of it okay shift a here same thing here do it for all of it all right once you're done with this you want to select all of these and just create an auto layout out of them okay shift a so that when um the size of one thing changes everything is dynamic look at this text okay look at this here and set the properties on each of these headers as needed okay so that's a little bit of a task or challenge for you go ahead and pause the video do that and then come back to this video awesome hopefully you got it right if not no problem this is what you're supposed to do so click on the header and if it's difficult to click on it you can hit command and then click on the header and then go in here change this to 38 pixels okay 38 pixels and hit enter perfect there done and make sure we set the font weight to bold all right same thing for header two let's go in here change it to 28 pixels change the font weight to bold now what you're gonna do is you're going to select this entire layout copy it or duplicate it drag it and paste it for uh the desktop okay perfect so now I went ahead and changed the description and you got to do the same thing that you did for the mobile which is change the sizes for these headers with respect to this okay so go ahead pause the video do that and come back all right so if you didn't do it no problem this is what you were supposed to do click on them change it to 45 here and click on this change this one to 36 here to 28. so now we have this typography set up but it needs to be converted to a textile so all you got to do for that is click on this right here okay and you see this text button right this style right here click on that hit the plus icon and now we're going to call this typography okay backslash mobile Dash Okay and we're going to set it to H1 all right and you can also see it in here textiles typography so let's do the same thing for everything now okay and finally let's do that for the paragraph two so we're going to Mobile Dash p and now we have our typography for mobile let's go ahead and do the same okay so now all your styling for typography can also be reused if you see here this one right here has a typography setting okay so uh typography drop down so now you can select anything you want from here for any text in your figma file it looks like we made a tiny error in our typography size and weight setting all right these are the new Styles okay the new sizes and the new weights for the headers okay headers and the paragraph So take this up as a challenge go ahead and try to change a style of something that's already set okay go ahead pause the video and come back to it and if you can I'll show you exactly how to do it alright awesome so if you've already done it great job okay if you didn't do it this is how to do it okay first click on your text okay head over to the uh the style option right here click on this and it will show you this little edit style icon okay so click on that and here at the bottom you can set it to 45 pixels okay all right guys awesome we are finally done with our typography setup so now let's move on to the fun part which is designing the website first we're going to create a file here called components okay go in here create a section where we can put our components inside so first thing we're going to build is icons okay for icons the fastest way to build them is just to use a reusable pack that's all that's online for free from the figma community or you can Bill them and if you want to build them of course in the last video we went across everything how to build icons so we're not going to try to build icons right here I've already copied a set of icons that I want to use for today's project and I'm just going to paste that right here up in the right corner and the next thing we want to do is we want to change the section the color of our section to the brand dark one so let's do that and now it's easier for us to kind of see the theme match so now to create components out of all of these These are instant swap components right they're already set up and things like that so what that means is I can instantly go in here I can go right in here and change setting component to any other component I want okay but we need to also create these as components in our file because we copy pasted it so I will also put a link in the description to get this icon pack if you guys want it but the colors for the icon pack is for the light color you want to choose the uh washed 500 purple washed purple 500 and for the blue one it's the washed blue 500 okay awesome so now that we have our icon set we also need to convert all of these to component let's go ahead and select all of these individually so I'm just going to do this right here and I'm going to go up here and then click this and create multiple components out of this so now we have all our components created for us so if we ever used one of these and we wanted to change this in the future we could just hit the drop down here and maybe change it to fire icon okay I want to know how to set this up like this go ahead and watch the last video so you'll get an idea now let's move on to creating our buttons to create our buttons first let's create some text call this button CTA and uh now what we want to do is we want to create an icon also inside it because you might need an icon for it right so let's put that right here and let's go ahead and create a default icon so for now I'm just going to do this Arrow go ahead and select both of these and hit shift a to create an auto layout and then we gotta select the color for it so for the fill what we're going to do is we're going to set a gradient color Okay so we're going to click on this click this change this to gradient and now the top color which is this one right here let's make sure this is local colors and you want to select the uh dark right the dark color and then the top one we want to set that to um this one right here okay this color right here and this is the hex code if you need it this is again from our locals file it just does not show the number here but this is how you can do that and then we're going to select this and we're gonna give it some padding so let's give it about four pixel padding top and bottom and we're gonna give it about eight pixel padding right and left now click on this and create a border radius right up there okay right up here and now go to stroke and just create a stroke for now select this and change this to a um change this to another gradient okay what we're going to do is going to select this one and we're going to change this to from here to here okay we're going to change it like this and we're going to change this color which is the darkest color we're going to change that to the gray color this one okay and we're going to change the lightest color changes to 100 and make that um make that this exact number right here okay four six four five by three okay that's the hex code so now we have this beautiful button set up for us this is the default button okay perfect and now what you can do is you can copy this and duplicate it duplicate it one more time and let's also move these to our buttons our effects awesome for active State just click on the button go to the background okay and go to the lightest color which is this one right here and just set that to this color right here okay which is two zero one F three zero Okay just set it to that color so that's going to be our active state so that means the user is clicked on the button okay and our disabled is basically going to be this so we want to go into our into our text we're going to remove this fill and we're going to replace it with the neutral number seven and we also want to change this color here too so we're going to change our washed and we're going to make the light one neutrals eight and The Dark One neutrals seven for our secondary button let's go ahead and duplicate this pull it down right here and all we're going to do is change this border change that to purple 500 and our blue which uh blue 500 and we can duplicate this duplicate this one more time and for the hover State we can maybe change this whole thing to purple okay so we're going to change this color also to purple 500 and for the active States we're going to change everything to a darker purple so the first purple becomes dark second big purple becomes dark okay so click on your text remove the fill create another fill click on this and change it to gradient okay so we're going to change the gradient um flow like this right side color so this is the color for the left side all right this one right here and for this side we're going to change it to this right here A D ac95 okay perfect and now let's click on that and copy this so click here copy this since we we didn't do this for everything so unfortunately we got to do it for everything now um let's change this to for this one perfect and for our secondary button we're gonna Click on each of these remove the fill okay and we're going to change the color to our brand washed purple now we need to create a component variant out of all of these so we can swap between the buttons and we can remove the icons if we need to so I'm going to show you exactly how to do that also make sure you uh Click on each of your buttons and change them to fixed height okay we forgot to do that so let's go ahead and change that to fixed height and now we gotta name all our buttons how do we do that this is how we do it we click on the button and we rename this to First button slash and this is primary slash default and go ahead and copy that and you can paste it for the others too so hover active and this one's going to be disabled okay and uh same thing for this one too so let's copy that paste it here change this to secondary copy all of this and apply it to everything else hover active and disabled select all your buttons and click this drop down and click create can speak English create component set okay now let me show you what this does so if you go to assets and if you look up a button drag your button in here you now have access to these properties okay property one primary you can change it to secondary button you can change it to hover State disabled whatever you want okay and the other thing we need to do now is also what if we want to toggle on and off these icons sure let's do that so select all of these and if you go into the layers panel you'll see this create Boolean property click on this and now give it a name so let's just call it a button icon and then by default I want it true so we can see everything right in our design file and hit create property and now when you create the button you have this magical button I icon that you can toggle on and off and also make sure to change the CTA text to uh to desktop P okay I think this looks better without the um the fill okay so let's remove the fill now we need to create this logo right here what we're going to do is we're going to create um a frame okay we're going to create a frame right here and it has to be 18 by 18 okay perfect let's remove this kind of annoying all right let's get in there create a circle by hitting o all the way here and another Circle by hitting o and what you want to do is you want to click on this and drag this here and I'll flip this upside down and after this you want to drag this until here and then you want to increase the size all the way halfway halfway through and now increase this size halfway to the top and now create another Circle put that in here select these two and hit subtract and now set this color this front one we want to select the washed purple uh 500 and we're going to select blue 500 for this one right here perfect that's our main logo and we also have text in our logo so let's put that Cypress and we want the C to be small and a little period in the end and make sure the typography is set to H5 okay now one thing we needed to make is some my new changes here which we didn't do and we're going to do that right here because I wanted to show you this so let's say you wanted to add some extra properties on this okay but you already used this typography well you can unlink the style right here and now you can change it so we want this to be bold first select this one right here and create an auto layout so shift a and then this one to and another Auto layouts and let's also Center a line all of this and let's just do space between so if you ever need to move it for some reason we can now we got to create a component out of this so I changed it to a logo go ahead and change that too and hit this create component right here and hit create variant okay our second variant is not going to have this Cypress right here and we can just delete that that's okay and what we want is we want this instead of to instead of fixed width to be hug content so it's in the side and we're going to hit K which is a scaling tool hold shift and scale this a little bit okay in case we need to make some sort of I don't know we need to show a bigger logo we can use that and to create a smaller logo we're just going to do command D for this Cypress right here and this one is going to just have the logo by itself and let's change this back to hug contents perfect now let's change the property very important we're going to just call this a logo we'll just call it type okay and let's change this to uh with text okay and we'll just say large larger icon no text these are bad but we usually want to use properties okay like something we used here but I'm just trying to show you different variations so that you guys can implement it as you need to now the next one is to create our nav link so create nav links just hit t l and say link okay and let's give this a text style and we're going to give this the uh P tag I'm sorry the H5 tag okay and the first link is going to be white so let's create a let's do shift a first okay and then create a component out of it and a variant for it and the second one the color is simply going to change to let's change this color right here so remove this change the fill we're going to set it to neutrals seven okay perfect so now we have our link component let's also change this to link and make sure this is set to hug contents so when you change this every Everything Changes okay the next one we need is a pill component first thing we need in a pill component is some text and we're going to call that section title okay like this hit shift a to create an auto layout out of it which will create a frame for us and now select this text make sure it is set to paragraph okay set to paragraph change this color to purple 50. okay to primary purple 50 right here now select this Frame and we're going to give it a stroke and the stroke is going to be a gradient okay of the brightest purple we have on this side okay on this side so the brightest purple which is the purple 500 okay I'm sorry this one is going to be the blue one actually so blue 500 and this one's going to be the purple 500. let's also reduce the top and bottom padding a little bit right there and let's give it more padding left and right and let's give this like 28 pixel of um border radius so that we can create that full round Edge okay and let's change this to pill select this and create a component out of it and now you have the pill component also ready to use I hope you're still with me um if not grab some coffee actually this is empty I'm not gonna lie to you okay um but yeah let's create our nav bar now okay so first we need a logo for a nav bar so let's go in here and search for logo and let's drag our logo right here perfect and now we need some links so let's search for a link so grab our link component right here we're going to put in the center and now we have this link here so we're going to command D duplicate it and create five links here and the sixth link we're going to move it to the right side so go ahead and just change these links to the following okay product pricing about resources download and login okay pause the video go ahead and do that all right and then next we need the button in here so we're going to get the button and we're going to drag this button and put it in here and now let's look at our design because it's been a while since we looked at our design so let's see what we have here so first it looks like the default State okay without the icon so let's do that and it looks like it has this border around this so let's set that up okay so let's go back in here to our components and let's move this here and let's select this button and turn off the button icon and we want to make sure our state is set to default okay perfect now select these two shift a to create an auto layout and Center align them okay now uh and double click it so it does space between all right now click these and hit shift a again which will create another Auto layout double click this again this one too shift a okay so if you guys don't know what this double click is is basically figma release this new update where you can now um set some set the spacing of the children to space between uh by just double clicking okay so previously you would have to go in here and there would be an option a drop down now you can just double click it so much faster okay and let's change this text to sign up because we want users to sign up another thing I I notice is the padding is actually a little off so if you look at our design we have a lot of padding here okay so this looks like a little custom thing to do all right usually what you would do is you would have a spacing UI system and if we do all that we're going to be here till the end of 2023 okay so let's not do that we're going to click here and we are going to go into this and just increase this padding now just select all of these okay where's that right there and this one shift a again and that becomes an auto layout okay okay and all you want to do for the navbar is the left side has to be set to fill container and left side Center aligned and the right side has to be set to fill container and right side Center aligned this one in the center will again it can just be this one that's fine this uh Center alignment right here and you can make it space between and this can be fixed go into our logo components and change that to left a line for the whole nav bar change this to Auto it was hard coded to change it to Auto and double click this and make it space between okay this can be fixed that's okay so that when we shrink it everything is responsive now click this one go to stroke create a stroke go to our neutrals and you want to do neutrals 11 okay neutral is 11. click on this and create a like 28 30 pixel border radius and now you have this really cool effect and we're going to do the same thing for our nav bar too so I notice in our nav bar we have this line here it's not shown because of the resolution of that image go to stroke click this change this to neutrals um 11 again okay the same thing and you also want to change this to bottom so click on that and change it to bottom so click nav bar and create a component out of it create a variant out of it okay and let's create this mobile menu okay create a rectangle make this around 18 pixels wide and we're gonna do that right here and set this to 2 pixel height duplicate this bring it down duplicate it again and you're pretty much done just group this command G and we're going to remove it go into our right side Okay click on this and right here and paste okay it's gone to the right if not you can drag it okay perfect and now we don't need this anymore so what we can do go here to the layers panel with this uh with the link selected click this Boolean property and change this to false and create the property all right boom it's gone now you shrink it now you're on a mobile nav bar and the next thing we need to do is set the variant property names we'll call this type and let's go in here and we will change this to mobile and change this to desktop if we need more we'll come back and create okay this is how you're supposed to create a component design okay you don't want to start building everything and then realize you don't need most of them so let's go back to the Cypress page move here to oh it looks like someone removed our fill so let's create that so let's go here click this go all the way down and click on brand dark okay do the same for mobile remove the fill brand dark and now we need our nav bar so let's drag our nav bar let's attach this to the left I'll tell you why we're not attaching it to this uh right now but just give me one second so yeah attach it to the top left and right and now we want to set a left and right constraint you can do this by hitting command and click clicking on this and it'll create a constraint for you okay so that now when you shrink the page it is going to become completely responsive so the other thing why we did this is that we wanted the line to be across everything but we wanted the padding only the inside spacing to shrink to the grid okay so to do that just click on this go in here and decrease it until it reaches that line now the line also is there and the items are perfectly aligned with the grid if not the line would be stopping like weirdly 40 pixels from the left and right we don't want that right can also do Control G to remove the grid to take a look at what your you know your beautiful artwork looks like you can get out of that too and you can get into it like now mobile for the iPhone 14 same thing drag it in there we're going to change this to mobile right here snap it to the right and to the left we're going to drag it to the top and I'm going to leave this up to you all right go ahead and pause the video and uh try to get the contents that are inside towards the uh towards the left and right of the grid alright awesome if you couldn't do it this is how to do it just change the padding to until it is inside perfect done do Ctrl G and now you can see the elements look perfectly aligned the next thing we need is the pill so let's go get that pill component let's go to assets search for pill hopefully we named it or else we're not going to find it drag the pill here and do option H to Center align we're going to bring it up a little bit here right we're going to change this title to your workspace perfected so you can just it's just text so you can just put Star Emoji right there and say your workspace perfected okay color of the text is incorrect we need to go change it so let's go to the component and change it to purple 400 okay I just change it right now so I'll show you how to do it go back to components click on this right here okay and change this to washed purple 400 and there you go that looks nice so I just created some text by clicking T and clicking on the screen and and we're going to Center align this and now we're going to go to typography and change this to desktop H1 and let's just hit enter and we need to Center align this of course and do option H bring this down a little bit to create our CTA we're going to drag a button here change it to secondary and we're going to remove our icon okay and next thing we're going to do is right now we have this here so let's just change it to Auto let's change the text in the center to this and now you'll realize that this button does not hold everything that's inside it change this to hug contents okay so it kind of hugs everything inside it and perfect now we have our little CTA button there looks great can also increase the padding left and right if you want a little bit more we're going to skip this for now we're going to come back to it let's just create a rectangle right here for now to kind of simulate that and we'll come back to that in a second I already have these icons set up you'll find these icons in the asset folder that you're going to download in the description so go ahead and do that and get these icons together and all we did is we created an auto layout very similar to the Cypress logo okay if you don't know how to do that go back watch that section and create that again once that's done you want to create an auto layout between all of them so they're all in an auto layout here set them to the edges of the screen and set the constraints to left and right and tops let's duplicate this text right here bring us to the bottom and we're going to change this one to H3 right here and we're going to call this and go ahead and just rephrase it to say this keep track of your meetings all in one place and we also need a pill component right above this one and that is going to be about let's see about 15 pixels from this name okay and you can do that by clicking on an element and holding option and moving around okay it'll show you change the copy inside here to say features let's create some text and just say whatever something for now and let's change this to P desktop p and now change the color so go to fill to washed purple 700 and let's change this copy to say the following let's just create a square to kind of resemble that the next one is trusted by all Ctrl D bring that right down and now we want to change this to testimonials trusted by all let's also move this about 15 pixels from the top and let's change this copy to say this okay join thousands of satisfied users rely on our platform now we got to create these testimonial cards so let's go to our components section and the first thing is if you look at it it has a Avatar logo with the name and the username so let's create that first go to components hit o create the Avatar logo this is probably a little too big let's hit T and say web prodigies change this to desktop p move that right here duplicate that bring that down change this to at web prodigies change this to italics and you can do that by unlinking this text style and going to regular and changing it to italic and now we're going to use unsplash to create our Avatar okay so open this plugin click on the circle and just type in person for example and just click anyone that show up Okay click on this and now change the color to washed purple 600 and change this one to washed purple 700 okay done let's just arrange these make them look nice select both of this shift a to create an auto layout and left align Center okay nice and now click this Avatar click all of these click this Avatar and click this uh Autoland hit shift a again to create another Auto layout okay we're just going to create another text right here bring that here and we're going to change its color to washed purple 800 for this and for the text let's set it to Auto width and change the text to fill container so I can fill the container and now you can increase the frame and you will see the text moves now let's create some padding let's give it about 25 pixels on left and right and top and bottom and now increase this a little bit more and now let's create a border and we do neutrals 11 okay the same as our um as our navbar I'll give this 15 pixel border radius and I fill so go to fill and let's change this to a gradient and give it a nice fill of anything you really want does not matter I'm going to do the same thing we did for our button okay let's go ahead and do that that's that looks pretty good right don't you think so let's create a component out of this and now we can reuse these okay testimonial card right there now let's go back to our website and search for testimonial card let's duplicate it move one to the right duplicate it again and let's select all of these move it this way okay and let's copy paste this one here too all right and let's move it to the center and now let's create another Auto layout shift a out of them and do command D and bring this down and now you can move this a little bit to the left to create that sort of sliding animation move this a little bit to the right copy this title paste it below and now we need to create these card components this is a little more trickier but we're gonna do it we're gonna create the header here and we're going to change this to an H4 desktop tag and let's select neutrals four so we'll just call this plan drag the diamond icon um and let's keep it up here for now I'll show you what we're going to do with that the next thing we need is the amount so I'm just going to copy paste this right here and we're going to change this to dollar sign 12.99 for example we're going to change this text from H4 to H5 now let's also change the color from neutrals 4 to neutrals 6. and now we need another text right by it called month okay it kind of tells per month Mo or we can put that inside it no problem let's extend this a little bit and let's set this to auto so that we can move it around and let's set this side to fixed because we don't want it to wrap okay and let's change this from H5 to P all right and let's move this a little closer also change this color from fill to to the fill neutrals eight you don't want people to focus on that too much let's just copy paste this below here and call this build annually duplicate it right below monthly okay now these two need to be a little smaller so what we can do is unlink this real quick and we can reduce the size to 13 pixels actually this can just be one line we don't need a whole different element for that go into assets grab a button from here put it right there so we don't need this option right here so we're going to remove the icon let's create these options everything and free plus okay and we change this typography from H to P okay perfect and we can also set this to 13px I'm just going to unlink it right here make it easier and now we're going to put everything in plus and what does it look like here let's take a look at this again everything in free plus and then we have this button like thing okay but it's just an icon and an element we're just going to use our button component and we're going to take out the border and background on the text we're just going to unlink and reduce it to 13 okay we're going to remove our fill and our border okay and now we're just going to change this to uh to it's a I think it's a check icon right a check mark and let's uh paste what we have in here and make sure this is set to 13 pixels and we're going to change the color to neutrals uh six and let's just simply duplicate that bring it down let's select this and select the text do shift a okay this button can be by itself that's okay everything in free will be here locked with all of these equally spaced okay and we left aligned everything Center left aligned okay this way you can create some okay margin and we're we're just going to convert all of this to an auto layout and for the spacing between all the elements let's reduce it a little bit now let's give this some padding so let's give this about 20 pixel top and bottom 20 pixel left and right okay I think this is a newer feature um I don't find a lot of videos on this so you can now absolute position elements uh align this text to the right side so that we can sort of bring this down a little bit so now this is positioned absolute okay and it looks a little similar so this one has to be um fill container okay so now it's filling the entire container and the text inside it has to be Center aligned for the Border we're just going to set it to wash blue 900 okay and now let's give this a border radius of 10 pixels let's see what that looks like all right it looks nice and also let's give it a little more padding left and right so let's make it around there also I think having the plan in the center looks a little weird so let's left align it okay so click on it left align and what we can do is maybe we can move this icon to the right side this actually looks so much better right because this looks a little odd oh that's a little broken don't worry about that we need to create a component out of it and we also need to have the ability to turn off certain options for example we don't want this um we don't want the monthly option and things like that so how can we do that so click on this create a component we're going to call this pricing card okay we're also going to create another variant out of it we're going to click on this section go to layer click this and show monthly and we're going to set it to false now just gets removed and also let's move this to the left by doing left align and also for the button let's change the CTA to get started okay let's copy that do the same here in the free plan we're probably not going to have this option so we want to have the ability to sort of remove this layer create property for it and we're going to say plan bonus okay and we're going to set it to false so it's not there anymore okay perfect so this way it looks like we have more stuff in the free in the paid plan all right done cool now we need to change the states so let's go into the pricing card and change this property to type and we're going to call this the paid okay default now let's say pricing we drag and drop it in here and now we can adjust it put it wherever we want okay so let's create two bring this here this one I want it to be the default plan change this first to zero and I just created a little space there so it sort of looks the same and this can be done in HTML too call this free plan okay another thing is in our component we want to set the text to be um not fixed with but fill container okay cool we can do the same for this one too do it like that change it to fill container one thing we can do is we can go back into our component and we can also set this icon so select the icons and go in here to this layers panel and create new property and say or just just say icon okay and we'll set it to True by default like that we can just turn this off here because we don't want it for this component okay so it kind of brings the focus to the um the Pro Plan okay also in our components let's try to do hug contents and increase the padding a little bit more okay to give it more space alright so I went ahead and created the footer 2. go ahead and challenge yourself to try to build it on your own it's the exact same thing except there's one thing that's different and I want to show you exactly what that is okay so you remember how we built this navbar at the bottom bottom we're going to build the same nav bar but instead of it being a horizontal layout it's going to be a vertical layout okay so just switch it to a vertical layout after you do the auto layout so that's about it so go ahead pause this video give it a shot this is a challenge for you so take some time build it and then continue this video all right hopefully you got it right click on your footer and make sure to lock the constraint to the bottom okay you can also lock it to left and right to create more responsiveness but now when you increase the size of the page the footer sticks to the bottom and doesn't keep you know showing up on top now we need to create this gradient effect you see this blue gradient behind this can be done in html2 you just need to do position absolute so how do we create this first let's create a circle throw it right here send it behind and you can do that by hitting the um the opening square bracket key on your keyboard and now what you need is you need to remove the fill and we need to add a color so let's go to the purple and add um primary purple 700 okay we're going to create an effect change it to layer blur and we're going to increase this like maybe 150 and now all we do is just reduce the opacity okay so just create that uh slight bit of a blend and now you'll realize there's one more thing we missed out and I wanted to leave this for the end because these are all small touches okay this card component also has a background color okay it's sort of transparent and creates this glass morphic design how do we do that well it's actually really easy so let's go back to the components file and let's head over here and what we're going to do is actually let's just copy this I've pasted here and send this behind so that we can see the effect in action and now you want to click on this card component and this card component too we need both of them go to the fill section and we're going to change it to Brand dark so now you can't see through it now all you have to do is unlink this and reduce the opacity forty percent looks perfect keep it around forty percent and now you want to go down to the effects Tab and you want to create a background blur so now this creates this glass morphic design so if you had a circle and it was behind this as you can see it creates that really cool effect right so there you go so now if you go back to your website you will see the design persist and the other thing I noticed is the free plan does not have the border so let's do that as well if we go back to our components if you go to our free plan so click on your free plan go to the bottom and change the color from washed blue 900 two neutrals 11. let's copy this circular pattern and paste it for our other designs too with different dimensions of course so something like this maybe looks awesome for The Trusted buy and um it's crazy that such a small change makes such a big difference right for our header we're going to also paste one behind the text but we're gonna make it very subtle okay so unlink this and decrease this a little more to okay right around there so we're gonna leave parts of this as a challenge for you okay what I want to show you is how to build these uh really cool drop down Care Systems okay and we're going to do that with prototyping and animations and things like that so that you can take your designs to a whole different level put in your own creativity and make this customized for yourself okay all right so let's create this cool drop down animation head over to your components file and what you got to do is first plan what the component is gonna look like so from the looks of this they're all the same thing but they just have different icons toggled on and off looking at this we know first there are two possible icons that can be there on the left side two possible icons that can be there on the right side so we got to take this into consideration while um when we design okay I've already put something down here so it makes more sense to you but for this to work we need a default and an active State okay we which means what it would look like and now what it's going to look like when you click on it so we also have this dark color on the default and the active color on this one and we also have this flipped the other way when it's active Okay and we can also remove these icons so what if this was a page a page cannot be um Extended right so it's not going to have the Chevron icon anymore so we can have the ability to remove that icon cool so what we did I'm just going to explain it we created a frame we created three elements here used auto layout to kind of put them together and two elements here Auto layout to put them together and both of these again another Auto layout okay so that's how we have this Frame same thing we duplicated and changed the colors this one we flipped it the other way if you want the colors this is what we changed to so we made the darkest colors change to neutral eight and the lightest color change to neutral seven okay okay and now we need to rename these so let's call it drop down slash default and we'll make that all capital and let's go to the end copy that and paste that in here active Okay select all of these okay and then hit create component set so let's see what the options look like right now drag it right here and you can change this from default to active but we want to also have the ability to remove every single icon so this is how we do that we select this we select this and now we go to the layers panel and click on this and say c-h-e-v-r-o-n okay Chevron and by default I'm going to set it to true so let's go in here create another layer create property and and just call this icon and then we're going to click on this and then go to layer create another one and say options click on this and this one here and go back to layer and call this add okay so now what we can do is we can toggle each of these okay check that out we can remove it if it's a page we can remove that if it's a folder um we can probably remove this option maybe have the plus I don't know we can do a bunch of things to it if it's the account like let's say the account drop down that you would see at the top of figma right like right here then we can probably only have the icon too go to layer and let's select the text go to layer and just say text okay and you can also set the text as a property so you can change the text to but we just want to remove it we're not doing anything crazy with it okay all right so we want to have the ability to turn off different parts of this okay so here's what we did we basically selected this and this and we created a layer for it okay you'll see like a you'll see an icon like this this right here we created that and we set it to True similar to the button icons okay and we did that for each of them including the text and we also did them for the left side and the right side okay so we did left element so for example we did left elements again we created another layer and we also created write elements you see here it says write elements so we can hide the right elements if we want to or the left elements too now you may ask why do you need to do that if you're already hiding the elements inside it right because if the container is set to hug contents it should just collapse right but for some reason it is not going to collapse and this is what happens let me show you so on the right side if we turn off the more it shrinks perfect but if we turn off the add it goes back to default and fills in the space even though it is hug contents not sure if this is a bug or this is what this is how they want it to work but this is what we created okay and then you can remove the right elements but you will also see this purple icon thing here but that's okay it's just some sort of a glitch or a bug but if you preview the element that error no longer exists okay you'll see that it's gone so that's why we created left and right I hope that makes sense take a look at this all right you see this is possible now okay so let's see how we can create that drop down animation since we've already created these components we can just reuse them by dragging them here okay right here as you can see and we need to get a bunch of the other components too okay so let's put this here one two three four five we're going to create an auto layout okay and we're going to create a component out of this and the reason why we did this is now when we make a change here for example I wanted my default to not have a background color right you can see it will persist everywhere only select the children and you want to remove the plus icon and then you want to remove the drop down so remove the Chevron and now you want to select everything and do shift a to create an auto layout and now you want to select only the children hit shift a and then select all of these and hit shift a again and now what you want to do is you want to set this to a fixed width so that when you change this it moves but we need to change this one to space between so now when you expand it it is responsive now for the bottom children just change them to um fill container and select each of these space between Center you can also probably do that right here actually yeah let's do that here so space between center now your children have to be aligned to the top left corner so that when you shrink this it Clips the content of the children and then create a component and a variant for it in our first variant the Chevron is going to be up here that's okay second variant we're going to change this to active States okay and now for each of these elements go ahead and just hide them all right and you want to select the um the frame and just shrink that don't forget to also change this to clip content and now I want to click on this okay hover to the left side drag this onto this and make sure this is selected to change to and let's change this to Smart animate and then click this interaction and drag this into the top also if you're wondering where the Prototype options are you need to select the tab and then your options will show up okay so now when you go to your preview mode okay and you click this check that out isn't that awesome look at that all right so let's go ahead and build this image out real quick we don't need to build everything because it's already going to be cropped out but we're going to still have some content at the bottom so it looks like there's something there you got to move out here first and create a frame okay let's do the sidebar first go ahead and grab our drop down menu not the drop down the drop down menu okay and let's change this background put the brand dark so we can see what it looks like first change it to the active state and we're also going to remove this background I don't want it in here we're going to click on this header we're just going to scroll to the bottom and remove this background remove the Chevron remove the add icon and this looks okay to me except we need to change this icon now to the drop down okay so that is the Chevron duplicate this and we're just going to change this to variance 2. let's also create another variant 2 and push that right below this right here and maybe change this text call this web prodigies okay so I went ahead and just changed these icons and I realize I do like the indent so I'm going to go back into components select all the individual children and then reduce the size okay and then click on the children frame okay and just set that to top right increase the size a little bit also to uh for the children item so that they perfectly fit right all right much better right and for this one I'm just going to change this header to the default header okay so let's just duplicate this one right it's already done for us why do we have to do it all over again first what we're going to do is we're going to select these two and create an auto layout so select these two create another Auto layout snap this to the top like a sidebar we're going to go to the fill and we're going to chain change this to neutrals 12. wrap everything here in another frame and select the Big Frame and just convert it to an auto layout and now you want to set the big container to uh a radius of 40 and then we need to do the top navigations so let's just use a drop down here we'll bring the drop down right here let's turn off the Chevron plus icon and more and let's turn off the right elements left space between let's change this one to my work space and hit a space and put a backslash okay let's duplicate this move it to the end and change the text to clients and now we're going to change this from fixed to hug contents and the same for this one too and select both shift Auto layout shift a I mean and change this to Auto and set this to Center space between so now when you move this it's going to move okay and now we're going to constraint this to the left side so this is sort of responsive right Perfect all right let's put this text here clients and let's change this to desktop H3 and let's also grab our icon so this is a person icon so let's grab this person icon put it in here hit K so you can scale it up a little bit click both of these and make an auto layout out of it Center them and place them on the left side actually let's change this to H2 I think that looks better okay let's make that H2 and let's set this to so change this text also to wash purple 300 okay let's just go to the components section and we just copy this part I'll paste it in here drag it to the center and then also let's go to our UI system there's some text here you can use lorem ipsum if you'd like I'm just gonna copy this and paste it here okay you can do whatever you like no problem I'm just trying to speed up our workflow alright and let's change this color to wash purple 700 and maybe you can set it left constraint so that way when you shrink this side it all works like responsive design so now for the other frame remove the fill okay and click on are neutrals 12 and you're going to unlink this color and change the um the opacity 80 okay now you're going to select this one right here and unlink this color and reduce this opacity to 60 percent let's move this stuff a little higher on the page okay now go ahead and shrink your inner frame a little bit more okay and let let this dashboard kind of cut off frame and hit the heights to hug contents as well drag this into our desktop duplicate this Shadow put the shadow to the right Edge and the left Edge okay and also bring it up to 100 percent click on the Big Frame the outside frame okay that we're using as a border and you want to reduce its opacity all the way to like 30 percent click the inside frame now and reduce this opacity to 30 percent and we also have to do the glass morphism kind of thing so let's click the inner layer put a background blur bump that up as much as you want and now you want to select the outside layer and also add another background blur on that one too and set this to be a little higher that way you can kind of see um the effect also I want to kind of reduce the shadow more towards the center right here and we want to reduce its blur a little bit so let's set it to 60 pixels and increase this to 70. extend this so it kind of covers everything also for this inner Square I want to increase it to 45 okay create a rectangle by hitting R change this to gradient this color we're going to set it to 100 percent this one we're going to set it to zero percent for this color we're going to scroll down and select our background color if you remember okay and this we're going to change it to Black and now what we're going to do is increase the dark side a little bit just a little bit and then we're going to get out of this and then click on the rectangle and increase it a little higher okay and it looks like it's creating a line if it does create a line you can go to the top one and reduce it a little bit create a circle put that right in the center and we're going to set the background color to white I'm going to reduce this opacity do background blur and let's increase the blur as much as we can so I'm going to put this opacity to 20 and I'm going to change the color actually from white to sort of uh like around here okay you can select this color if you'd like so you can go here and click on the polygon okay you can draw a polygon in here and now change that to position absolute as well bring that right to the center rotate it 360. okay and give it a border radius washed 500 drop shadow and set the color of the drop shadow we're going to set the color of the drop shadow to one of the washed Purple colors all right we're going to increase the blur and move it down a little bit alright so here's a challenge for you go ahead and try to build this one out this is a little more challenging of course but it's pretty much the same thing guys okay try to go ahead and build that one out okay so for mobile this is all you got to do okay copy the text paste it in here okay let's put this edge to edge okay when I mean edge to edge I mean grid to grid okay left to line it and let's change this from H1 desktop to H1 mobile paste the pill component in here and then let's get the big button okay paste this button in here so what we can do is we can hit K and we can scale the button okay and let's move it to get it perfectly in line with that okay now here's what I would do for all of this okay so I would select both the gradients along with the box and this one so you can move it all together okay and we're going to do command G to create a group copy it paste it move it in here okay hit K and scale it down a little bit let's put our clients right in here too so we're going to take all three including this copy it paste it in here and align it with our grid and let's change this typography to mobile p and let's change this one to mobile H3 left align that bring this up to and bring all of this up here again we're going to create a group out of this K to scale it down okay and now you can just hit V and move it to the sides again okay to create that effect not gonna change the testimonial card sizes okay we're going to keep them the same mobile H3 and the text becomes mobile p and let's put this to this side for our testimonial cards what I'm going to do is I'm going to create an auto layout out of this dude also we need to change this text here so let's change it to for you okay that looks nice copy it and just paste it into our mobile drag it all the way to the bottom and let's do the same thing for this okay go ahead and do that yourself okay awesome so hope you got this done and this we're just going to change it to a vertical layout copy this one right here now we're going to shrink this to the edge move a lot of this padding that we have here to the edge of this screen let's extend this so we can take a look at what we're working with change all of this to a vertical layout here's a new feature in figma because we used auto layout we can change it to a a vertical flow but we don't want to change the vertical flow anymore we want to use this new feature called wrap you see it basically wraps the elements to the next line to move the footer back down and we're going to lock it to the bottom of the page that way when we extend this the screen size our footer will also move with it and that's it guys we are done with both of them look at that they look amazing don't they I hope you enjoyed that video don't forget to hit that subscribe button if you want to see us convert this insane design to a full stack production ready application

Channel: Web Prodigies

Views: 36,050

Keywords: figma website design

Id: yC0JPJ2Uf6k

Length: 71min 42sec (4302 seconds)

Published: Wed Aug 30 2023