How to export HTML emails from Figma to Mailercloud 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 Mailercloud 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, and search for “Emailify”. Under the “Plugins” tab, click on the Emailify result. You can run that Figma plugin by either clicking on the run button here, or I’d recommend clicking on this little “Save” icon. This will let us run the Figma plugin from our saved Figma plugins list.

I’ve already clicked on that 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, it helps you design HTML emails in Figma, which you can then export to production-ready code automatically with one click.

Today I’m just going to be creating a really simple example. I’m going to call this an example template and click on the add new Emailify container button. This will add a special Emailify frame to your page that we can then start inserting components into. I’m not going to be going through all of the design features today in this tutorial. If you’re interested in learning more about that, you can check out some of the other video tutorials on the YouTube channel or go to the documentation site, where there’s heaps more information. Today I’m just going to be keeping this really simple and creating a template using some of the predefined components without customizing them. If you were adding your own, you would customize the content and design in Figma, but for today I’m keeping it simple.

Once you’ve got your main template and components set up, go over to the footer tab in the Figma plugin and scroll down to the letter M. Find the Mailercloud option and click on it. This will automatically add the footer component with prepopulated “unsubscribe” and “view in browser” links. We can inspect those by clicking on the link layer, then going to the settings button in the Figma plugin. You can see it’s automatically pre-populating the URL to be the “unsubscribe” link for Mailercloud along with the “view in browser” link. These dynamic links will get swapped out automatically when you send this email via the Mailercloud platform.

Once you’re happy with that, you can preview the email by clicking on the preview button in the Figma plugin. This loads up a real HTML preview of what the design will look like when exported to code. You can swap between mobile and desktop to see how it looks. That’s looking pretty good. Again, I’m not going to go through all of the features today, but if you want to, you can add optional mobile overrides. For example, you could click on a component, click on the settings button, and specify padding, or if you’re in a text layer, you can change the font size or line height for your mobile designs. But today I’m leaving this all as default and am happy with the preview.

Once you’ve finished previewing your email, close out of that, and now click on the export HTML button. Click on export HTML, change this HTML email option, click on that, go down to platform integrations, and scroll down to the letter M. Click on the Mailercloud option, and you can see Mailercloud is now selected. Add your subject line and the preheader text. The preheader shows up next to your subject line when viewing it in Outlook or Gmail. This will automatically get added to your HTML template. We need to read the subject line in Mailercloud in a moment, but also add it into the Emailify Figma plugin as it automatically populates the title tag, visible when someone uses the “view in browser” link. Add that here and into the Mailercloud platform.

Once we’ve finished with our subject line and preheader text, click on the export for Mailercloud button. This will automatically export all the HTML and images for us and give us the code to download. Click on this download your zip file button, save that anywhere to your computer, and unzip the file. You’ll get a new folder, which will look something like this. Inside it, we’ve got our HTML, a previews page to preview the content, and you can drag and drop that into the browser to see how it looks on desktop and mobile easily. The code we’re going to use is inside this nested folder. The example template is named the same as our Figma frame, matching whatever you’ve called your frame in Figma. When we open that file in our browser, it will open up the HTML design we’ll use in the Mailercloud platform.

Down here, it’s telling us we can now create a new campaign in Mailercloud and then copy and paste that HTML into the code input. Log into Mailercloud manually or click on this create a new campaign link, opening the correct page automatically. We’re now in the Mailercloud.com site. I’m already logged in, and it’s taken us to the create campaign page automatically. Call this test campaign, and take the subject from the other input. Call this one test subject, which we used in the Emailify Figma plugin. Select your sender ID. Assuming you’ve already set the sender ID up in Mailercloud before, you won’t be able to create a campaign until you’ve created a sender, so make sure that’s set up first.

Click on the choose email template button on the right-hand side, and select the HTML editor option. Avoid the other ones and jump right to this one where we can copy and paste our HTML code. Click on the HTML editor option, and you’ll get this HTML code input here. The easiest way to get our HTML in there is to go to the folder we were just looking at, take the index.html file, and drag and drop that over here. This will automatically drop all of that HTML code into our Mailercloud editor. All the code that we exported is in here now. Click on continue, and you can see it’s loaded up our HTML as expected. This looks the same as it did in Figma, which is great. You can see it on mobile and desktop, preview that in here as well if you want, but once that’s set up, click on Save and continue, and that will save your template.

I’m not going through the whole campaign sending method, but you can send this to whatever lists you like. I wanted to take you through the initial step of uploading your HTML template. Now you can send out any custom HTML template designed in Figma with Emailify and quickly drop that into your Mailercloud platform. You’ll be able to send that out as a custom designed HTML email to any lists in the Mailercloud platform.

That’s basically it. I hope that’s helpful if you use the Mailercloud platform and have been wondering how to make it easier to design totally custom HTML designs. This is a great way to streamline your workflow from Figma directly into the Mailercloud platform. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.