Figma TUTORIAL – Full Website Design in 63 minutes…

Today’s video is gonna be a juicy one a Good one a banger because we’re gonna Build an entire home page for my own Brand gustanson.com and i’m gonna share That with you so i have a little bit of The the research that i’ve done as i Always do i start with my beautiful Hand-drawn wireframe the layout And then i do a little bit of research On dribble so i go here and i go web Design and i look for the theme the Style the feeling that i want for it so Something like this may be a little bit Flashy modern blue gradient as the the Foundation for the page And then i got my colors here so we want To keep it clean we want that contrast Color to be blue And then here’s what it looks like as Gradient we got my logo White and Dark so we can use it on both Backgrounds So first thing i’m going to do Is i’m going to start with you can see Your logo support email i use my 9p Wireframe here promise problem process Product all of that So i’m going to show you how i design an Entire Home page we’re going to Use the color picker right there let’s See if we can use this as the And sometimes i want to play around with

These i don’t talk a lot because My man oh that’s right we need the Layout grid Columns 12 White Three percent One is actually enough Center 75 30 and by the way i’m using 1920 To 1080 as the frame Size so you can see Got the Logo right there aligned to the left and Then we want The text for this so Let’s actually create the text styles as Well this is just for the background Behind it i don’t know if we’re going to Use it let’s delete it for now So let’s do the headline first Something like that half the you can see From the The Grid There we go and then Headline Goes here Gonna crank this up to 92 maybe And then i want to use montserrat Black And Let’s see I might want to do a

Actually you know what i want to do i Want to do a full width Center you can also center here boom so You center the text here you center to The frame Right there Linear let’s do so we have 100 White at the top And then The blue Right here Something like that and then maybe even Add Drop shadow Blue Let’s see 30 Opacity A blur of maybe 30 Or 50 And then 10 maybe So this is pretty pretty big let’s do 82. that’s probably better we can change This afterwards but you can also select If you want this to be aligned to the Top or centered centered so now i can Just shift it like this We’ll keep it like this and then Duplicate it but first We can actually i’m gonna go bold and Use big headlines on this one So You can create a text style and we can Call this

H1 montserrat 82 And then we can have a smaller one Afterwards so World Class sales funnel Yes you can see that’s too big Let’s do 72 And 72. Yeah that’s better it’s still big but It’s it’s better So now we can just choose the same one Here Sales funnel tools Templates And trainings Even that’s too big so let’s do 62. So when i’m writing this i’m keeping the Caps or shift down so i get all cap but You could also just type in regular like Templates And then you can go to Here and you can set it all Capital letters in the case uppercase Type settings Right what class sales funnel tools Templates and trainings Got the Drop shadow there as well Let’s see if we make it even Like 50 Percent

Yeah we’ll start with this and then we Can decrease it later Maybe even On this one And what i’ll do with these is i’ll Either create the css for in the page Builder Or I will just group these and Make sure that we don’t have a lot of Empty space And i can download this as an image and Upload it to any page builder any site Okay so now we want Without any effect I’m just gonna do solid white text And then i’m actually gonna do No type settings And i’ll do regular for this one Support customsong.com And i’ll do On on this one We can align it to left And then add that right there And then i’m also going to right click Plugins Iconify And i want to add an email Icon right there Make this blue So now let’s get a Headline for this one too Make this one maybe 32 And then

This is gonna Function as the sub headline Right here I think i’m gonna do white text on this One Yeah okay so we wanna set this to a new Style guide H2 Montserrat There we go 32 I’m gonna give away something so like I’m gonna use an image Somewhere Here And then Maybe even all the way here it’s gonna Be an opt-in at the top of the home page So Get a free Funnel template and then actually let’s Do this so we create a new Create new text style And we call this Paragraph Onset 20 And now i can just choose that right There Without Any style i’m gonna drag this down to Maybe get Let’s move it to the top I’m going to right click Plug in laura mipsum

And auto generate well that’s way too Much So I’m going to [Music] Set this to maybe 30. That’s enough Regular Medium not regular is good 20. so we got a Sub headline get a free funnel template We can add some text here later And then i’m going to actually Collect email you must here as well so Let’s do Get a free funnel get a free template Just making it shorter and keeping it Within This range right here we don’t need Radius for the opt-in I think i like how clean this looks Let’s do 10. [Music] 10 pixels in between and then we need a We need a button as well [Music] So this is going to be the image of me Something with funnels and then You know we can do here We can Make this [Music] Um your name Your email address

