Figma Tutorial: Design and export Emails from Figma to HTML

hey everyone this is adam from figmatic and today i'm going to be showing you how to create and export html emails directly from figma using a plugin called emailify so this tutorial is going to be split up into three different parts the first part is just going to be installing the plugin the second part will be designing our email and the third part will be exporting to html so if you want to skip through anything at any point please feel free to do so and with that we'll get started so the first thing we need to do is just install the emailify figma plugin so if you haven't already done that you can go to the community and search for the term emailify that's e-m-a-i-l-i-f-y and you'll see a result called emailify html email builder pop up and all you want to do is just click on the install button on the right hand side until it says installed and then you can switch back into your figma file so i'm just starting with a completely blank figma file in this case and because i've just installed the plugin i'm going to run it by right clicking anywhere going down to plugins and clicking on emailify html email builder and that's just going to run the plugin that we just installed a moment ago so you can see here because i've run the plugin for the very first time in my page it's prompting me to add an emailify container so an emailify container will allow me to start adding some modules to it so all you need to do is give it a name so in this case i'm just going to call it uh marketing email and i'm going to click on the add new email container button okay so it's just added a brand new blank emailify email frame to our figma file and you can see here now that i've actually added that frame we've got all of these modules available to us so in email if i you've got categories up the top that you can click through so for example we've just gone from header to images to content uh ctas or calls to action and footer so these are all the different categories you can browse through there's many many different content modules and these are all available to you to add to your design with one click so just to give you a demo of how this works we just go to any module in the list that we like and just give it a click and that will instantly add it to our emailify frame so we can add as many of these as we want in this case i might just add a few different types just so we can get a good mix of components going and you can see here it's just instantly adding those components with one click so i'm just going to go through and add a few more i'll add these cards i'll add some content so we can add maybe a testimonial we might want to add some stats so we can do that and maybe just a footer as well so that's roughly what it looks like to design an email you can you can spin one up really really quickly using these modules and these are totally customizable so all of it all it's doing is adding you can see on the left here it's adding real figma layers to your canvas and you can open those up and explore them but they work just like any other component that you designed yourself and because they're all using auto layout you can actually rearrange these just by dragging and dropping the components or the modules up and down on the page so you can just do that as much as you want and rearrange those you can also do that within components so if you wanted to rearrange the text you can just drag those up and down and that will automatically rearrange the elements inside of a module so the other cool thing you can do is change the content so we've obviously got this dummy content that's coming straight from the modules in the plugin but we can change this to whatever we want so i might change that to premium sushi as a as a heading and i can customize that in the figma styles over here on the right hand side so if i want to reduce some of that character spacing i can do that i can make the font size bigger or smaller just as you would normally i can change the button so if i wanted to change this button to more of a stroke button i might knock out the fill and i'll change the stroke and just add that onto there and then i'll just also change the text color so i'm just going to change that to white you can get a sense of how easily you can start customizing these components um you might also want to change the background so for in this case you've got a call to action hero and it's actually got a background image so we can actually change that background image just by opening up the image image fill layer and either choosing an image by clicking on that image or i can just drag and drop one from my desktop and that will replace it over here so it's really easy to change the content and the imagery in the backgrounds uh you can also change the layouts or order layout properties so in this case we've got some padding and we've got some item spacing in our hero component here so if i wanted to change that i can just drag this little slider up and down and that will change the spacing between the elements inside of this module and i can change that as much as i want to get it looking exactly the way that i like so i might just change that to 8 and i can also change the padding so if i wanted to change the padding i can just open up the padding block i might change that to 32 just to add a little bit of padding on there and that's what that looks like so you can go ahead and do that to all of your elements you can change the logo you can change the text and the links up here you can change the avatar and the quote so we can drag a new avatar in if we want to do that and that changes it there we can change the role of the person so we can say just critic and this is all easily changeable so again inside of components we can we can swap these around too so we might want to change the column order so i'm just going to grab the column and you can see there you can just switch it around like that so that's a rough kind of idea of how it looks to create reorder customized components you can basically just go go nuts and change all of the content and the styles you can add backgrounds you can add different background colors and things like that so you get a bit of a sense of what that looks like so the next step we can do to customize our emails even further is we can actually start adding responsive overrides so the way we can do that is just by clicking on the little settings icon in the top left corner of the plugin so this icon that i'm clicking on now and when you open that you can see here that whatever selected layer we've got in our figma canvas it's going to give us some settings that we can customize inside of the plugin itself so for this example you can see here i've got the call to action hero that we were just working on already selected and over here it's got some mobile hero overrides for us so if we wanted to we can actually tell the email plugin what kind of overrides we want specifically on mobile and that could be item spacing so if we wanted the item spacing to be different on mobile than it is on desktop which we're looking at now we can just check that little toggle and put in a brand new value over here so i could put in 12 for example i can also customize the padding so by default it automatically adds some responsive padding i could change that so i could make the top and bottom padding even higher and i can also click into the module itself and start editing the responsive properties for things like text so in this case i'm just clicking on the title that we just changed a minute ago and it's got some mobile text overrides here too so it's automatically overriding the font size and the line height to 32 and 37. i can obviously customize that so i can change that to be higher so i can change that to be 40. i can even change the letter spacing so if i think that the negative three letter spacing on desktop is actually too big i can change that to be slightly less intense so i could make that negative one on mobile and you can see here we've also got the option to add padding so we could change the padding specifically on mobile and that would be applied only on mobile we can also change the alignment of the text so if we wanted it to not be center on mobile we could click on overwrite alignment and just click on the option here to change it and we could align it left or right or just leave it as center in that case i'll just leave it as center and the other neat thing we can do is actually just hide elements entirely so let's say for some reason i actually didn't want this description to show up on mobile i just click on the text layer and right down the bottom you'll see a check called hide on mobile and if you were to click on that that would actually remove this text from showing up specifically on mobile so that's something you can apply to any element if you click on any of these layers you'll see that option show up right there so i'll do one example of the alignment just so you can see what that looks like too so i'll just keep that there and the other neat thing we can do for rows in particular so you can see here it's got in brackets what kind of layer type it is so in this case we've got a row this image text split row and a neat thing we can do in rows is we can actually reverse the column display order so let's say i've got i'm just going to copy this module so i'm going to make three of these and i'm going to make it so these have a couple of different images just so we can tell the difference so i'll just drag drag these images in here and you'll be able to see in a second that we can actually change the order of this on desktop so if we wanted to have this column sitting on the left but on the middle one we actually want the image to go to the right on desktop we can do that by clicking on the row and then clicking on this check box that says reverse column display order on desktop so i'm just going to click on that and it's worth noting that isn't going to change it visually in your figma design this is only going to get applied in the code that we export shortly so again i'll just quickly update this image as well just so you can see the difference uh when we do export it so that's all good to go so you can see here we've got the bottom and the top both don't have that checked but the middle one we've just checked okay so that's all looking really good i'm fairly happy with the email at the moment and i think it's about time we added a couple of links so if i wanted to add a link to a button or a link element you do it the exact same way you just drill down into it in your layers and you can see down here if i expand the layers we've got this navigation module in our header and we've got a link layer here so the link layer is sitting inside of the navigation and you can see here it's got a placeholder for us which is just telling us to insert a url link and so i'm just going to insert my own so i'm going to do just a link to a fake sushi restaurant and i've just added that in there so that means that whenever someone clicks on this link up the top that's actually going to take us to this url that we've just specified here and it works the exact same way for buttons so if you are using a button element inside one of your inside one of your modules you just click on the button and same thing you've got a clickable link url you just put in the url and that will automatically take you to wherever you put put the link in so i can just do a book now link and that will become a clickable link we can also do the same thing for images so if you wanted to link an image you can easily do that just by again clicking down to the image layer and adding your clickable url there so i'm just going to click that and i might add a link to a menu and the other cool thing for images is you can add alt text so alt text is what shows up in your email client when the image hasn't quite loaded yet so you can add a description of the image just in case it doesn't load for some reason so in this case you can just add you know a photo of some sushi and that's what that looks like the other neat thing we can do for images is we can actually override the width and height so let's say for example you didn't want this image to actually be full width when it goes down to mobile but for some reason you wanted it to be you know a very specific set of dimensions so you might want to do 150 by 100 or something like that so you could set that there and that will automatically override the width when it comes down to mobile so i might just leave that there and you'll be able to see what that looks like and if we actually uncheck the fluid with option we can override the alignment of the image too so if i click on the override alignment and i change that to be let's say on the right that's just going to override the alignment of the image over to the right once it gets down to mobile width but for the other ones we're just going to leave them as 100 fluid with and what that means is it's going to actually uh stretch out the image width to 100 of the screen width and automatically figure out its height so that's usually what you would want to do the other option that you can do for the columns is you can actually make them uh not stack if you don't want them to stack so by default you would pretty much want to always stack your columns on mobile so for example having the text over here or the column over here sit underneath the image there might be some cases where you actually don't want to do that so in in the case of the header for example so in our header you can see if we click on this the option to stack the columns in this section is actually disabled and what that means is it's not going to try and put the view in the browser link underneath the logo it's actually going to keep those in the same row and just shrink the width of those so they're always left and right of each other so that's what that looks like there the other thing we can do if we really wanted to is render content as an image so if you want to render a certain block as an image instead of html you can do that just by clicking on this little toggle here and that will automatically make sure that this row here that we've just selected gets exported as an image block a 100 with image block and that will just get scaled down on mobile and the reason you might want to do that is if you've got a whole bunch of sort of weird uh fonts or weird things going on in the image that you know aren't really going to translate well to html and you just want to bake all of that into an image you can do that the alternative way of doing that is if you go to your images tab and you just add a regular you know full width image to your email so we'll just add that at the bottom here the other thing you can do is literally just add content into that layer so if we expand out our image layer here it's just a frame and what we can do is just start adding content to that image so if we wanted to add a caption so if we added sushi chef as a caption or an overlay to the image i'll just make that a little bit bigger make that white and bold so let's say you wanted to place this you know somewhere in the the corner or something like that something that just wouldn't really lend itself to html you might want to just place that you know somewhere like this and in the corner and maybe you want to add some shapes or something for some reason so we might add we might add some shapes to our lockup i'll just make that a different color cool and let's just give him a few stars i think he's worth about four stars so let's go do a four-star four-star review of the sushi chef okay so you can see here on the left inside of my image frame i've got my four star layers and a text layer and what that means is all of that content is going to get baked into the image it won't be exported as html and that's just a really nice way of being able to create lockups custom lockups inside of your images without having to rely on you know finicky annoying html layouts that just really aren't going to work for this kind of scenario so you'll be able to see what that looks like in a second okay so now that we've designed our email in figma it's about time that we exported it to html because that's really what we want to be doing the very last thing i'll show you just before we move on is the favorites category so i haven't shown you that one yet but the favorites category is a special category that automatically keeps track of all of the modules you've already used and it's just a really easy way to going back to finding modules that you've used often or modules that you know you really like and don't have to kind of filter through categories every time just to get back at to so if we wanted this full image one to be used a bunch of different times i wouldn't have to keep going back to images i could just check in on my favorites and just reuse that so it works the exact same way you just click on one of the modules in the favorites category and it will automatically add it to your page as well so i'll just add that one onto here and i might keep this one as an html block just because we made the other one as an image so you can see the difference and if you want to tidy this category up at any time you can just remove some of those by clicking on the little trash icon and that will remove them from the favorites but it will keep them in the original category okay so i'm fairly happy with my email and i think we're going to export it to html now and the way we can do that is just by clicking on the export button in the top right hand side of the plugin and this is just going to bring up the export to code option by default it will automatically select the html option but you've also got a second option which is html and mjml so i'm going to select that one and i'll show you what that does shortly but in summary mjml is the source code for the html so if you have a team of developers or if you're a developer yourself and you really want to customize the email even further once it gets into code the mjml option is going to make that really easy for you okay so the second thing we've got is just to tell it which emails we want to actually export and the reason that's there is because you can have multiple emails in a page so if we created a bunch of different emails on our page so for example if i created a new one just by clicking on the little plus and did a new email container that's just going to add a new email container over here which i can also add modules to so i can just start building out a whole new email over here and you can see here that we've got a new option in our list so to change those i can just click on the little select box and that will change which email i'm editing the other way you can do that is just by clicking on the email itself and you can see up here it's changing which email is actually active okay so i'm just going to add a couple more modules just to give you a sense of some of the different ones that you can actually add and we're actually going to export both of these at the same time just to show you what that looks like so i'll add a couple more just to make it a bit more interesting and i think that's probably enough for now i might just add a little footer as well maybe some navigation okay so i'm pretty happy with that i'm just going to leave that as it is and now i'm going to show you how to export both of these emails to html so once again we're just going to open up our export button so we'll click on the export button and we're going to put in a subject line so we can do new marketing announcements not that this would be your subject but just as a bit of a test and this one's just an experiment experimental email you can also add pre-order text too so if you wanted to add some pre-edit text i'm just going to grab this text for now and drop that in there okay so by default it will automatically check both of the emails or any emails that you've added so to make sure both of those gets exported if you did only want to export one you can check the one that you want and leave the other one unchecked or if you've got many emails you can obviously uncheck and check which ones you want but in this case i'm going to export both so now we selected those the very last step is just to click on export to code so i'm going to click on that now and what this is doing right now is it's taking all of this design that we've just done for both of the emails and it's automatically generating html emails with all of the image assets so that's all finished now it's just telling us that our code is ready to download and it's going to give us a zip file so if we click on the download your zip file button so i've just clicked on that now and i'm just going to save this to my desktop so i'll click on save and you can see up here it's just saved it to my desktop so i'm going to double click on the zip icon and that's just unzipped it to a folder for me so i'll open up the folder and you can see here we've got a few different files so we've got two folders so the two folders are named after our email frames from figma and if i open those up you can see inside of those two folders we've got an image folder for each so we've got images that i can have a look at and you can see over here that these are all the assets from our actual email all saved down and those are all in retina retina resolution and then we've got an index.html file and an index.mjml file so i'll go through those in a second but the first thing i want to show you is the index.html file that gets exported in the root of the directory so if i click on that and open it up in my browser so you can see here that this is just loading up a preview page so this preview page gets automatically generated by the email if i plug in so you don't have to do any work to set this up and what it does it just gives you a really nice quick overview of the html that it's exported so we'll go through this now and you can see here this is real html you've got all of the text you've got your buttons you can see the link for the button in the bottom corner and you can see on the right hand side we've got a small preview as well so the small preview is just a 320 pixel width preview just to give you a sense of what this is going to look like on a mobile device and i'll take you through some of these things now because i just want to remind you of what we did in our design to make some of these things happen so the first thing is we've got our responsive text so if you'll recall we actually added a different type of letter spacing on mobile and a different font size so you can see here that that's taken effect and it's slightly smaller and the letter spacing is not as big we also decided to left align this bit of text just because we wanted to so that's that's kicked in we didn't touch anything on there and for our image remember when we changed it so it was going to be the smaller version we've changed that there and you can see over here the section alignment that we did has kicked into so you've got the image over to the right but the text over to the left on desktop but on mobile it's kept the same ordering so you've got the image on the top and the text on the bottom still so that's that's exactly what we wanted um we also created this image so this a single image that was all kind of baked in to that image and the one underneath it we also decided to create an image just from that layer so that doesn't have any text in it compared to the one up here which is completely editable and you can see over here the difference you've got the sort of stacked version of html versus the one we converted to an image down here and that's just kept it as a full width image so that's a bit of a rough look at what that looks like we've also got our second email down here so i didn't really do too much extra work to this one so it looks pretty standard to what you would expect and that's what that's currently looking like in there okay so now that we've had a look at our email preview uh we can open up our folders and just have a look at what's actually in here as well so if i just grab my code editor and i drag in one of these files i'm just going to drag in the mjml file and you can see here that this is the source code for the email that we just exported so this is really good for a developer if they want to make some changes to the code this is the best place to do it because the compiled code or the html production ready html code looks something more like this and you can see that it's a lot more complicated to work with just because it's been rendered out to a whole bunch of tables and table cells and and things like that it's not very pleasant to work with and so that's why we have included the source file which makes it much easier to work with which you can then recompile back into something that looks like this when you're ready and happy with it okay so that's a rough idea of what it looks like to design and export html emails directly from figma as you can see it's relatively painless compared to the regular process of uh building and designing html emails and being able to use figma as the design tool is uh is really nice i think uh compared to using maybe like an online tool that's slightly more restrictive being able to use the design tool that you already know and love to design the actual content and template and then automatically export that from figma to html i think that's that's kind of the the main benefit over doing it manually or using a different tool that doesn't involve figma so yeah i hope you've enjoyed the tutorial and if you've been looking for a way to create emails html emails and figma with a lot less pain then i hope this tutorial has been helpful for you and yeah best of luck if you decide to give it a go and i hope it helps you and your team with uh html emails in figma okay so until next time thank you as always for watching and we'll be back soon with more tutorials just like this one

Channel: Hypermatic Figma Tutorials

Views: 68,077

Keywords:

Id: OWv4WX3eqvU

Length: 28min 57sec (1737 seconds)

Published: Tue Feb 02 2021