How to export HTML emails from Figma to Moosend using Emailify

Video Transcript

Today, I’m going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Moosend email marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the resources icon at the top here, and then if you search for Emailify under the “Plugins” tab, click on that and then click on the Emailify item. You can run the Figma plugin by either clicking on this “Run” button here, or I’d recommend clicking on this little save icon here. That’s going to let you run the Figma plugin from your saved Figma plugins list. I’ve already clicked on the “Save” icon, so I’m just going to go to my 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 we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it helps you design HTML emails in Figma, which you can then export to production-ready code from the Figma plugin. I’m just going to create a brand new email here called Moosend template example, and I’m just going to click on add new email if I container. I’m just going to create a really simple example. I’m not going to go through all of the design tools that the Figma plugin offers today. If you’re new to the Figma plugin and you’re interested in learning more about that, there’s a bunch of other good tutorials on the YouTube channel and documentation that you should check out. For today, I’m just going to be creating a really simple example and not modify any of the design or content. I just want to basically show you how to export this to HTML and then get it into the Moosen platform.

Once you’re happy with your design and components, go ahead and click on the footer tab in the Figma plugin, then scroll down to the letter M. Under the letter M, you’ll see a Moosend option for a footer, so go ahead and click on that Moosend footer. That’s going to automatically pre-populate these links here with the correct tags that Moosend is going to be looking for. For example, if we click on this unsubscribe link and then click on the link settings up in the Figma plugin header, we can see here that the unsubscribe link tag has been pre-populated along with the view and browser link as well. These are automatically going to work once we upload our HTML to Moosend in a minute.

Now that we’ve got our Moosend footer included in the design, and assuming you’re happy with the layout, you can preview the HTML just by clicking on the preview button in the Figma plugin. That’s just going to give you a real-time HTML preview of what that code is going to render like in your email client. You can see here that we can switch between mobile and desktop, allowing us to check out the design before we export it for Moosend. If you want to add things like mobile overrides, you can click on the settings button here and then click on any of these layers to add mobile overrides like font size and padding. I’m not going to go into detail on these today, but feel free to check out the documentation and other video tutorials for more on that.

I’m just going to close off the preview now. I’m happy with my HTML template, so I’m going to close that off and then click on the export HTML button in the top right of the Figma plugin here. If you go ahead and click on export HTML, you’ll see that the default option selected is the HTML email option. This will let us download the HTML to our computer, but I want to go to the platform integration section here and scroll down to the letter M. You’ll see Moosend as one of the options, so just click on that Moosend option. Once you’ve got that selected, we can now add things like our subject line. I’m just going to add a test subject line here. You can also add preheader text, which shows up next to the subject line. When you open up the email in your email client, you’ll have the subject line, and the preheader text shows up underneath or next to that. I’m just going to add some copy here and then export this for Moosend.

I’m going to go ahead and click on this export for Moosend button now, and that’s going to export the HTML and images for me. Once it’s done, you’re going to get this message here that says your email code is ready for importing into Moosend. Click on this download your zip file button, pick anywhere to save it, and I’m just going to save it to my desktop. Once you’ve saved that, unzip that file. I’ve just unzipped it on my desktop and opened it up here. Inside the zip file, we’ve got a previews page which lets us check out the email that we exported in our preview. For example, if we create a new tab in our browser and drag that in, you can load up that preview to see what it looks like in desktop and mobile. The file we are looking for today is inside the email template folder.

You can see we’ve got our folder name matching the frame. Moosend template email has a folder called Moosend template email, and what we want to get is this index.html file. If we get that index.html file and then go to Moosend, log into your Moosend account, go to campaigns up the top here, and click on regular. Once it loads up, click on this create new campaign button in Moosend, click on regular, and then the create button under that regular heading. Once that loads up, you can do things like give it a name. I’m just going to call this test campaign and subject line. We can use the same subject line that we used in our Figma file. For preheader or preview text, you can leave this blank if you’ve already added it in your Figma file. Remember, we just added it to this input field here. If you’ve already added your preheader text here, you don’t need to add it again in Moosend or it will double up, but you can add the subject line here and also in Moosend as well. The subject line is going to get rendered in the title tag in the HTML, so if you’re using things like viewing the browser links, this text here is going to show up as the name of that tab or browser window. Populate this to be the same as Moosend, but if you’ve populated the preheader text, just leave that blank and keep the subject line the same.

Now that we’ve got that populated, click on next. That will bring us to the list. Choose your email list, whichever list you want to send the email to. This will bring us to step three, which is the design step. This is where we can now import our custom HTML design into Moosend. Scroll down to the bottom of this page and go down to this imported campaign template section. Toggle that from off to on. Click on that toggle switch in the bottom right, and that’s going to swap that custom design template out for this imported campaign template section. Now, you can see we’ve got these different fields here, and it’s giving us a few ways to import the code.

The method we want to use is importing it via pasting in the HTML code. To import our HTML that we just exported from the Figma plugin, we need to open up that HTML file. I’m going to open up a new browser window, drag and drop that index.html file we exported into this folder here, and drag and drop that into your browser. The quickest way to get the code is by right-clicking anywhere, going down to view page source, and clicking on that. Here you’ll see all of the HTML code that was exported for this file. Select all of that content by command A on Mac or control A on Windows, right-click that, and click copy. That’s going to copy all of the HTML to your clipboard. Then, go back to Moosend. Where it says import via pasting your HTML code, click on that text area and paste in that code by pressing command V if you’re on Mac or control V if you’re on Windows. You can see it’s pasted in all of that code.

The final thing we need to do is click on this import button. Click on import underneath that text area, and you can see on the right it’s loading in that HTML. This is what the campaign is going to look like. This is the real HTML that we exported from Figma for Moosend, and it’s being loaded up as we expect based on the preview we saw in Figma. You’ll notice down here it’s got the unsubscribe link. If you look in the bottom left of the browser window, you can see that it’s being populated with a dynamic unsubscribe link and it’s also populating the view in browser link. You can see it’s adding the Moosend link to view this campaign in the browser once we send it out.

That’s basically ready to go. The next thing we need to do is click on the next button again in the bottom right corner. For this step, you can skip it. It’s just saying you can add things like dynamic content or unsubscribe links. As we’ve already added our unsubscribe link, you don’t need to do this. Leave that blank and click on next. This will give you the final step to schedule the delivery. If you want to send the campaign now, you can send it right away or schedule it to be sent at a later time. If you’re using the Moosend platform, you’re probably already used to this step anyway. I’m not going to go through how to send out the campaign and schedule that. You can do that in your own time. Once you’re happy with it, you’ll get to this final preview step once you populate all this content. You can send out the campaign as you want, but the important thing is it’s going to use that HTML code, that HTML template that we just loaded in, and it’s going to send that out as a nice custom HTML email directly from the Moosend platform.

That’s basically it. I just wanted to run through all of those steps with you, showing you how to create, export, and import the HTML code from Figma into the Moosend platform for custom HTML email sends in Moosend. I hope that’s helpful if you’re using the Moosend email platform. Thank you, as always, for watching. We’ll be back soon with more Figma tutorials like this one shortly.