And then I’m just gonna copy this for The email and then grab Another one for the name Name What i like about both these is that i Can Customize the color because it’s a Vector format Your name your email address and then This is the button so probably gonna be A little bit bigger And then I’m gonna make the This one a little bit brighter A little bit darker So i’m gonna do Button text I know i can move the text above i can Drag it above the rectangle but Sometimes if you just do command x to Cut it out and command v so like Like copy paste or cut and paste I can just add it in here because i Click this then paste it Get a free template Download template Download the funnel So let’s make this Actually let’s make it 20. 20 same as this All caps And then i think what you can do You hold this one down

And shift and press the rectangle you Can click auto layout so You can add Let’s do 30 And then let’s do 20. You can add the padding on the On the button from the text and so now If i drag this out sorry if i Add the funnel Template You can see that it’s not going outside Of the the button it stays within it So pretty cool download the funnel Template I think what i’ll Do is just Center it to keep it same With as this one Download the funnel template let’s move This up a little bit shift up there we Go All right so now we need an image here So i got my my folder of images here Ghost and homepage and i did a photo Shoot so we can get some fresh images And then i also got Some client logos social a few different Graphics that we’re gonna need so what I’ll do Is i’ll drag in The one that i’m gonna use So this one for example and hopefully it Finds pretty well like the The background and me so that it can cut

Cut it out but what i’m going to do Is i’m going to use the plugin remove Background And i’m going to run that And see if it can identify otherwise i Can just use something like clipping Magic and and that will do The job as well But let’s see It did Remove the background or what is this Is it just loading i don’t know why i Shrunk that quality that much what i’ll Do instead is i will just drag in the Same image here Because sometimes it can Decrease the quality of the image and Just delete it and delete this as well So what i’m looking to get is an image Of me In the middle and some funnels here Because i’m talking about world class Sales funnel tools templates and Trainings So i’m going to go to smart mockups All mockups and then Screen layers so i want these right here On the sides so the way that this works Is You’ll see The images for both these you can upload Them in here or you can also add your Full time Funnel designer

And then browser Window we don’t need full page capture We just need the one that we’re going to Use for this Section Capture And then that’s going to capture the Design from the page And then you can still go in here and Edit to make sure that it’s uh the right Proportions and everything you can zoom In zoom out all of that It’s going to give it some time to load There we go click here to edit Fill and then you can click zoom in And boom when you’re happy crop and There you go so then when you have both Of these you just go customize make sure That the background is off and then Download Right I’ve gone ahead and done that already to Save us some time so i’m going to drag Those in here Make them smaller I’ll try to make them fit Within this Something like that And then Yeah this is better so you can see the Quality is better i’m gonna crop it Actually i can crop it in And fig my butt if you go original you Can see is what it looks like that’s

What it cut out and so if something is Missing or it cuts something off like For example my ear i could just click This and make sure that it includes it Same thing with something that i don’t Want i can just click red and it’s going To remove it So now Just Download this And drag it in here and by the way you Can organize all of this way better Right like i’m just i like to just build And focus on building but some people Prefer to organize them really well and Group them together like for example Group these boom and call that group Ghost and Banner but what i’m gonna do is i’m Actually going to Delete this And Ungroup this And go into photo p So I’m gonna drag in my image I’m gonna find the tool that i always Use and then i’m going to Make it A little bit bigger And hardness down to zero so if i do Right now you’ll see that it cuts it Just as hard and what i want is i want a Smooth

Something like that A smooth transition to the background And so now i can click v File Export as png And just save it Drag it in here and now It fades into the background instead Which i like it would be different in The if the background like cuts into a Light background Sorry if the image cuts into something Like that like that would be different And then the background would be a light Background here but it’s not And it’s gonna be a dark themed page So i’m gonna keep it like this what i Could do Is I could do the same for My two funnel images so i can drag in Let’s start with this one Drag it in 500 Down there There you go And then i’m going to drag the other one In here And do the same thing here Boom File Export as you get the point So now i’m gonna delete these So you can see the difference right It’s fading into the background so this

