How to design emails in Figma for Klaviyo (+5 FREE Figma templates)

if you looked at this email this email and this email would you believe me if I told you we designed each of these in under 16 minutes that's because in over 2 years we've generated more than $10 million in email revenue and along the way we've designed thousands of emails like literally thousands of emails along the way we developed an internal step-by-step process to ensure that we can consistently churn out high quality High converting emails in as little time as possible this proc process it's super simple it's not going to take you any previous design skills you don't need to be like a Photoshop Wizard or anything like that and trust me I can say that because I have the design skills of a literal rock all you need is clavia and figma which are both completely free and this video so I'm going to hold your hand through the entire creation process from actually designing within figma all the way up to uploading this inside of clavio so you can send it out to your audience and as a bonus I'm going to give you five three High converting figma templates which are all battle tested and that's going to be linked for you in the video description so open up figma open up clavio and let's get into it but before we get into it I just want to take a sec to really drill into why this is actually important so why should you care about design and that's because in 2024 the average person's attention span is just absolutely cooked it's fried right so pretty colors just going to make a person go o and like you know cat videos or C memes are just going going to make a person laugh people literally have the attention span less than that of a goldfish right like a goldfish is 9 seconds and now you're probably like eight if not less like when's the last time you actually gave a Tik Tok or a real more than 8 seconds right so your emails are fighting for mental real estate and why is someone going to click and actually read your email when they could just Doom scroll funny C memes right like your designs they need to be aesthetic to actually hold people's engagement because this is what gets them to actually absorb and read your message so bit of a fact check here but people do actually judge a book by its cover right like you probably do this yourself because with the average person being exposed to like thousands of ads per day our eyes have literally developed a filter to quickly create associ about a brand and these associations usually just stick with us forever so here's a little example of a bad design right like look at this on the left here right look it looks scammy AF there's zero trust here you know you might have seen something like this in your burner email that you made when you were a teenager right and and maybe like that one time you bought a hat of Teemu you're like H they probably sold my data right like this just looks scare me there's probably you right here right and a little bit of a danger zone here but I just want to preface that like if you're thinking my emails don't look this bad like this is an exaggeration one obviously but two all this means now is like you're just mid right like oh no like I don't look ugly I'm Aver like no one's going to read your email anyway so right now we move on to good design and this is where people actually read your email and this is where your emails they're aligned with the rest of your marketing you actually now look like a professional and because of this people are now actually going to see what your offer is so now this is you you're all happy you can't wait till next week's uh addition it looks really interesting it was just what you needed maybe you actually didn't know what to do on a bank holiday and now you're thinking man I love this brand so what does this mean for you this means you need to learn basic design skills if you don't want to spend hours writing an email that people just instantly click out of if you don't want your brand to be Associated as a spammy or boring brand um if you want your emails to actually be read and for people to be nurtured down their customer Journey or if you want to capture the attention of your audience instead of this little goldfish going around in circles and if you want your audience to actually get uh if you want to get your audience rather to purchase from your emails this is going to be for you so let's learn how to make this email inside of figma um and I'm also just going to link uh the figma actually in this doc which will be in the description um and it's also going to have your five free emails now before we jump in What You Need to prepare is you just need to have your copy ready you need to have any assets that you want to put inside of your campaign ready and then inside of figma we're just going to ensure your frame is 1,200 pixels wide but we're going to get into that in a second anyway um and we'll get into the structure of your emails while we build it anyways without further Ado let's get into it so from a black canvas how do we actually go to this email this Emil looks really pretty but I promise you it's not as intimidating as it might look and for just a little bit of fun what I'm going to do is I'm actually going to set this Google Tim up for 16 minutes I'm going to give myself an extra minute just so I can talk over it um but let's actually get into designing so you're going to see here um I've annotated what to expect on the left side here which is we've got the logo we've got the header we've got the subheader CTA header image body CTO um so you actually know specifically what we're going to be making now you're going to see here on the right side I've actually already prepared all of the assets that I want for this email um this is actually going to help you save a lot of time because half the time if youve kind of looking for things to actually include um that is what's going to make it take a little bit longer but let's actually build this email piece by piece uh but before we get into that if you do like how this email looks you can actually use um the exact email we can uh you can just literally take this exact structure um as well as all these other uh five templates that we've got created for you the process that you use to build this email is going to be exactly the same process you used to build these emails or honestly any other email that you build inside of figma ever so um let's jump into it and starting from the top which is very simply the logo now um every brand obviously is going to have one and so what you want to do is literally get your brand assets and put the logo at the top you can literally put it in the middle um or you can put it on the left side like we have here um the reason we put on left side is because this brand actually has a tarlant that they wanted to show off uh but very simply as well you can put it in the middle if for example your brand just has like instead of a word it might have um might have like an icon or something so just like that now next from here what I want you to do is we're going to see this line right there and super easy to actually get that you can either just press uh click on this in the top right and you're going to see this line button there or you can just press L on your keyboard which I'm going to do it's the only L that I take uh and we're going to Chuck it in here so you're going to see like this line it it looks straight but what we can see is it is in fact a tad bit wonky so we're going to go over here to the rotation just press zero to get that straight now that's a logo done nice and simple so for this brand um their text is actually already inside of figma um I so their font rather so what we're going to do is we're just going to copy paste this across and what you can do is you can press this button here which is order width and that just makes it so that it will automatically match to whatever your copy is going to be so let's say the copy is going to be um hello I'm done now this block will only be as wide as it needs to be I could extend it like that but or for example if I have it set like this uh it's only going to take up that much room so we're going to do switch it back to odd bunch and have it set up like this now this is our header and we're going to get our sub header going so again it really helps to know what your Brand's uh font is what your sizes are um and this is really why we recommend having the copy ready first before you start building the designs now for the CTA you're going to see we have this nice little browse blonde here what you can do to make this easier for yourself is again go into the shapes here and you're going to see rectangle or you can press R and now make a box which you think is going to be suitably sized now you want to know what color palette that you're going to be using for your brand this is a pretty simple brand because a lot of this stuff is just black and white uh but if your brand uses a specific red if your brand uses a specific green uh this is where you would want to Chuck in that hex index so for this brand again because it's nice and simple we are just going to Chuck it all the way to Black just like that now we obviously need a bit of text on top of this C so we're going to get this here um let's make that white actually so we can see it so it looks like we're actually going to need to bring this layer to the front so that we can see it so what you want to do is you want to right click bring to front and now boom it's suddenly on top of there so for blond we're going to do it nice and simple and just going to say browse the now you're going to see here that little trick that we learned earlier is going to really come in clutch where we go for auto width just like that beautiful so that's actually already a lot of the heavy lifting done now this sort of section at the back it looks a real fancy um but honestly it's not it's not nearly as fancy as it looks it's literally just six images that we took on their website and then we chucked it into like a little mosa so you can do it the way that we did it and if you want to again you can go straight to this template but otherwise you can just start mashing things up and trying to Loosely copy it so for example let's start off with the back um I think this is that image and Chuck it back like that we can throw this down the middle right there looks like this kind of goes there and what you'll notice inside of figma is that it gives you these really handy kind of like orange indicators um just to make sure that what you're doing is straight or it's in line so definitely pay attention to those as you're building this email or any emo really um and now we have this up at the top let Chuck that there uh then it looks like we have this over there and finally this one over here so we can scroll in just like that and now we get something that looks pretty good obviously if you want to be granular with it you can tell this one looks a bit different but again like what wouldn't looking for necessarily is imperfection here we just want to have an email that looks really pretty in I guess as little eth it as possible so from here now we've got the headit image and immediately this is the section above the fold where you can see we just immediately have a bunch of intrigue right like it's it's a much interesting of a header doesn't look boring um copy's nice and easy to read and CTA is nice and close to the top so from here moving on we're going to press L again and now this is the bit which is super simple to bring in so I'm just going to copy and paste this across because you'll probably be copy pasting this from like a Google doc you might be making this on the spot uh but what you really want to do is actually come pre-prepared and have your copy done because if you have this like if you if you're editing this a lot on the spot or as you go uh it's going to be really hard to actually know how big this email needs to be so get your text block um if you want to do it manually what you do is you press t or you can press or click this little button at the top you click and drag and then copy and paste Now text the cross just like that so this button is probably going to be your worst enemy now so let's not click that one and let's actually just drag and make sure that we've got a good amount of space in between just like that and so that is now the body text I don't know where this one went okay that's all right press R because we would need that next button oh jeez that's actually a good size we'll go black and now to make things quicker for yourself you can actually just click on something you've already created and and just literally crl c contrl v just copy paste that through now you're going to see here it kind of disappears oh no so here we go now we're going to bring this to front by right clicking bring the bottom back over and make sure that it's actually Center aligned just like that and for this one again we're going to leave this ETA as browse blond and that is literally half the emo already created now we're going to take another l only L I hope you're taking make sure that that's zero and now we're going to get to the product section so again what we've done is um I've already prepared the assets that I want here and we're now just going to actually literally put them side by side and make sure that they look clean so when we click this what you want make sure is that all of these images are basically the same size so four like they're all basically 500 pixels wide for want to be real Ang know but we can just yep there we go there we go had to scratch my OCD um so now we're clicking in uh we're clicking and dragging and what we want to do is we want to make sure that we're actually aligned with the rest of the email so for example here oh no that's not good let's get both of them in there and we can see okay so this block is 1,000 pixels wide these are 500 wide so this is actually probably too close to each other right like we want something where it looks a little bit different is it just me or is that that's like one pixel so what we're going to do is want to move this to the left smidge move this to the right yet another smidge and now we can see and now we can see here that they look basically identical together now we're going to click and drag the other ones into the frame and change this to zero just because I want a pixel perfect and now again you're going to see that figma's Orange Lines here are really coming in clutch just like that so we've got all four of them in and now what we're going to do is we're going to actually start adding the product titles so press T and and for this one it's called Venom we're going to have the price right underneath that so press T again from 149 a we do now however need to actually change the font so I think this one is like Gilbert or Gil send just like that and so now as a little figma Pro tip what you can do is you can click on that then you want to press either alt or command depending on whatever you're using and shift and you want to click on both of these now you can press contrl G that's going to group these two together and that now going to be now it's actually going to make it really easy for you to copy and paste things across so copy paste copy paste make sure that it's aligned copy paste and boom there you go so now let's update all of these so this one is called New Moon this is $139 going towards the bottom here 129 this one here 129 this one is called state disco and finally the last element that we need is the CTA so we're going to make a box um and we're going to make this as wide as this so remember this is 500 so what we want to do is press R it looks like we're almost there so make this a little B bit wider just like that and now again what we want is this kind of like boxed in effect and the way that you're going to do that is by clicking this button here which says Stoke then we're going to make the fill instead of black like the other CT that we use we're just going to fill this in with white and now you can see we have a pretty good box there just like that so now we're going to double click on this section here or we can also just click on the previous CT we've used drag them in there and I think for this one we want it a bit more on the left side let's make this black so we can actually see it oh maybe that was it okay there we go so bring it to the front as well by right clicking and remember here we're going to change this eth to shop now just like that and now we have this little arrow that we want to include so how do we do do that click on the shape on the top here shift L which is a little arrow and click and drag across and so yeah this obviously is not straight so let's do it just like that and now we've got it sorted so this looks like it's a little bit big you might want to reduce that um for mobile Vis visibility I would recommend anything above 32 uh that will be nice and easy to uh re on top so now we've got this button here click and drag everything and then we're going to press alt G that's to group everything together now we can just really nice and easily copy and paste this across to everything and boom just like that okay wait let me move this across so it actually looks the same but just like that we've now basically created an identical email um it was nice and easy and how long did it take us literally under 16 minutes so I'm going to stop that so I hope that was helpful and again just remember that every skill that we went through in this tutorial here you are going to be rinse and repeating that exact same process with every single email that you design whether you use these um templates that we provide for you or whether you create these types of emails yourself so hopefully that was helpful so we've just finished designing this email it looks great but it's actually not going to make us any money while it's sitting here in figma so jobs not quite done yet but luckily we've actually done the hardest part of the entire process so actually getting this inside of clavio is by far the easiest bit so what you want to do is you want to go over to your figma and what you're going to press for me is s literally the letter s right what that does is once you press s you're going to see this slicing tool come up on the top right and now this is what allows us to actually slice up this entire design into images that we can export so what you're going to do is you're going to click up into the corner and you're going to find that like figma does this little auto aim thing where it kind of just like drags your cursor all the way to the top right but if you want to get real granula with it you can really just zoom in by pressing command or alt and you're going be able to see and make sure that you're actually right up into the corners another way you're going to make sure is you're going to see here on the left side in the frame that you've just built it's going to say slice one now you can click into that and you can actually just make sure that it's as wide as the frame so you can also just click and uh click and scroll scroll into here and just make sure that you get the entire frame uh and all the details for example like that little line there now this is our first slice again we're going to click on this by just clicking on the left side here so from here what we can do is now export it so we're going to do it as a JPEG because pngs they're a little bit heavy um and what one thing we want to do before we actually export this into clavio is we want to reduce the file size so again going back to figma we're going to click export boom now we got it here and you can see it's actually pretty decently sized right like that's almost 1 Megabyte that's going to be really slow for um any like mobile or any desktop to load so we're going to compress this um I use tiny p&j because I find Panda pretty cute but to be honest you can use any web compression thing that you find online again we're going to click up here into the download history and we're going to see um our slices that we've downloaded so we're going to go to the latest one and just click and drag here now you can see that this is on its way to being oh beautiful literally reduced by 85% which is massive on a file size so before we start exporting into clavio um let's jump into figma and let's slice up everything else so going into here zooming in slightly pressing s click and drag just like that now now once you get to here right because obviously there's four products here so each of these they're going to require their own little image slce right like we can't just have like one big blanket one to cover all of them because they're all different products so what you want to use here is what's called link logic and that's just to think like if you're going to click somewhere on a screen where should that link to logically right so um again because we've got four products here what we're going to do is we're just going to divide this up into four sections instead of one big one so we're going to click and drag this looks about right 600 right it's 600 wide um so that sounds about correct uh and now we're going to go into the other corner and just remembering here that figma kind of has like auto aim right you can see these like orangey lines that are coming up that is what your mouse is basically going to glue itself too so we can do it like that we can zoom in just to make sure that that is hitting the corner and so now when you zoom in you can kind of see that that slice I just made is overlapped a little bit so we're going to click on that slice and then we're just going to drag it down a sming just like that now that might mean the bottom is a little bit long so we're just going to scroll in and drag it back up nice and easy now from here we're going to press s on the bottom left do the same thing for the bottom right and now you're going to see right like again because figma it's pretty smart like that right like it uses kind of order correction and you can see that everything here right in the middle just really satisfyingly comes together so now we've got all of our slices ready to go we can see them on the left side here so got slice one 2 six so we're going to export slice two do that as a jpeg slice three again as a JPEG [Music] four five six just like that so now these are all going to be available in my recent download history amongst other things so now we're going to click oh no drag this in there and then we're going to let George the panda do his thing so four five six so George depanda has saved us a grand total of one megabyte which is actually huge right again remembering that people are probably going to be watching um sorry reading your emails on their mobile they could be on the train they could be using data so every bit of optimization is going to count so now we're going to download all of these and here is the easy part which is once you're inside of clavia all you have to do is click on your downloads and quite literally click it and drag it just like that boom now it's in going to delete this we're going to delete this now we're going to look for slice two perfect now if you remember looking back at our design that we have this product section at the bottom right so we can't just click and drag like we did for the first two slices we're actually going to need to create a table inside of clavio for this which also is quite simple so for this one we're going to create a table and what we're going to do is we want to make sure that there's no padding that's going to interrupt the design so we're going to turn everything to zero we're going to change both of them to text cells I sorry to image cells and now we're going to go back to our downloads and to find slice three oops that's the wrong side SCE [Music] three go to this side and replace it by uploading an image and now we're going to do slice four and now an easy way we can do it is because this table already has the settings we've set up so let's duplicate it across and now for this bottom image we are going to replace it we're going to upload a new image and we're going to do slice 5 oh interesting okay we're just going to get rid of this first R okay now we're going to replace this right side with slce number six and that is it we have now created designed a great looking email in literally 15 minutes probably taking another 5 minutes to actually Chuck this inside of clavio and now you're actually good to go so this is literally the entire step-by-step process of designing an email inside of figma and then actually slicing it so that it doesn't stay in figma it actually goes out to your email list where it can make you money so I hope this was helpful and if you have any questions on this then leave them in the comments below I'm happy to help you out and that's the whole video so if that was helpful or if you learned something new I'd really appreciate it if you could leave a like on the video uh and feel see free to subscribe to the channel as I will be releasing tutorials every single week on anything to do with email marketing and just as a reminder this doc that I went through it is going to be available in the video description and inside of here you are going to get access to the exact figma that we went through together as well as your five free email templates um including the ones here and this is actually the one from the video in case you want to do this more quickly yourself now in case you do need a bit more inso inside of the same doc uh we actually do have massive swat file that we created internally with over 100 0 emails that we've collected including email breakdowns of designs we've actually created and this is basically just designed to give you infinite inspo to create your own emails for your brand and finally just coming to the end here but if you're still not sure how to design High converting emails maybe you don't have time maybe you don't have capacity or maybe you just want to work with a team of experts you can book a call with us here um this will be linked in the description below we'll create your full custom email strategy all of course beautifully designed uh but also with a very robust strategy attached to it and we guaranteed to add 25 all the way up to 50K in monthly email Revenue in under 60 days for your brand so have a chat with us uh and we'll let you know how we go anyways hope that helped and I'll see you in the next one

Channel: Don Florentino | Email Marketing

Views: 139

Keywords: email design, email marketing tutorial, email marketing, figma tutorial, figma

Id: FL8e8ixiBXc

Length: 31min 44sec (1904 seconds)

Published: Tue May 14 2024