Figma to GoHighLevel Funnel Design Tutorial

all right so I recently built 24 funnel templates in 24 hours and the question I got from a lot of people was how did you get so much done in such a short period of time so in this video I'm going to show you inside of high level I'm going to show you inside of figma the editor everything so you can see start to finish how to build funnels and websites for your business so let's dive in now I'm inside of high level and I created this little actually let me just create a new one to show you I'm just going to call this template funnel great funnel and then I'm going to add the step and we'll just call gonna call that home and then inside of this we can use this page that I built which has all these pre-made sections now I spent 12 hours building these and so this is the first hack if you will that when you're building a funnel first you do the planning and once you do the planning really well the billing actually becomes way faster so for me this is usually collecting the color palette The Branding the images the assets the testimonials and then the copy so that when I start building I kind of at least have a draft a rough draft of what I want to build and a good understanding of how I want it to look so you can look at other sites like Pinterest or dribble or Awards Landing folio these types of pages to get inspiration and then when you go inside of high level or any other platform that you might be using you can actually build the pages way faster than if you're starting from blank so I'm actually going to start from blank just to give you an idea of how to build a funnel start to finish how the editor works and everything but if I were to use this I would just go into here type in Ultimate Plug and Play template and then home page this is the one that you can import after you watch this video you'll find a link to import this and then you can use it for all your funnels because you can just import boom and then you delete the section you don't want to use anymore so that is pretty sweet but we're going to start from from blank to show you the editor and how it works and how I built this and also inside of figma how to import your designs into here so I'm just going to click full width we're going to do a two column row and then I'm going to add my logo obviously so if I need a logo I can go to logo ipsum for example for a template obviously if you have a business you have a logo it's not that important but for example here in the temples that we built I just took logo Epsom changed the text to perfect logo you group them together so command G or just right click and group now it says ungroup because they already grouped export 1X 2x depending on the size and the pixels of the image export and then upload it into high level so I'm gonna go to the image see if we have any logos in here and there we go so I'll probably want it more like 200 pixels and then I want it uh left aligned now for the element here usually what I do is I just do a support so I'll just do support customsun. com I might want to add an email icon so the way I do that is just icon search email and then let's say I want to use this one icon color by the way I learned high level in what two three days and then when I built 24 templates in 24 hours trust me I learned high level in 24 hours like mastered it so desktop font size this probably do let's do 18. actually 16 is the support email and then we'll do 14.

if I don't want to have it visible on mobile because that kind of looks bad look at that I can just go here and on toggle or uncheck the mobile so it's only visible on desktop once you understand high level is actually better than click funnels yes they're working on a new update to the editor but already I'm like getting used to the editor in just a few days so anyways um two columns let's do headline here and then the main image here I also don't like the font so I'm going to change that but first you can see how this aligns in the center which you know sometimes it's helpful sometimes you're like I actually prefer to be up here but what it does is if I add sub headline and then I make this a lorem ipsum text the more I add in here so if I add the button you can see that it sort of starts filling out I can actually grab alarm ipsum if I have here inside of figma just to fill that up now you can see we don't have any padding between these sections or elements sorry so what I'll do I'll start with the headline and I'll just go down here into padding so I'll do left and right we don't need padding on on the individual elements we can actually do the inside of the column so I can go here and I can add padding 50 and 15 right so we give some spacing there or padding but then here I can do margin top 20 and bottom 20 if I want as well I can also just do top and then the top on this one so now I don't need 20 pixels enough this is way too big so you can see as I'm billing it out I'm just using the settings that I would normally do so you can see my exact process so these two should actually be like desktop first mobile I told the dev team this so working on changing that but I will do mobile for this 16 and then I'll do 18 on desktop and then I will also do let me just add the padding here instead of sorry the margin so 20 let's do 30. now if I want a radius to this I believe I can add a border so there's no radius Corner radius just like that again I told the dev team so what I can do just let me set this to one pixel and then instead of having a color I just remove the color and now I'm able to set a border radius even if it's not there right which is a little hack that I figured out as I wanted to find so like a lot of things inside of high level you can actually find them you just gotta know how to how to navigate the editor so let's left align this one as well so I'll just go down left align this one thing I found as well I I could add a radius by going down here and then picking the one with the radius and then just deleting the color of the border right but it's the same thing so anyways what I'll do for the color is I'll just use this one right here but one of the things when you have your branding you can just add them one so add the custom one you can add your your custom color let's say I have a something like this I can just add the color and then I'll have it here so now if I want to change the headline for example and I go color I'll just find it here right bold I'll find it here and so anything I press that I'm like okay I want to change the background color for this entire section boom I can just find it here so it's very easy Once you find it you just gotta set those colors up in the beginning so I'm going to keep it like this for now obviously I don't want to have this one I don't want to change this one right so I want to add a new one so I'll do something like this and then I'll do the same for bold so the font what I like about the editor is that we have so many font options and instead of changing these individually I'll just go up to settings typography and I'll go and choose from this never-ending list of fonts so I'll do I could do Barlow Barlow is um probably would look better all capital you know I already like the plus Jakarta so we'll do that one and then content same thing so now we can already find it there text color I'm not gonna change because I might have darker and lighter sections so I think that's it for now one thing I could do is if I want to actually let's separate these like we can see the difference I'll make this dark so we can see what we've built so far right so we have this section and you can see here the spacing is less than above here so I want to add more spacing what I'll do is I'll go down to padding again and I'll probably do if I do 50 here sometimes I might do you know in another section and obviously obviously not above the fold here I don't want to have too much spacing because on mobile if we do 30 you can see on mobile we're wasting all this space up here we want to have as much as possible above the fold because that way we can increase conversions so on desktop this might look good but it's too much so I might do 10 or sometimes in another section I kind of have these like 10 30 50 70 or I'll do if I need more spacing I'll let's say I need 80. so I want to have more spacing then I'll do 20 here it's just kind of like this it gives the same structure throughout the page when every single section have you know 40 60 or 20 40 or 40 40 and it's it's just congruency so let's start filling this out so desktop will do 52 Maybe and then mobile will do 28 and see what that looks like because now once we've set these up once actually you can see the line height here we probably want to do more like one point seven or one point five at least 1.