One is 289 let’s make it maybe 300 This one 300 And then that will do As the main image Actually i probably also want something Like My name Right so i’m gonna make one texas ghost And sun And then one Saying Uh ceo Freedom funnels So i’m gonna make this one Black And this one like 12. Let’s see if we do Rectangle Move it up Here Blue Linear What about that type of linear i was More thinking From here To here Yeah i think that’s better this one will Just make it smaller so we don’t need Yeah something like that I could also just add my Logo in there Okay so i can see we have all of these Assets we have them outside of okay we Don’t need all of it

But all of this Inside of frame one There we go So we could use this one instead Let’s do that Just move this There instead I don’t like the Rectangle takes away the focus So anyways that’s good for now and then I think i also want something like we Want the same Blue glow So i’m gonna move this Underneath Me Make it blue And then effect Layer Yeah layer blur And then do 500 maybe no that’s too much Three Too much For if it’s a bigger one yes you can do 500 300 but for this 100 And then I can’t just grab this and move it down A little bit so maybe 50. we can change It later but that’s good for now and Then i’m going to open this again and Grab my clients Yeah let’s use these We keep it within this Let’s make it a little bit smaller i

Think that’s good and now i can click Command and just drag this down to keep Building there’s something missing here Though like it doesn’t doesn’t have that Final touch Attention to detail so what i’ll do Is i’ll probably just grab this Ellipse here You can see when i drag it outside of This It uh it pops out of the frame so i can Just as long as i keep it here and i Don’t go with the mouse outside It’s all good so Now you can see it doesn’t look good With 100 maybe 500 And then i would also move it Down Below everything [Music] There we go And maybe 30 Is enough and then we’re going to Duplicate this Move it here [Music] We can adjust that later pretty good Start there’s one more thing i want to Do i want to And i keep refreshing and starting over With photo p i don’t usually use photo p Anymore i use affinity now but i know a Lot of people like using photo p because

It’s free it’s Cloud-based and it’s easy to Access so that’s why in this tutorial i Wanted to use it So We’ll do 500. I’ll show you what i want to do I want to Delete Top Well that’s a little bit too much isn’t It probably going to do more Like that A little bit here to the sides I’m going to using the background image So now File Export as png And maybe this doesn’t work maybe it Doesn’t Look good So then you can just delete it try Something else but i am going to I’m going to drag this down All the way And then set this to 15 10 is that good Let’s check without the grid If it’s any more visible like if you do 30 then it’s too visible you can’t read The text and it takes away the focus so You want the background images to just Kind of be there to add personality but

Not add Distractions Maybe even put it all the way out there So now for like when i want to export This to a page builder i can just Duplicate this and export this section Without the text and images as the Backgrounds i would have this this This and the background color pretty Happy with that so far now let’s move on To the next section how i can help And what i’m trying to Include here is a few cards Now i need the grids again Let’s see three cards So we’ll do Four Columns And then what i can do I can go here And see what that would look like I think what i’ll do is i’ll actually Use this But Add a Blue shadow behind it 30 And then do 50 blur Maybe 10 100 blur 250 for now you can always increase it Later Duplicate it drag it here

One there And then i want to Explain sort of Not the offers that comes later but it’s More about Like how i can help any type of business Because it’s a home page it’s a funnel Hub that leads into other offers so how I can help Now I want To Use Let’s see This but as a Separate text Style so we’re gonna do this maybe I think i’m gonna do A white text here as well And also without the shadow yeah What if we do like 10 We can change it later i want to keep This to the left Something like that i think that would Look that look clean And somewhere here And maybe add some images behind it i Think that’s going to look clean so We’ll do Headline For all of these And then Just copy paste the lorem ipsum down Here

Okay so now i want images in here so What i can do i can actually drag In a few images so Let’s first name these so we have like a Good understanding of what we want them To say how it can help so funnel Building Funnel design I call it funnel design and then Client systems so this would be Like my funnel agency this would be my Education And then final design client systems and Then traffic So like organic traffic how to get Clients how to drive sales I’ll call it revenue Revenue streams now revenue Income streams Phone design client systems income Streams yeah because i have i make a lot Of videos about like my six income Streams so on and so forth so we can Change this copy later i want images Inside of these so funnel design Let’s grab an image Like this and i believe you can just Drag it in here Right And then there we go and then you can Add A layer on top of that And i’m thinking we could do A linear

