How to use free Figma email templates to design HTML emails using Emailify

Video Transcript

Today I’m going to be showing you a quick tutorial on how to use the free included Figma email templates in the Emailify Figma plugin which you can then customize and use as a starting point for your own brand and content designs. To get started all we need to do is go to our Figma file, click on the little resources icon up here, and then you just want to search for Emailify. Under the plugins tab, if you click on the Emailify item you can run that Figma plugin by either clicking on this run button here or I’d recommend clicking on this little save icon to add it to your plugins list for easy access later.

I’ve already clicked on the save icon, I’m just going to go to my Figma canvas, right-click anywhere, go down to plugins, then go down to saved plugins, and click on Emailify. That’s just going to run the Figma plugin that we saved a second ago. If you’re new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma which you can then automatically export to production-ready responsive code from the Figma plugin directly. You’ll notice that the first thing it shows is adding a new blank Emailify frame.

This is the default option where you can basically create a new template and then add it to your Figma page. We can click on this add new Emailify container, and that then will allow us to start adding components which we can then customize and spin up our own designs with our own content and brand pretty easily, and then preview that as real HTML and work on that responsive version as you’d expect. But if you don’t want to start from scratch, or you haven’t started building out a component library yet, or you just want some inspiration, or you just want to figure out a bit more detail about how the Figma plugin’s features can potentially create layouts, what we can do as an alternative to starting from scratch is go back to the new email page.

We can click on this little plus icon here, and instead of adding a new blank Emailify frame, what we can do is click on the browse Emailify Figma templates tab. This is going to load up over 100 Emailify-ready free Figma templates that we can duplicate and customize and grab components from to create our own email designs with our own brand as a bit of a head start. Instead of starting from scratch, you can basically just browse through here, find something that you like or would like to emulate, or something you just find interesting. You can click on any of those and duplicate it to your own Figma account for free and start using it straight away.

We can take a look at a couple of these now. For example, if we click on this Netflix template, that’s just going to open up a brand new tab in the Figma community page, and we can go ahead and open that in Figma by clicking on this open in Figma button. Go ahead and click on this blue open in Figma button, and that’s going to open up a brand new tab and automatically duplicate that Figma file to your drafts. You can see it’s got the little Community word in brackets there, just letting you know it’s been duplicated from the Figma community.

You’ll notice that on the left-hand side here, we’ve got all of these layers that were originally created using the Emailify Figma plugin. That’s the way that it works. The Emailify Figma plugin basically helps you to create these layout components. These have all been added initially either from the layouts tab over here or by using the quick add features down here, and then just customizing the design and content using Figma. We end up with something like this.

You can see here that the layout reflects the Emailify structure that you’d expect. We’ve got rows, we’ve got columns inside of those rows, and each of those columns can have a bunch of content stacked. You’ll see here that we’ve got a really condensed layout. It’s using components, we’ve got the same component up here that we’ve got reused down here. It’s a very flexible sort of template in this case.

If we were to edit this font, you can see that that’s updating for all of those instances. This is a really nicely designed Emailify-ready template. The good thing about that is if we click on the preview button, you will see the real HTML preview is looking really, really good out of the box. You can see here we’ve got all of our content. These are all individual images. This is all real HTML text, and these are real HTML buttons that you can then customize and use for your own designs.

What we could do is, if you wanted to reuse some of this content or customize it, we could either customize it in the template itself here and either hide certain sections like this, just removing them or deleting them, or you can actually reuse these components in a new email. For example, if we added a new Emailify frame, I’m just going to call this test template and add that to the page. We can actually move or duplicate those components into this new template as well. If we drag and drop, for example, this row here, we grab that and drag and drop it into the new template, you can see here that it’s automatically adding that into the template there.

Same thing for these buttons. If you wanted to add those in there, you just copy and paste them. When you preview that, those will automatically be good to go. You can sort of mix and match as well. If you wanted to grab some components from another template, just spin up that new email panel again, click on browse Emailify Figma templates, and find a different email that you want to grab some components from.

