How to design and export Emails from Figma to HTML using Emailify

Video Transcript

Today I’m going to be showing you how to create and export HTML emails directly from Figma, using a Figma plugin called Emailify.

This tutorial is going to be split up into three different parts: the first part is just going to be installing the Figma plugin, the second part will be designing our email and the third part will be exporting the email from Figma to HTML. If you want to skip through anything at any point, please feel free to do so; and with that we’ll get started.

The first thing we need to do is just install the Emailify Figma plugin. If you haven’t already done that, you can go to the Figma Community and search for the term “Emailify”, 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.

I’m just starting with a completely blank Figma file in this case, and because I’ve just installed the Figma 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 Figma plugin that we just installed a moment ago. You can see here because I’ve run the Figma plugin for the very first time in my page, it’s prompting me to add an Emailify container; an Emailify container will allow me to start adding some modules to it. All you need to do is give it a name; in this case I’m just going to call it “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 in the Emailify plugin; 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”, “CTAs” (or “calls to action”) and “Footer”. 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.

Just to give you a demo of how this works, we can 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 in Figma. 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. I’m just going to go through and add a few more, I’ll add these cards, I’ll add some content, we can add maybe a testimonial, we might want to add some stats, we can do that and maybe just a footer as well.

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. All it’s doing is adding, you can see on the left here, it’s adding real Figma layers to your Figma canvas and you can open those up and explore them, but they work just like any other component that you designed yourself. Because they’re all using Figma auto-layout, you can actually re-arrange these just by dragging and dropping the components or the modules up and down on the page; 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.

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 Figma plugin, but we can change this to whatever we want. I might change that to “Premium Sushi” as a heading, and I can customize that in the Figma styles over here on the right hand side. 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 in Figma. 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. 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. You might also want to change the background; 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 fill Figma 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.

It’s really easy to change the content and the imagery in the backgrounds, but you can also change the layouts or order layout properties. In this case we’ve got some padding and we’ve got some item spacing in our hero component here. 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; I can change that as much as I want to get it looking exactly the way that I like. I might just change that to “8” and I can also change the padding; if I wanted to change the padding, I can just open up the padding block, and I might change that to “32” just to add a little bit of padding on there, and that’s what that looks like.

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. 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. Inside of components, we can we can swap these around, too. 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. That’s a rough idea of how it looks to create re-ordered 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.

The next step we can do to customize our HTML emails from Figma even further is we can actually start adding responsive overrides. The way we can do that is just by clicking on the little “Settings” icon in the top left corner of the Figma plugin; 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 Figma plugin itself.

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. If we wanted to, we can actually tell the Emailify Figma plugin what 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 after we export it to responsive HTML, which we’re looking at now, we can just check that little toggle and put in a brand new value over here. I could put in “12” for example, I can also customize the padding; by default it automatically adds some responsive padding, but I could change that, so I could make the top and bottom padding even higher.

I can also click into the module itself and start editing the responsive properties for things like text. 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; it’s automatically overriding the font size and the line height to “32” and “37”. I can obviously customize that, and I can change that to be higher; 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; I could make that negative one on mobile, and you can see here we’ve also got the option to add padding; 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 centered on mobile, we could click on “Override 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 this case I’ll just leave it as “Center”.

The other neat thing we can do is actually just hide elements entirely. 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; 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. I’ll do one example of the alignment just so you can see what that looks like, too.

The other neat thing we can do for rows in particular; you can see here it’s got in brackets what 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. 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. 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. 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)”; 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 responsive HTML code that we’ll export shortly. Again, I’ll just quickly update this image as well just so you can see the difference when we do export it. That’s all good to go; 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.

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. If I wanted to add a link to a button or a link element, you can 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. 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. I’m going to do just a link to a fake sushi restaurant, and I’ve just added that in there; 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.

It works the exact same way for buttons; 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. I can just do a “book now” link and that will become a clickable link.

We can also do the same thing for images; 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; I’m just going to click that, and I might add a link to a menu. The other cool thing for images is you can add alt text. 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. In this case, you can just add 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. 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 a very specific set of dimensions; you might want to do 150 by 100 or something like that. You could set that there and that will automatically override the width when it comes down to mobile. 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. 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 width, and what that means is it’s going to actually stretch out the image width to 100 of the screen width and automatically figure out its height; 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 not stack if you don’t want them to stack. 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. In the case of the header for example; 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; that’s what that looks like there.