Something like this Is that too much Let’s do And this one as well If we do any darker it would be this one Right We can start with this And then we can change it later okay so Client systems let’s see Uh let’s see if we decrease the image to Like fifty percent That’s probably better And then this Will be a hundred percent Linear Funnel design client systems And then the final one income streams we Could add some more Relevant images like income streams we Could add something more about like Client acquisition and that sort of Stuff but I also want to make this as quick as Possible for you Image down to 50. Maybe you don’t even need it down to 50. Maybe it could just be A hundred And we could see Yeah i like that the next we have Is Promise the problem So the way i’m gonna frame this i think Is by the way when you keep shift down

And drag it you can Easily keep it the same place instead of Talking about the problem on a sales Funnel where you like specifically Explain here’s the one problem that We’re gonna fix with this offer is a Home page so I’m gonna say why Sales funnels Actual sales funnels Not websites And again with all copy you can change It later And so usually what i do is i have some Like even for this i have some idea of Like what i wanted to say on the page And then as i go in here for example These i can type these the as the last Ones because i know what i want to say About funnel design client system income Streams And we have more sections about it as Well So there’s uh Two ways i can go about this one could Be Like if i copy this And i just drag it down here one could Be images of me Right here and one could be like Illustrations And so i don’t know which one is going To look cleaner i do know there’s a lot Of

3d assets on ui 8 And i’ve downloaded some of these so we Could use some of Some of those Maybe some something like this startup In the work environment Or design if we find something that’s Like All about design there’s a lot of these Sites but i like ui8 a lot this one i Think it is Yeah This one i’ve downloaded okay so let’s Use this All right so i’ve downloaded it and what You’ll see when you download something Like this you can get it in a figma file Because you’ll see here you can see that It’s a figma file that comes with it not Just pngs so that way you can edit them So that’s what i have here and i’m going To choose a few of these And then we’re going to Copy them into the other this one copy It And then just add it here Make it smaller Delete this Move it up here And then I can here’s a cool way to change How these look if you want to use the The designs but you’re not able to Change the color of it

You can change it by going here you can Mess with this right here So you can change this Let’s make it a little bit Brighter You can get it down to Something like this tint Something like this And now I’ll just cut out any of the Empty space This looks pretty small in comparison to The image But we’ll fix that later So i’m not gonna take Your time on All of these we’re gonna add this right Here And then we’ll do One more And then the headline for this could be Sales funnels not websites So Problem is Here’s the problem With Old school websites I’m gonna talk about the problem there Actually it’s not gonna look good if we Don’t take Three of these or at least two Um I’m just making sure i have the right Tint and hue and color on both of them

I just export it and download it as png Because of the The glitch there with that not a glitch Technical stuff that i’m not good at Okay so here’s the problem with old School websites Instead Build an automated Marketing Funnel And then i can explain like how that Works and how that’s gonna get you Customers and sales because of the Automations the follow-up and all that We could even make these bigger 32 i Want to make these 42. Yeah that looks way better Here’s the problem with old school Websites Okay so instead do this And that’s gonna do for This section Okay so what do we have so far we have World class sales funnel tools templates And trainings Let’s go back to my drawing and see Got the problem the process okay so here We’re gonna do Something pretty simple [Music] Drag this out a little bit more The process Mode are proven

[Music] 9p Conversion method I think i’m going to do Let’s do 100 pixels And then let’s do three of these I’m going to try To do gradient For this as well Let’s move this up there Stroke White Linear And we’ll do Five Let’s make them a little bit bigger then [Music] We can change the stroke later [Music] You can copy paste or you can just keep Alt I don’t know what was what is called on Windows but on mac is just the alt Next to command So yeah we’re centered And then I’m just going to copy this Headline here Centered Centered Centered So this is our process of like How we work Two

Three And this could be opposite two it’s like Step one step two step three And then it’s like headline so what is The actual step You know let’s do that I know i can Paste it as Text only But this is faster step one two three And then this is okay so like what are The steps you know 9p conversion method Offer Actually i’ll I’ll call this three-step conversion Method because the 9p framework is a Copy design Most people don’t know that you need all Of these To be successful not not just design All right so now we need the icons for This as well plugin Let’s use iconify offer so money That is pretty boring i want something More Bank The piggy I’ll change the color of that in a Second Copywriting so right And then the sign Okay so let’s see Uh should we just do white

