How to Design Emails in Klaviyo | Design emails with me in Figma and Klaviyo

what's up email marketers you guys recently loved a video I did where I explained how I take my designs from figma and Implement them into clavio for email marketing so today I have a campaign that I need to build out for my designer and I thought I would take you along in the process bringing the design from my designer who did it in figma all the way over into clavio to be seamlessly integrated and beautiful some of the questions I received from the last video were about dimensions and sizes Mobile versus desktop we will cover that today if you are a brand owner or agency owner and you're looking to better understand what content you should be putting in your email marketing flows in clivia for a Shopify eCommerce brand I have something amazing coming for you make sure you sign up below for the wait list for my flow optimization outlines these are prompts and outlines where you can directly frame your content for your clavio automations and easily pass them off to a designer you'll have everything you need packaged up tight and ready to go this is going to be an amazing resource and when you sign up for the waitlist below you will get a special discount when it launches all right let's jump into figma and clavio and design this email here we have the email that was submitted by mydesigner after I gave her my brief which I am going to be sharing how I brief my designer in the upcoming optimize your flows cheat sheet so get on the wait list down below here is the email fully outlined and we are going to bring it over to clavio so I have this is just the remnants of an old email so that I have the footer still in place and some of the fonts and buttons and such but let's start so right away what I want to do is I'm going to build this section since the background here is a nice off-white color I'm just going to copy that color and bring it on over into clavio we're going to pull in the logo this is a PNG so the background what you want to do is use the background color so that if dark mode is on on the computer then you won't get a weird black background 200 seems about right we're gonna do a quick padding on this to be about 20 20. perfection and now we can change this text block color to be that same background color and we will just we're going to do this as plain text so that it can be easily readable in the email so I'm actually going to duplicate this so we can have separate header we have our custom font in here so that is super easy we're gonna go bold let's see what size is it over here it's already I don't think we're gonna go quite up to 30. let's see what 20 looks like four maybe we are going to 30. okay I'm not loving the Bold what font is this over here semi-bolt I don't know if we have a semi bolt in here let's look with medium we will do medium and then we're going to adjust to the proper color perfect we do also need maybe a little bit of top padding here in the block and then we're also just going to pull in this copy for here we're gonna export the image including the CTA so to do that I'm going to create a component I always like to do 2x I don't export over here we're going to export the compartment and you will see that it has two because we did this as plain text this image is going to be a little bit too big so what we're going to do here it is because we are just going to go into edit here crop apply that save perfect so now this top section looks just like this for this next section we're going to need to export both of these images so what I'm going to do here is just make sure it's 2x export make sure it's 2X export again we will make these text sections over here so we already have the right color in here and what we want to do is make it into sections or columns excuse me two equal at columns I just want to get the right colors in here so I'm going to just drag a couple of things around and we're going to add an image duplicate and add an image over here then we will upload images we just exported we want to add some padding because you can see in the design there's definitely some padding Happening Here so we'll just play around with this and make sure that we update the background color to be that same kind of Gray I'm just finessing it until it feels right okay we're gonna get the copy in here to make sure that it is the right font this had hard breaks in it and the designs that's why I'm having to change it here and the top here has way too much padding so we're going to bring this back down to that 10. look at this other picture in here this picture for padding we did 30 30 so we'll do the same thing here and make sure you get that background color fixed we want same over here for text I don't think that there's a CTA in this section now so again the design had these line breaks so we're just going to fix it done all right we gotta update I want Style I want this to be um what's 16 looks right all right we're seeing a little bit of discrepancy here sure that this all matches up perfect I think let's check what it did on mobile okay well not stacking super cool on mobile so what we can do on mobile we're actually just going to hide that image well everything else looks good if we wanted for it to also look like this on mobile we could do it in a table so to do this you would do this we would want the text to be centered and background color is this then so we'll see on mobile now this is side by side it looks a little squishy though so that's an option if you wanted it to be side by side on mobile as well I actually think I prefer stacked so I'm going to go ahead and delete this section and use the columns here in layout instead of table but table is an option if you want it side by side on mobile as well so now we just have this last section here so we're going to continue to use columns in the next section because we could use a table however table doesn't allow you to use buttons so we're going to do columns so that we can do text and a button so here is what we're all do here we have an image in this column right here which is this image we need to change the background color to be appropriate for this section which is this pink color and then I'm going to duplicate this just for ease of formatting and we will add a button and have to play with the design of that so this all needs to get the background color changed we can update the button no Corner radius we want this text to be normal let's see what the text I feel like it's got a little bit of letter spacing there we go [Music] I'm just gonna make the button look a little bit bigger here action everything you need in one daily service background color so I'm going to use some spacers here because we might not need them on mobile so let's get desktop appropriate just adding a couple of spacers in here and then one more on the bottom section blur out foreign okay let's check mobile oh she's kind of a mess it's what we'll do here is we're gonna hide this okay I'm gonna duplicate it and this one is going to be mobile specific and then on mobile only we can move it down otherwise she looks pretty good maybe a little bit too much space in here so I will make this also a desktop only perfect what do we think guys okay so we have this and let's preview into us to make sure we're not email size is good we're a little bit close but we're good and a lot of that comes from having mobile and desktop specific sections with this the same color as the footer they're they are slightly different I would maybe change the footer color of it I think I'm Gonna Leave It so we have this was the design and figma and this is the final version in email looks pretty damn close my tea is gone the design is finished thank you so much for designing with me today I hope that you learned something from transferring Your Design files from figma into clabio please let me know in the comments down below what you learned how you'll be using this and don't forget sign up to get on the wait list down below for the flow optimization cheat sheet this is going to be so helpful it is literally the exact outlines that I use to create and optimize flows for all of my clients it'll tell you what content to include it'll help you hand it off to a designer oh chef's kiss thanks for designing with me today guys don't forget to subscribe like and all of those fun things we'll see you next time

Channel: Monica Grohne

Views: 2,358

Keywords: Email marketing, Email marketing design, Figma, Klaviyo

Id: sjeux3eWoXI

Length: 17min 45sec (1065 seconds)

Published: Tue Aug 15 2023