Figma To Klaviyo: How To Import The Correct Way

so you have created your campaign in the figma file you have the copyrighting you have images everything now you're ready to export it to the clay View and to create your campaign but you're unsure what is the best practice to do it correct way this is the part where I see many e-commerce owners make big mistakes and for that reason their deliverability and revenue from email marketing suffer and in this tutorial we're going to cover the best way and the correct way to do this we will cover it step by step so that you can maximize your revenue from your email marketing so why this is so important is that if you do this the correct way which I will show you you will improve your open rate you will improve your CTR and you will improve your deliverability more people will see your emails therefore more people will click on it and ultimately why we are all here for you will improve your Revenue which is the most important part of all this thing and here is in short why you should listen to me on these advices so this is the example of one of our client screenshot of their clavio account and this is some of the most recent campaigns as as you can see the open rates are insanely good even though we are sending three to four emails per week and as you can see ctrs are also very good we are improving them even further and as you can see the most important thing revenue is on point we are generating huge amount of revenue from campaigns and the way we export our figma designs to clayo is one of the ingredients that help us with these results so without further Ado let's get straight to the thing so I have created one example email just for the purpose of this video this is how the email look like I have chosen snowboarding for the topic because I love snowboarding so let's see how you can export this figma file to your caveo and I have chosen this template because you can see it has also these two column layouts here which is one of the cases that you can face when you're designing your emails so let's get to the thing the first thing that you should understand is that you should always use the combination of slices and text slices are the option in the figma where you kind of crop only the part of the frame in this case the frame is the whole email and that way you export that image or that section to your clay account so we will first export only this part of the email so let's do it to access your slice option just click on the S button on the figma or on the top left here you can see there there is the slice you just click on the slice and you have it on so let's crop the first part of this email which is the image part right so yeah we just we're just going to crop this one like this okay see it's all good and now what you should do is to click on the right side click on the export then click on the export slce and whatever number it is there we are so yeah let's now start with importing all these things on your clavio campaign so head over to the clavo this is adami account click on the templates on the left now here click on the create blank email now here I always like to start with a completely blank email template later I will show you how you can create some Universal elements so you that you can speed up the process as I mentioned this is a dami email so uh let's remove all these things click on the delete here so that you're only left with this thing here so now we have a blank email so the first thing that I want you to do is to whenever you export some image or some visual thing with slice or just by downloading it from your figma file you want to compress that file because if you compress all your images that will your email will be lighter and that will Gmail Apple Microsoft and all these email service providers will love your emails your emails will also load up faster when your receiver open them and that just maintains better experience and that compression isn't really noticeable and so it's a really good practice to do so let's do that I always use this tool it's called tiny PNG I will link it down below it's completely free all you have to do is to drag this thing to uh this box here and you can see it's now compressed from 700 kiloby to 200 KOB and now once you have compressed your image all you have to do is to drag this element image here and drag and drop your compressed image to the file there it is so now we have the first part of our email let's go further so the second part here is to have the button and the text and this is super important because I have shown you how you can do it with slices and the problem is that many people actually only export their figma files with slices which is completely wrong that way you end up having only images on your campaign and if you don't have live text and live buttons which I will show you how to do that way your deliverability will suffer and this is the most important part of this whole process if there was only one thing that you could pick up from this video that is that don't use only slices so so let's add the button so to add the button it's fairly simple just scroll all the way below and then drag drop the button element here now of course you want to customize it a little bit let's get the color of this thing click on the color here we want it also to be a bit wider let's say 56 I like to have bold buttons because I don't want my receivers to miss them these are the most important things on your email so let's copy the text shop my snowboard now when you scroll a bit bottom you can see here you can add the padding a bit to the top like this and that's it so now we have the image we have the button here the next thing that we want to add is the text of the email to do that just drag and drop the text element here once you have done that just copy this laum ipsum text in my example so just paste it here keep text only that's what I choose now all you have to do is to customize it a little bit set this as for example 16 pixels then set it uh Central onine I always like to add this thing here like line spacing just to make it more clear is the right board yeah like this add space here and add space here now what I Al always like to do on desktop is to add a bit more padding here and here but only for the PC how I do that I just click here and add 72 so the next thing I want you to do is to understand when you're designing your emails I hate when I see designers using some uh fancy fonts and stuff because most most of the time these fonts are not going to load on your receiver email service providers like Gmail and stuff so anyway whenever you're designing your emails in your figma file try to use the font that is already available in your cavio account because that way when you export your figma designs to your CIO account your emails will look identical to the figma file let's add a bit padding on the top unlock this so we can customize only the top part like this and that's it I'd like also this to be to reduce the corner radius like this and that's looking even better of course for images like this you can use whatever font you want because you will export the slice you will export the image of it and for that reason you don't have to care about it but when you're using the live text and live button there's no point in designing a figma design that has some fancy fonts that will not be available in your C account you can add these fonts in the clavio but most of the time they will not load on your receivers accounts so yeah let's go further so the next element of this email is again this image so what we want to do with the image we want to slice it so again click on the S s then click on this one thing draging like this click on the export then of course again we want to compress it save then when we are on our clavio campaign drag and drop the image here and then drag and drop the one that we have compressed and there it is here we want to add a bit more padding on the bottom to make it identical let's make it 40 for example and that already looks better let's add a bit more let let's add like 56 and that's it cool so we have done the first part of the email the next part of the email is the one that you can see have two columns here and I will show you quickly how you can achieve the similar design and look so first of all to achieve this layout we have to add a new section here scroll all the way below and add a new section there it is now we want to change the background of this section so it matches this one click on this one find the color of it copy that and then click on here on the section then click on the content column go for the custom here then paste the color that you want here and that's it so now to achieve the tool column layout all you have to do is to drag and drop this layout which is columns drag and drop it here number of columns you want to set it as two equal or if you want something different click on that and we have a two column layout here which is great now we want to add the image on the left side and the text on the right side to do that just copy and Export this image again we will compress it now add the image element here drag and drop this one and we have the image here and now you want to add the text element on the right side for the text element we want to copy all these things we will just copy like this and paste it here and because this is black and you cannot see it we want to select it all again and click on this here and set the color as white also we want to change the color as we mentioned to wean in this example and we have our text here now we have to customize it to look identical to do this one here first of all we have to make the headline bold like this we want to make it bigger let's say 24 that's better and we want to have the shop now also bold and we want to have this as let's say 16 and shop now let's make it a bit bigger like 20 see how it looks like I think it looks we can make it maybe 18 like 18 and that that's it cool yeah so now we have the text here now what you want to do here is to obviously link this shop now button to the uh link of the website how you can do that just select this part and click on the link and now here just type in the link of your product I'll type in Google click on the apply and that's it now what I also like to do is to add the link to the headline because many people will click on that headline and if you don't have the link that will be a missed click and potentially missed sale for you so you don't want that to cheve that also highlight that part and click on the link and type in Google now now you might see that uh both these links have the blue line and I like my emails to look perfectly well and I don't want this line to be here and I will show you how you can change this uh line to the white line and remove the top line which is not contained on our pigma file so to achieve that we will use the charity which is super useful because otherwise you would need to know a bit more of the coding and CSS and HTML and all this stuff so how can we achieve that you will go on this here so SCE code you will click on that you will copy the code of this and in chat gbt what you will write are the instructions to help you with this thing and it is going to be for the headline capita Aeron note capita Aon note remove the underline decoration and for the text shop now make the underline decor eration white and you will just paste the code that we have copied previously that's it so now the Char jpt has provided us with the code and all you have to do is to copy this code go to your campaign template and just paste this code click on the done and you can see it looks perfectly well and this is super important you want your email to look just like you have designed just like you have imagined and if you don't know to code and CSS and all this stuff this is how you can achieve that easily with ch gbt so now let's just clone this thing and all you have to do now is just to repeat the step for the other products here which I will not do I have shown you how to do it will just make this video longer for no reason and and if you'd like to make a bit more spacing between these two sections what you can do here is to add a section in between like this and add the spacer element on the left you can see here add it like that you can set the height of the spacer let's say for example 40 and now what you should do is just to change the background of this section let's set it up as it is here it's this color like that and you have the spacer here you can do this let's do this for above like this and now your emails are looking better right so cool thing the next thing that's left to do here is to add the button here let's do it just like add a new section you have to add a new section which is one column section right so uh to do that just add section as I've shown you and add custom here set up the color and now all you have to do is to add the button what I advise you to do is to just replicate this button duplicate it so just duplicate it and scroll all the way down and set it up here and adjust the padding a little bit top let's say 40 let's say bottom 56 and that's it so now we have like our email that looks identical to the one that we have designed here as you can see and we are improving our deliverability because we are using slices and text and stuff and on the end of the video I will also show you a few tips that you can improve your deliverability further then what we have left here let's add a text again uh we have a new section because it's a white section what I advise you to do is to speed up the process like clone the first text and drag it all the way down drag it drag and drop it there and now copy this text which is obviously again low ipsum one and we are not going to waste our time here just make it identical like that and that's it then again we have a button here again I advise you to copy and paste it like that adjust the padding let's say here 24 and here 24 then we have the text on the bottom send it again clone this one one drag and drop here send it and the last thing here is that if we have uh the footer of the email here you always want to use your value propositions where you will tell a bit more about your brand about your offer whatever and for that reason this is super important I didn't really brainstorm what I can have for this uh kind of fictional snowboard brand but I will show you how you can export this thing here as you can see this is an image and this is not an image I will show you how I can export these two parts the first one is the image so let's add the image here again we are going to slice it there it is and you will want to add a bit more padding here so now we also want this to be black as the footer in the figma file what you can do here is just like uh get this section color set up this again as this color now you want this text to be white and to do that just select all these things and make it white also you can make the icons white click on the icons here you can select color as a white and that way we have done with exporting our figma file to the cavio now a few extra tips that are really important thing and I will not do throughout this video but I will show you how to do it is that for each image you want to have the alt text and you want to have the link address so even though this image doesn't contain button or this one doesn't contain any button you should have link address and you should have the alt text because alt text plays a significant Ro in case some of your images don't load because of the preferences of your receiver they can select on their Gmail that they don't want to their images to be automatically loaded so you need to have the Altex if you want to improve your deliverability and you want to have link address because there will be a portion of people that will click on this image and if you don't have any link of it it can be a misclick and therefore you will just lose the opportunity to sell something of course you want to add the link address to this product on this image just like here Google com then add Al text for example image of a bonus tip for you here is that when you create your layout like this you want to speed up the process of creating your next email by making this element Universal so so next time you just paste the universal element which I will show you how to do it to create the universal element you just select the section then click on the star here and you can call this like two column product layout soft CTA click on the create and now next time you have an email which has the similar layout all you have to do is to go on the universal here and simply copy and paste this thing and that's it all you have to do now here to customize this element is to click on the unlock and edit and that way now you can just customize this maybe change the color I don't know for example this color or whatever looks a bit ugly right now but you get the point of this thing so so super useful thing to speed up your time always when you complete with your template creation you want to test out how this email look like on your mobile device because most of your receivers will open your email on the mobile device and you want to check if all your buttons or text have the links because this is super important you might send an email to over 100,000 people and if you don't have an link it's complete miss you just wasted your emails and you missed opportunity to make sales so so that's it for for this video if you have some questions let me know down in the comments and if you'd like us to help you with all these things ourselves with our complete done for you Solutions so you don't have to waste time all all these things and you can focus on more important things on your business check out the link in the video description below and schedule a free disc Discovery call with me personally and that way we can get started with the process of improving your business and like And subscribe if you'd like more content like this because I'll be posting a lot of videos that you can find useful to improve your e-commerce business so that's it for this one see you in the next one

Channel: Teodor Petrovic

Views: 359

Keywords: klaviyo, klaviyo tutorial, how to design emails in figma for klaviyo, klaviyo email marketing, figma to html and css export, klaviyo tutorial for beginners, klaviyo email, how to use klaviyo, klaviyo tutorials, klaviyo email marketing for shopify, klaviyo design, klaviyo email design, klaviyo email templates, how to use klaviyo for shopify, how to export my emails from figma to klaviyo, figma tutorial, klaviyo abandoned cart email, figma, klaviyo shopify, figma how to

Id: O5gkWgxiGwQ

Length: 18min 59sec (1139 seconds)

Published: Mon Apr 22 2024