Yeah i think that looks best I was thinking if i would do Linear but nah They’re also so tiny so it’s better to Be visible Instead of fancy And also sometimes with the sign so like You can see this Is now in the middle if you just look at The actual icon but then visually This is the main focus right so i’m Going to make that the middle and then This doesn’t matter if it goes a little Bit outside and that looks better And then the piggy bank Actually i would love to make All headlines Gradient with The Blue behind it but it might be too much To read so that’s why i’m doing it for Main headlines But i’m liking this so far i might even Do A little bit of text Under each of these Nothing crazy but to explain because Otherwise it’s like offer yeah you need An offer But you need to offer that like some People say an offer that makes people Feel Stupid saying no Copywriting you need copywriting that

Focuses on the offer and then the sign That aligns with the copy Right and also increase the visual Perceived value of the offer you might Even do something like plus plus so it Would be offer plus copywriting plus Design But that’s good for now that’s pretty Clean notice i also didn’t add a box to These which i could But i want to keep i want to keep it Clean and simple as well So then Let’s go up here and by the way we’re Using this as inspo not a prison so i Can change this I can Delete add whatever i want to it Products community template training so Free com these are free offers Just drag this down here What if we do something like Okay so now it’s starting to feel a Little bit boring So yes i could Add some of these But still Let’s continue we can go back and add to The background later actually let’s just Add all offers here Start your journey here I’m gonna try something new I saw this somewhere and i was like i Want that for my site

So Let’s see is this too Too wide I’m gonna fill it with an image yeah so Let’s do 10 pixel radius Drag in an image So free template i’m just gonna oops not That again I’m gonna drag it in here fill And then Add a layer Linear but now Instead i’m going to make it Blue And then I’m going to add another layer [Music] That is Like this 50 And then what if we do stroke Blue for the entire thing i want to turn This off so i can see it better Layout Grid And what i’m trying to do is This right here So let’s do 42 on this one as well So that’s the offer 22 42 22. Start your journey so that’s a this Would be a free Funnel template

Right and then i i need a Button as well So you can see up to this point there Hasn’t been a lot of offers or call to Actions because i don’t want to confuse Or overwhelm people I want to give them The goodies I want to give them specifically Here at the offer section what they need So this would be actually i think what I’m gonna do delete fill and add the Stroke White or blue Five is that too much Probably Three Let me see also if i delete the Stroke here yeah I’m gonna instead add a background Color to it It’s a little bit too much still but Fix it later I said about everything i’ll fix it Later I’m probably the bore most boring person To watch design something because i’m so Focused Like even this right here i can’t really Do Uh let’s do white And then drag it down a little bit Or you know what we could do We could fill with

This Or this But then i wouldn’t add the stroke Nah i prefer this i think this is still A little bit too bright Maybe 75 And then this would be three Community Uh did you know that you could also use Like pixabay or on splash or pixels Um you mark this and then you type in People so like we want community right Yeah i’ll just use this So i’m going to delete this other one Drag this image down here And then do 50 At the community there There’s something i don’t like about the Gradient how it’s structured So maybe do a hundred but not Yeah something more like that Middle of the button 100 So it’s in the corner Something more like that Let’s Delete the shadow for now yeah that’s Cleaner Actually it would be pretty cool If we which now that i look at this Doesn’t have to be One two three Just move this up So this was

Join the free Community So we want One more And that’s going to be Free Trainings So here we could actually add an image Of Me training If i have let’s see if i find This one [Music] Yeah that’s good i mean it’s clean Maybe not the perfect image but it’s Clean and not too many details in there So I like that and i think for this I don’t want it to go straight into the Background so i’m gonna probably change Some of it or add like a background to This so there’s one pretty cool Tool plug-in you can use on figma as Well is called Something with background patterns or Something let me see Frame let’s make it same color right Click plugin It’s called it’s called hero patterns So we can use something like This Actually first let’s let’s try to To use This as it is so