The other thing we can do, if we really wanted to, is render content as an image. 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% width image block, and that will just get scaled down on mobile. The reason you might want to do that is if you’ve got a whole bunch of sort of weird fonts, or weird things going on in the image that aren’t really going to translate well to responsive 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 full width image to your email; 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. If we wanted to add a caption; 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, let’s say you wanted to place this somewhere in the the corner or something like that, something that just wouldn’t really lend itself to responsive HTML, you might want to just place that somewhere like this and in the corner. Maybe you want to add some shapes or something for some reason, so we might add some shapes to our lockup; I’ll just make that a different color, and let’s just give him a few stars, I think he’s worth about four stars. Let’s go do a four-star review of the sushi chef; 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 responsive HTML and that’s just a really nice way of being able to create custom lockups inside of your images without having to rely on annoying HTML layouts that just really aren’t going to work for this scenario. You’ll be able to see what that looks like in a second.

Now that we’ve designed our email in Figma, it’s about time that we exported it from Figma 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; 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 really like, and you don’t have to filter through categories every time just to get back at to. 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; 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 Figma canvas as well. I’ll just add that one onto here and I might keep this one as a responsive HTML block, just because we made the other one as an image; you can see the difference. 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, I’m fairly happy with my email we’ve just designed, and I think we’re going to export it from Figma to HTML now; the way we can do that is just by clicking on the “Export” button in the top right hand side of the Figma 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”; 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 compiled, production ready HTML; 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 exported from Figma into code, the MJML option is going to make that really easy for you.

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. If we created a bunch of different emails on our page; for example, if I created a new one just by clicking on the little “Plus” icon 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. 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; 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.

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 emails from Figma to HTML at the same time, just to show you what that looks like. 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; I’m pretty happy with that, so I’m just going to leave that as it is.

Now I’m going to show you how to export both of these emails from Figma to HTML; once again, we’re just going to open up our “Export To Code” panel, so we’ll click on the “Export” button, and we’re going to put in a subject line; 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 “experimental email”. You can also add preheader text, too. If you wanted to add some preheader text, I’m just going to grab this text for now and drop that in there. By default, it will automatically check both of the emails, or any emails that you’ve added to make sure both of those emails get exported from Figma to HTML. 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.

Now we’ve selected those, the very last step is just to click on the “Export To Code” button; I’m going to click on that now, and what this is doing right now is it’s taking all of our Figma design that we’ve just done for both of the emails, and it’s automatically generating responsive, production-ready HTML emails from Figma with all of the image assets. That’s all finished now, and it’s just telling us that our HTML code is ready to download and it’s going to give us a zip file; if we click on the “Download your zip file” button, I’ve just clicked on that now, and I’m just going to save this to my desktop. I’ll click on “Save”, and you can see up here it’s just saved it to my desktop.

I’m going to double click on the zip icon, and that’s just unzipped it to a folder for me. I’ll open up the folder, and you can see here we’ve got a few different files. We’ve got two folders; 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; we’ve got images that I can have a look at, and you can see over here that these are all the Figma image assets from our actual HTML email all saved, and those are all in retina resolution. Then we’ve got an index.html file and an index.mjml file; 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; if I click on that and open it up in my browser, you can see here that this is just loading up a preview page. This preview page gets automatically generated by the Emailify Figma plugin; you don’t have to do any work to set this up. What it does is it just gives you a really nice quick overview of the HTML emails that it’s exported from Figma; we’ll go through this now.

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. You can see on the right hand side we’ve got a small preview as well; 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.

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. The first thing is we’ve got our responsive text; if you’ll recall we actually added a different type of letter spacing on mobile and a different font size; 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; that’s kicked in, we didn’t touch anything on there.

For our image, remember when we changed it; 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 in, too. 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; you’ve got the image on the top and the text on the bottom still; that’s that’s exactly what we wanted. We also created this image; this single image that was all baked in to that image. The one underneath it we also decided to create an image just from that layer; that doesn’t have any text in it compared to the one up here, which is completely editable. You can see over here the difference you’ve got; the stacked HTML version versus the one we converted to an image down here, and that’s just kept it as a full width image.

That’s a bit of a rough look at what that looks like; we’ve also got our second email down here. I didn’t really do too much extra work to this onem so it looks pretty standard to what you would expect, and that’s what that’s currently looking like in there.

Now that we’ve had a look at our email preview, we can open up our folders and just have a look at what’s actually in here as well. 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; 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 HTML code, or the 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 that’s why we have included the MJML source file which makes it much easier to work with, which you can then recompile back into HTML, something that looks like this, when you’re ready and happy with it.

That’s a rough idea of what it looks like to design emails and export them from Figma to HTML; as you can see it’s relatively painless compared to the regular process of building and designing HTML emails, and being able to use Figma as the design tool is really nice compared to using 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, then automatically export that from Figma to HTML, I think that’s that’s the the main benefit over doing it manually, or using a different tool that doesn’t involve Figma.

I hope you’ve enjoyed this Figma tutorial and if you’ve been looking for a way to design and export HTML emails from Figma with a lot less pain, then I hope this tutorial has been helpful for you. Best of luck if you decide to give it a go, and I hope it helps you and your team with designing and exporting HTML emails from Figma. Until next time, thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one.