For example, if we scroll down and see some other things that we might like, you could basically grab another template and duplicate those as well. We’re just going to grab this one here, and again, that’s going to open up the Figma community tab. All we need to do is click on the open in Figma button. I’m going to click that again. Once again, that’s going to duplicate it into a brand new tab and add it to our drafts. Again, you can see here all of the layers are good to go. Then it’s just a matter of copy-pasting these components into our other frame.

We can just jump back into our other tab here, paste those in, and rearrange them as we need to. You can just drag and drop those around, and if we want to grab the photo, for example, we can do that. We’ll just grab this one, and of course, you can customize that. We can change that fill to be darker, or we can just make it black like the other ones, and then click on preview. You’ll notice that all of the components that we just put together all kind of mix and match. You don’t have to worry about any issues because these were all originally designed using the Emailify Figma plugin.

This can be a really easy way to get started if you’re new to the Figma plugin, or even if you’re experienced with it and you don’t want to go to all the trouble of manually designing all of these components yourself. Using the built-in free Figma templates that the plugin offers is a really good way of automatically grabbing some of those components, which you can then build on and customize to your heart’s content.

For example, you can obviously change the fonts, content, and logos. You just swap out these layers, get rid of that image, and drag a new one in there, which would automatically update that. We can basically change all of this to be whatever we want, and that’s going to get reflected in the template as you’d expect with the Figma plugin. For example, we could change this, make that red as well, and make the text white to match the other button. When we refresh that, those changes will automatically get included as well.

I’m not going into all of the details about the mobile customizations and things like that, but there’s a lot to explore there. If you click on any of these layers and then click on the settings button, either in the preview window or the main window, you can do things like override font sizes, padding, and visibility on mobile or desktop. You can then go through and add all of these mobile overrides. When you open that up on desktop and mobile, you’ll be able to see those overrides taking place.

Once you’re happy with the email design and you’ve checked it out in the preview, as we just had a look at a moment ago, you can then export that to production-ready HTML by clicking on the export HTML button in the top right. You can select the emails you want to export. You can do things like add your subject line and preview text as well. Then you can choose what platform, if any, you want to export it for. If you’re using something like Klaviyo or MailChimp, you can automatically paste in your API key, and that will upload it to MailChimp or Klaviyo for you.

Today, we’re just going to use the simple download-to-your-computer option and export it to an HTML file. I’m just going to click on export to HTML. That will go through and automatically export all of the images, generate all of the HTML code for me, and then allow me to download that as a zip file. It’s just finished exporting. I’m going to click on download your zip file and save that to my desktop. If I unzip that file, I can double-click on my zip file and open that up. When I open up my finder and open that folder, I can see we’ve got our two emails that have been exported.

The index.html file inside of both of those folders is named the same as what we named our Figma frame. We’ve also got this previews file. We can drag and drop that preview file into our browser, and that’s going to give us a nice preview page showing what the design will look like on mobile and desktop. We’ve got both emails on here, you can see this is real HTML code that we’ve just exported. You can see it on mobile as well. We can change the width of that mobile device just to make it easier to see what that looks like at different widths.

That’s basically it. We’ve got our nice preview page, and you’ve got the real emails that these are being loaded from inside both those folders. We can drag and drop that into the browser, and then we’ve got our full email there. It’s looking really good. Again, you can see all of that code just by going to the “View Page Source,” and that’s all of the HTML code that’s automatically been generated by the Figma plugin, ready to go and use in your own email-sending platform of choice.

I just wanted to show you what that looked like as a final step when you’re ready to export your HTML. Hopefully, that’s been helpful. If you’re interested in learning more about the Figma plugin, as I said, you’ve got a whole bunch of templates. We’ve got 102 templates in there at the moment, feel free to browse all of those, duplicate them again totally for free, and use them as inspiration or reference. They’re also a really quick way of spinning up brand-new components without having to manually design them.

You can basically mix and match those, customize them with your own content, and hopefully, that’s going to give you a really quick head start at creating your own email campaign designs for your brand with your own content. We’ll leave it there for today. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.