I’m just gonna Could add it like that but i want this As a png so i’m just Gonna save it drag it in here [Music] There we go and then Drag it behind everything So you’ll see What i’m doing First let’s try to make it like 10 and See what it looks like then [Music] 15. 30. Even if we did 30 Drag it out there Drag it out here And this would be the I can just crop it Crop it in a little bit So that would be one way to do it and Then yes if we wanted to add Like a Gradient that goes Straight into the background we can By just doing this [Music] Sorry wait The other one and now we drag this in Here And we add on top of this So now you can see we get the same Effect we just want this to go Gradiently into the background

And i mean sure we can do that but [Music] Vertical [Music] Because then we need this on top of This right here Maybe Maybe So we have this in the background right Here We have these Blurry ones and then we got this right Here And uh as you saw here with the plugin We could use pretty much anything Let’s pick something that’s clean and we Could use this instead Well yeah it’s uh It’s okay i think i’m not gonna do Much more i’m just gonna add a social Social media element to this so Let’s copy All this And keep shift Down here I know we should also add like the paid Offers But it’s the same thing as like adding This right here i would just add Full-time funnel designer 37 funnel Templates And the funnel design course Plus Connect

On socials On socials let’s connect Let’s stay social isn’t that something Kids say Probably not Probably the older people like me Let’s stay social And then We can add in our Actually let’s make these Let’s first drag in the social media Icons and then we see what fits how About that So we got facebook Instagram Youtube Yeah let’s just do Solid white Let’s stay social Here’s what i can do i can call this Education And this is community And this is Behind The scenes Boom And then I’m also going to grab this Drag it down Make that a part of the The footer So now what we’re still missing the Testimonials And the paid products

So maybe let’s add Let’s add the videos for testimonials Still that’s an important part of a Funnel hub to have social proof So i’m gonna Duplicate this And then move all of this down So this is gonna say Oh by the way you could also add a Community section here so you can have a Section where you talk about Your community and everything I’m just gonna do A quick testimonial section for you so You can see And by the way we’re also doing more Videos building these things out These pages Designing in figma filling them out in Different page builders So make sure you watch all the trainings On the channel in the course full time Fun designer Everything So Stroke There we go I even had the play buttons for these Effect Drop shadow So i’m gonna add some videos here of People Praising me How good i am

All the fun stuff And i think that’s it i think that’s it Let’s see if we still want to maybe add Some of this In the bottom There we go Oh maybe not but it doesn’t look bad i’m Pretty happy with this so far And now we have a somewhat of a A start to a home page And again i did this in what One hour i usually build a funnel in Like an entire day so That’s why the attention to detail is Something that you you don’t want to to Definitely play around with for example Let’s do one more important part Let’s say we don’t want to use Illustrations okay Let’s say we want to do something Completely different we want to Use this right here for an example And we want to make it a little bit more Personal and not use Because of the illustrations Maybe cut this Like that Got way more text Delete this for now And then we’ll do 10. Move it in a little bit I’m going to add some graphics to this Underneath

You could either do blue Or Gradient again [Music] And also do Something different we do stroke Something like that uh maybe you want to Add something else to the page Something else that isn’t That isn’t just blue So yeah that’s what what i know i don’t I don’t talk much when i’m designing so That’s what i would call adding Personality to a page right like you Could also Let’s say you want to make this Let’s make this like a little bit Smaller Just delete this for now So i can Boom Let’s do it properly and add another Image This right here Let’s say we want to do Something like this instead Drag it behind Blue Turn this up a little bit you’ll see it There I don’t know maybe you want to do Something like This To add that personal touch to it

So yeah there’s a lot of things we can Add to it i’m starting to feel pretty Happy about this in general maybe one Thing to I know keep going it’s like adding some Of these like final touches if you wanna Spice it up a little bit you can drag in A few of these icons in the In the design So this is what you would find in your Research when you’re finding these right Here So that is it that is pretty pretty much The design right there let’s still add a Full start to finish or i mean top to Bottom design overview of the page you Can see what it looks like And obviously you’ll know by the time You’re watching this video how long it Took me but that’s it for this video Hope you liked it i’ll see you in the Next one

Ace The Funnel Builder
Curated by

Namaste~ My name is Ace and I found these contents SUPA~ Valuable! I apologize for the quality of the transcript... (In case you are curious I used YT EVO plugin to automatically pull these amazing contents) Enjoy!

Get Lifetime Access To Our Entire Library Of Funnel And Design Templates

For A Low One-Time Price – All Your Marketing Sorted, Forever!