5 once you've set that up here if you let's set the mobile here to 16. once you've done these once you can just duplicate the settings sorry the section and you'll have these settings in there this also something I didn't understand at first but you have something called inside of the column you have column layout so I have vertical right now and now it's set to horizontal obviously you don't want to have horizontal set because that wouldn't look great right but there's actually a use case for this so let's say the image is if we have a huge image I can upload one in a second and show you there are times where let's say we delete this and we want this to be to the top right I can click the column and I can go down here and I can I believe it was vertical and we do left boom there we go and if I do right it'll be the opposite so Center for now so we get that aligned I don't know if that already always had that in there I did mention it and a few days later I saw in there so I'm the annoying person who's like hey can we change this inside of figma when you're designing something like let's say you're designing this or you have something like this let's say we want to upload this again if you have Graphics behind this for an example let's let's move this I'm just going to hold that down grab it in here make it 600 at least click R so we get this rectangle let's move it under here and then we'll do 10 pixels on that as well and we'll do let's say I want to have a little bit of background to it so I'm gonna do 10 there now I'll group it together and I'll just export this so test template you want to compress the image so that you increase the load of speed so the files aren't bigger than let's say 100 kilobytes I'll just upload this I also mentioned that we should be able to drag these images in here and drop them so that's it's coming soon as well and now we have this in there headline will say get 300 percent more real estate deals with real estate funnels everything's about funnels so now I have one section right I might want to add maybe a testimonial down here I can do that by adding let's say a an image feature same thing here I want to add 10 pixels above and below now this keeps centered so that's pretty good if I want to I'll just see what this looks like with 46. 42 with funnels and then we have something like this so I usually want to have the same sort of height to both sections so there's not a lot of empty space there and this is also too much you don't have to have a testimonial this long on the first section but anyways let's say we want to have something like this I can now duplicate this unless I want to do something like a darker background color I can just go in and change these all and so once I open this color boom ball color now they'll stay open I believe so I can just go like this boom and then I will change the logo as well but now because as I showed you in in this section right here because I've created the backgrounds already you would do that in figma and you would upload them in here I can just go and pick them out as I build this out so for darker I'll just use this oh I changed the wrong one sorry here still is this and then you want to make sure that you have this set to full Center so you can Center and also make it full width and then for a lighter background maybe I want to use something like this one I created here for the templates and also make this full Center because once you've done this now like I said if I want to do something else like I want to talk about our features our benefits or any of that sort of thing I have the right font so now it's already mobile optimized you might still have to optimize some images let's say you have logos about who you've worked with or featured in let's say you have images like these four images on mobile this might be too narrow like if you're trying to fit this into the the mobile section they'll be super tiny so then you might want to do two images like these together and then these two below here and then you can create one image and upload that in Mobile only so that's mobile optimization anyways the text though should be around where we have them right now so that's good and then let's just make sure check actually this right here you want to just show you can use this testimonial set it to 75 Maybe and then we'll put yeah this good should be around 16 Maybe 18.

so we'll do 16 and 14. yeah and then we'll come back here and change that actually let's do a left align best results ever something just relatable related to the promise and then these people I worked with gave me the best results ever with their funnels blah blah anyways one thing I really love about the editor as well is you want to think of the funnel building process as like Lego pieces and billing blocks so you have sections this green outline here is a section inside of that I can add rows right so I can add one column two column two four and I can just drag them in here right but one thing I really love about the editor is that I can delete the columns to make a two column into a one column so for example on this one I might not want to have a two column so I just go into the column you can see second column there this image column I just delete that and I have one column and I can as long as I click this column I can just come in here and change these to be let's say centered and then if I I'm like I actually think this one is too long I want to make this one two lines have a line break there and first of all make sure the line break may be 1. 2 and then I will do I can add padding on the sides yes for sure but instead I'll go into the SEC two column row so the row instead of the column again building blocks and I'll just go down here to width and change that instead because when when I change that it's not going to add a padding to the mobile section so let's say I want to have something like this I can go in and see what that looks like and it looks great on mobile as well now final trick that I'll show you and then not to make this video too long I can change settings let's say I want to have shadows in these four boxes here I want to have something so instead of going here and I'll drag this down to here I'll change it to benefit one okay I'll set the settings once so desktop I'll do maybe 26 mobile I'll do 20.

and then yes let's keep it in the middle we also want to have some lorem IPS in there to explain the benefits maybe have an image or icon or that sort of thing now once you've created that oh yeah let's say we want to have some just put a five percent drop on that and let's say I want to have this on all four in figma you can change the settings let's say you have this image or color layer here I can copy it once I've marked the actual color I can command C copy it over to another image and then paste it mask group go into the image boom I can copy it over to an image in here in high level you can actually just copy the column so look I copied that over I delete this one I copy it over and I delete and by the way I can also do this inside of this right here copy and it'll do the same so if you have a before and after you just set one up you copy it over to the next one so without making this any longer I'll just give you this page instead so in the description make sure you're going to import this high level also we're kind enough to give us 30 days to try it for free me and Pedro also are building funnels.