{"id":109608,"date":"2022-06-24T12:05:27","date_gmt":"2022-06-24T12:05:27","guid":{"rendered":"https:\/\/www.aceflashtemplates.com\/the-ultimate-figma-to-clickfunnels-tutorial-2022-live-buildout\/"},"modified":"2022-11-02T06:08:23","modified_gmt":"2022-11-02T06:08:23","slug":"the-ultimate-figma-to-clickfunnels-tutorial-2022-live-buildout","status":"publish","type":"post","link":"https:\/\/aceflashtemplates.com\/the-ultimate-figma-to-clickfunnels-tutorial-2022-live-buildout\/","title":{"rendered":"The ULTIMATE FIGMA to Clickfunnels Tutorial 2022 (LIVE Buildout)"},"content":{"rendered":"\n<div><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/iwQfDrezCQ4\" width=\"100%\" height=\"400\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n\n\n\n<p>All right so how do you take a figma Design and turn into a live funnel Inside of click funnels or any other Platform that you\u2019re using that\u2019s what We\u2019re gonna do in this video you know That i first start with a mood board ish But i\u2019m gonna simplify in this video and I\u2019ll just show you kind of where i start To map out the feeling the theme the Style that i want for a funnel so we got Three to five different colors and so What we use for the inner circle if you Haven\u2019t checked it out i\u2019ll put a link So you can watch the the live funnel to This as well and then we\u2019ll start with a Empty funnel and start building it here In a second but first we gotta design it In figma let me grab a screenshot of This as well So we have that inside of figma to kind Of model Boom there we go we\u2019ll move that Right there And then uh we\u2019ll start with the Background color background image sorry So we got different phones in the Background we got a layer which is Gradient then we got a mesh gradient in The middle and then we got the inner Circle logo we got me and pedro Got the 3d icons and then we got a Multi-color headline so Nothing too crazy and so what we\u2019ll Start with is the background image so<\/p>\n\n\n\n<p>For this one i just put together like a Bunch of different funnels that i\u2019ve Built and pedro has built And that will be the theme for it Together with mesh gradient of the color So What i\u2019ll do is i\u2019ll start fresh on a New page i\u2019ll click a or f for frame Slide so we get that 1920 to 1080 this Is good i will then grab This color right here in fact i\u2019ll just Copy All of this into page 2. If i want to i can call this Page 2 is like funnel And then page one is assets And now that i have this i can go ahead And just fill this With my dark color and now i\u2019m going to Assets And well i could just do this copy Background one Into funnel and boom i have it in here So i can just delete this and then i\u2019ll Make the Background color here Right there it was just gonna be one Color though like if i Change this to like 10 like you could See we get a layer but we don\u2019t want That we want a Layer on top of it that is gradient and Mesh gradient so i\u2019ll move this up here And then i\u2019ll create <\/p>\n\n\n<div class=\"gb-container gb-container-00cfa743\"><div class=\"gb-inside-container\">\n<div class=\"gb-container gb-container-b98f20cc\"><div class=\"gb-inside-container\">\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.aceflashtemplates.com\/recommends\/ClickFunnels\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.aceflashtemplates.com\/wp-content\/uploads\/2022\/11\/What-Is-ClickFunnels-2.0-1024x576.png\" alt=\"ClickFunnels 2.0 Free Trial, Ace Flash Templates, Sales Funnel Builder, Sales Funnel templates, Sales Funnel Software. \" class=\"wp-image-110038\" srcset=\"https:\/\/aceflashtemplates.com\/wp-content\/uploads\/2022\/11\/What-Is-ClickFunnels-2.0-1024x576.png 1024w, https:\/\/aceflashtemplates.com\/wp-content\/uploads\/2022\/11\/What-Is-ClickFunnels-2.0-300x169.png 300w, https:\/\/aceflashtemplates.com\/wp-content\/uploads\/2022\/11\/What-Is-ClickFunnels-2.0-768x432.png 768w, https:\/\/aceflashtemplates.com\/wp-content\/uploads\/2022\/11\/What-Is-ClickFunnels-2.0.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n<div class=\"gb-container gb-container-ecc07600\"><div class=\"gb-inside-container\">\n<div class=\"gb-button-wrapper gb-button-wrapper-79f59a1e\">\n\n<a class=\"gb-button gb-button-f2d26f1e\" href=\"https:\/\/www.aceflashtemplates.com\/recommends\/ClickFunnels\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span class=\"gb-button-text\"><strong>Start Your Free Trial Today<\/strong><\/span><span class=\"gb-icon\"><svg aria-hidden=\"true\" role=\"img\" height=\"1em\" width=\"1em\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill=\"currentColor\" d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg><\/span><\/a>\n\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n<p>A rectangle I\u2019ll put that on top of it which by the Way you can do this with any background Image if you want one of you like Working whatever it is you can put that There and then you add a rectangle on Top of it you can see it here so let me Delete that one we got one rectangle and This one will be a linear gradient so Again we\u2019re going to choose this one Same thing here and i will move them Just like That Boom And then i\u2019m also going to choose one Here i just click this right here and i Reduce actually this will be this will Be like 99 so it\u2019s oops So it\u2019s almost just the color and then These will be Like 95 so we can see the funnels On the sides Okay and then what we want is we want um You can click o And keep shift down otherwise it\u2019ll be Not even so keep shift down And then i want This color And i want the effect of a layer blur I\u2019ll make that like 300 Maybe even 500 And then set that down to like 30 percent<\/p>\n\n\n\n<p>Actually you see here on The Rectangle that is too visible i want the Middle one To be literally a hundred percent Right because i i don\u2019t want it to be Any funnels visible there what i could Do is even go into Rectangle And just drag two of these like let\u2019s Say They\u2019re Just like that they\u2019re touching the Borders Something like that yeah i think that\u2019s Good so now we have enough Space right there in the middle where we Can have text and it\u2019s not going to be Distracted by the background image so I\u2019ll actually try to bump this to 50 40. there we go and then i will Just group this Copy it Drag it in here Shift make it a little bit bigger and That will be a part of either the can be Part of the background image or it can Be a part of the graphics As you see here This you can see right there it\u2019s a part Of the graphic that we upload but it can Also be a part of the background like For example You can see that the mesh is a part of<\/p>\n\n\n\n<p>The background so let me delete this and Make it a part of the the graphic Instead so now i just i keep command c And v it\u2019ll duplicate the whole thing And so now i can try to you know add the Graphics in there and now i can Literally just Click this right there Go down to export Png or jpeg I\u2019ll just call it inner circle Background One I already have that so i\u2019ll call it 11 11. then we go to tiny png to compress It obviously we got 1.5 megabytes way Too much and it\u2019s going to slow down the Page speed this is going to compress This 297 it\u2019s a little bit on the high End we want it lower than that but i\u2019m Just gonna go with this for the sake of This video so what i could do for Example is export asset jpeg export it As a 0.75 that\u2019s going to reduce the the File sauce as well There we go i\u2019m going to add that on Fill 100 width okay So now we got what do we got we got a One row or one column sorry And then we can start adding the uh sub Headline This will be I\u2019ll just put this [Music]<\/p>\n\n\n\n<p>Out the background color You don\u2019t want a background color We want the actual text element Put that to white White for bold Make this like 22 Uppercase letter spacing And then this will say Warning not another Coaching Program Instead partner with us Okay and then we want a headline as well And so i\u2019ll make this Like 58 White bald color would be Yeah there we go and then mobile will be Like 36 And then i\u2019ll make this Uppercase as well but no letter spacing Okay so what was our headline we\u2019ll just Copy that Done for you so i\u2019m gonna bold this Oh anyways i\u2019ll just make it white for This one because that\u2019s not the uh the Css is not a part of the the video the Topic today but i can just make it Double or multi-color with the css code But anyways done for you funnel agency Launch system I\u2019ll make this a sub headline element as Well<\/p>\n\n\n\n<p>And get the text i literally just Grabbed the text from this one Make this 20 And maybe 18 moba [Music] 10 pixels And then let\u2019s squeeze it a little bit There we go This one also 1.5 Yeah that\u2019s better All right now we want an image here That will be This one right And so you can see here we want zero Margins or padding here down but we want Some space there So what i would do to build this is go Into my assets And i would upload images for example if I upload an image with a Background color right here i could just Use a plugin here called remove Background Or i can use clippingmagic.com or remove Background you can remove the background Before you upload them here but now for This one you can see how we\u2019ve done it a Pattern me But the number one mistake people do is They don\u2019t look at the full picture just Like oh hey let me make sure it\u2019s Aligned here and kind of here and boom That does like this doesn\u2019t look natural Right so what you do is you look at the<\/p>\n\n\n\n<p>Face okay like it Gotta have about the same Face size there we go And then i look at like who\u2019s gonna be In front Well this image right here and yes we Could ask for a new image but if this One is cutting off i\u2019ll just put me There so that The ears and eyes are kind of the same Same level And then i will just keep Command and move this up so it\u2019ll crop It now i\u2019m also going to delete any dead Space Right now this one happened to have a Shadow so there\u2019s not a lot of dead Space But i would usually just delete all of The or delete remove the dead space so That the image Won\u2019t be any wider than it is causing Additional space here we want zero empty Space outside the image now i\u2019ll grab Some of the assets that i\u2019ve uploaded And i\u2019ll just Add them kind of here to show visually What i did i can also move them Obviously behind me you\u2019ll see on an Image like here i\u2019ve added text the Circle My Signature i can edit the image before i Upload it if i want it to fade out into<\/p>\n\n\n\n<p>The background for this one we want it To be a hard cut into the credibility Section and so that\u2019s why you can see That we have it set like this so let\u2019s Say i want to use this right i would Just Actually for this one let\u2019s do something Else So Inner Circle and then we\u2019ll set this to White Ten percent Will use montserrat Even though i know it\u2019s not that one but Black uh we won\u2019t feel it actually we\u2019ll Do stroke And Then yeah let\u2019s make it bigger 200 160 I can also just drag it like that and Then move it underneath i can command x Select me and pedro command v And there we go i\u2019ll move it beneath us [Music] And so there I can get a text Just like that inner circle and now i\u2019ll Make that white Put it down to like 20 percent maybe And that will be our Our image so Our graphic now you can see we got empty<\/p>\n\n\n\n<p>Space here so i would normally delete That but for the sake of this let me Just group it command g And export it as a png so we don\u2019t get That background pedro ghost and Hero image Okay run it through a tiny png got 400 Kilobytes we\u2019re gonna download it at a Hundred and we\u2019re gonna upload the image Right here just gonna drag it in there Starting to upload and then the hero Section is almost done boom there you go You can see the padding Is at 30 so we\u2019ll just make sure that we Got About the same padding everywhere so That is good Now you can see that it\u2019s cutting off There so First of all let me add a footer to this Page [Music] And then This will be Set to zero so we got Padding set to zero on the actual Section and then Here in the row we want to set it to Zero i\u2019ll put this to zero as well And now You can see there\u2019s still a tiny bit They might be in the image if the if oh Yeah the shadow is the shadow from me That is causing<\/p>\n\n\n\n<p>This to not be you can see there\u2019s a Small space there So even if i set this to the credibility Section here or the footer whatever we Want to use as But then i can just put minus 20 here Minus 10 Minus 12 15. And there we go That is perfect now it\u2019s aligned with The section so now we can go here we can Add new elements and we can start Building out The rest of the page right like if we Have this one that we\u2019re modeling we can Just add a headline sub-headline then Create a new section Oh we need logos like a pr section Great we got Logos right here so You can see we got a lot of empty space There command and just drag it in and That way we crop it now we can just Command c And V I can just drag this out here And boom group them and upload them as An image for mobile i would just set it As Like if you have the logos here you set This as desktop only And then you<\/p>\n\n\n\n<p>Create another one that is mobile only And uh for mobile you can like let\u2019s say This was six logos on desktop and then You could just Copy those and make it More mobile friendly for the mobile Version so that you can actually see The logos otherwise it\u2019ll make them too Small so anyways That is it you would group this run it Through tiny png and you go to the next Section right you need a new background Cool you just go into the funnel There we go And you go I noticed i just built this image here But i would normally build it inside of A dark background if that\u2019s how i want To use it so i can see the text i can See the image the the shadows the how it Fits with this mesh gradient And all those things and so by the way If you want to check out the inner Circle and learn more how we build these Funnels for clients uh you if you need Help with lead generation clients Growing a funnel agency with 10k per Month definitely check it out apply 10 First people get a special launch deal And it\u2019s actually the first done for you Funnel agency launch Program in the inner circle out there in The market so very excited for it i\u2019m Personally going to be in there<\/p>\n\n\n\n<p>Launching your portfolio onto your Profile funnel so you can attract those Clients by looking actually looking Professional And when you get clients i go personally Into your account and redesign it to Clean it up and put it in the portfolio That i also built for you In the domain in the brand name that i Also built for you And It\u2019s it\u2019s awesome so anyways you can Check out all the information about that Uh in the description but hopefully you Found this video helpful if you have any Questions put them in the comments i\u2019ll See in the next one<\/p>\n","protected":false},"excerpt":{"rendered":"<p>All right so how do you take a figma Design and turn into a live funnel Inside of click funnels or any other Platform that you&#8217;re using that&#8217;s what We&#8217;re gonna do in this video you know That i first&hellip;<\/p>\n","protected":false},"author":1,"featured_media":109609,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[4],"tags":[],"uagb_featured_image_src":{"full":["https:\/\/aceflashtemplates.com\/wp-content\/uploads\/2022\/11\/the-ultimate-figma-to-clickfunnels-tutorial-2022-live-buildout-iwQfDrezCQ4.jpg",1280,720,false],"thumbnail":["https:\/\/aceflashtemplates.com\/wp-content\/uploads\/2022\/11\/the-ultimate-figma-to-clickfunnels-tutorial-2022-live-buildout-iwQfDrezCQ4-150x150.jpg",150,150,true],"medium":["https:\/\/aceflashtemplates.com\/wp-content\/uploads\/2022\/11\/the-ultimate-figma-to-clickfunnels-tutorial-2022-live-buildout-iwQfDrezCQ4-300x169.jpg",300,169,true],"medium_large":["https:\/\/aceflashtemplates.com\/wp-content\/uploads\/2022\/11\/the-ultimate-figma-to-clickfunnels-tutorial-2022-live-buildout-iwQfDrezCQ4-768x432.jpg",768,432,true],"large":["https:\/\/aceflashtemplates.com\/wp-content\/uploads\/2022\/11\/the-ultimate-figma-to-clickfunnels-tutorial-2022-live-buildout-iwQfDrezCQ4-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/aceflashtemplates.com\/wp-content\/uploads\/2022\/11\/the-ultimate-figma-to-clickfunnels-tutorial-2022-live-buildout-iwQfDrezCQ4.jpg",1280,720,false],"2048x2048":["https:\/\/aceflashtemplates.com\/wp-content\/uploads\/2022\/11\/the-ultimate-figma-to-clickfunnels-tutorial-2022-live-buildout-iwQfDrezCQ4.jpg",1280,720,false],"affiliate-linkr-custom-size":["https:\/\/aceflashtemplates.com\/wp-content\/uploads\/2022\/11\/the-ultimate-figma-to-clickfunnels-tutorial-2022-live-buildout-iwQfDrezCQ4-320x220.jpg",320,220,true]},"uagb_author_info":{"display_name":"Ace","author_link":"https:\/\/aceflashtemplates.com\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"All right so how do you take a figma Design and turn into a live funnel Inside of click funnels or any other Platform that you're using that's what We're gonna do in this video you know That i first&hellip;","_links":{"self":[{"href":"https:\/\/aceflashtemplates.com\/wp-json\/wp\/v2\/posts\/109608"}],"collection":[{"href":"https:\/\/aceflashtemplates.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aceflashtemplates.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aceflashtemplates.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aceflashtemplates.com\/wp-json\/wp\/v2\/comments?post=109608"}],"version-history":[{"count":2,"href":"https:\/\/aceflashtemplates.com\/wp-json\/wp\/v2\/posts\/109608\/revisions"}],"predecessor-version":[{"id":110090,"href":"https:\/\/aceflashtemplates.com\/wp-json\/wp\/v2\/posts\/109608\/revisions\/110090"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aceflashtemplates.com\/wp-json\/wp\/v2\/media\/109609"}],"wp:attachment":[{"href":"https:\/\/aceflashtemplates.com\/wp-json\/wp\/v2\/media?parent=109608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aceflashtemplates.com\/wp-json\/wp\/v2\/categories?post=109608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aceflashtemplates.com\/wp-json\/wp\/v2\/tags?post=109608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}