How to export HTML emails from Figma to Ongage 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 Ongage email marketing platform using the Emailify Figma plugin.

To get started, go to our Figma file, click on the resources icon at the top here, and search for Emailify. Under the Figma plugins tab, click on the Emailify result. You can run the Figma plugin by either clicking on this run button up here, or I’d recommend clicking on this little save icon here, which lets you run the plugin from your saved Figma plugins list. I’ve already clicked on that save icon, so I’ll go to my canvas, right-click anywhere, go down to Figma plugins, then saved Figma plugins, and click on Emailify. This will run the Figma plugin we saved a second ago.

If you’re new to the plugin, it helps you design HTML emails in Figma, which you can then export to production-ready code automatically. In this case, we’re uploading it to the Ongage platform. I’m creating a new email and calling it “example template.” Click on the “add new Emailify container” button to start adding components and design elements into the email frame.

I’m not going through all of the design features in the Figma plugin today. If you’re new to the plugin and curious to know how to use all the features, I’d recommend checking out a couple of the other videos on the YouTube channel or going through the Emailify documentation site. For today, I’ll keep it simple and add a few component blocks, which we can then upload to the Ongage platform.

I’m adding a few bits of content here without customizing any of it today. Once you’re happy with your design and you’ve customized it with your content and branding, click on the footer option. You have this footer tab over here; click on that and scroll down until you reach the letter “O.” You’ll notice an option for the Ongage platform. Click on the Ongage footer component, which will automatically add a footer with the unsubscribe link and address tag automatically populated.

You can see the address tag here, which will get pre-populated later. Importantly, we also have the navigation unsubscribe link. Click on that link, then click on the settings button in the Figma plugin, and you’ll see it’s automatically pre-populated with the unsubscribe link for the Ongage platform. You can customize that footer however you like, but it’s worth going through that footer option to quickly add those links without finding them each time.

Now that we’ve got our design in Figma, we need to preview it. Click the preview button in the Figma plugin, which loads a real HTML preview of what the email will look like on mobile and desktop. It’s responsive, and if you want to add some overrides to any of these elements, click on the element, go to the settings panel, and you can change things like font size, padding, or other bits and pieces for your mobile style overrides.

I’m not going through all of these in detail today, but they’re available for you to customize the design on mobile. Once you’re happy with the preview and think it looks good, close that preview window, then click on the export HTML button. Click on export HTML, change the default HTML email option, scroll down to the platform integration section, and find the letter “O.” Click on the Ongage option. Now that we’ve selected the Ongage option, add our subject line. I’m calling this subject “test,” and also our preheader. The preheader text gets added after your subject line when your customer or user opens that email in their client, like Gmail or Outlook. Put in whatever preview or preheader text you want to include here, and it gets automatically included in the HTML.

Once you’ve added those, click on the export for Ongage button. This automatically generates the production-ready HTML, uploads those images, and gives us a zip file to download. Once the confirmation message pops up, click on the download your zip file button, then save it anywhere. I’m saving it to my desktop. If you unzip that file, you’ll get a folder with a couple of different files. The preview file is just a preview HTML file that you can use to check out all of your emails in one place. For example, if we open that up, you can see what it looks like. Drag it in here, and you can see it’s a nice little preview page showing the desktop and mobile version. This is really good for reviewing the emails.

For actually uploading them, the file we’re interested in is inside of this example template folder. You’ll notice that it’s named the same as what the frame was called in Figma. The frame was called “example template,” so your folder will be named whatever you’ve named the template. The file that contains our HTML template is this index.html file. We can have a look at that by dragging it into the browser. We’re going to come back here in a second to copy-paste that HTML into Ongage.

The next step is to log in to your Ongage account. If you’ve logged into your dashboard, go to the campaigns section. Click on the campaigns menu item, then click on the new campaign button at the top right. Click on the email option. Once the new email screen loads up, give your message a name. I’m calling this one “test email message for today.” Populate things like your sender name, addresses, and all that stuff. Fill that out as needed, then click on the next button down here. This brings us to our new email page, where we can add things like the subject line and our HTML.

Copy the subject that you added in the Figma plugin and paste it into Ongage. The reason for that is that it adds it into your title tag, but it’s also needed to send that out through Ongage. Just make sure those are the same. If you’ve already added your preheader text in Emailify, you don’t need to add it again in Ongage. If you do add it again, it gets doubled up. I recommend just doing it in the Emailify Figma plugin and not bothering about leaving this field populated.

Now that we’ve got those filled out, swap this over to HTML. It will be WYSIWYG by default; click on the HTML tab. Now we’ve got access to the raw HTML content. Going back to the file we opened a moment ago, which was the index.html file, take that index.html file, open it in a code editor or your browser, right-click in your browser, go down to view page source, and click on that. Copy and paste all of that HTML from this file. Select all of it, copy it to your clipboard, then go back into Ongage. Delete all of this HTML content, and paste in our own HTML instead.

I’ve pasted all of that in, and it looks really good. Importantly, uncheck this “Auto beautify HTML” option. You don’t need to turn that on, just in case it messes up any of the HTML code, which we’ve already gone ahead and minified for file size optimization. Now that we’ve added our HTML, proceed by either clicking on save or clicking on next. I’m clicking on next, and this saves that template for us. You can see the email was successfully updated, and it also created a text version from the HTML automatically. This looks really good.

The last thing we need to do is give our campaign a name. Call this campaign name whatever you want. I’m calling it “campaign name test.” Add all these other fields yourself, then start adding whatever lists you want to include for your campaign. If you’re a user of the Ongage platform, you’ve probably gone through this step before, so I won’t run through all of that today. You can also send a test to yourself. This is probably a good idea if you want to check out what the HTML looks like, or use a service like litmus.com, which lets you send a test to Litmus and see how it looks on all the different platforms.

This is basically all good to go. Once you’ve added your list, go down here and click on schedule. This takes you to the final step, allowing you to schedule the campaign. You can either send it out immediately or schedule it for a future date. That’s basically it. I’m not going to send this out for now. I just wanted to run through the design part mostly, to show you how to import your custom HTML that we exported from Figma into the Ongage platform. This is the best way to go about it: copy and paste the source code from the index.html file into the HTML tab in Ongage. This allows you to have a custom HTML email.

You can also click on the WYSIWYG tab, which allows you to change the text. You can change this to something like that, and make small tweaks if needed. For big design changes, I would personally go back to the Figma file, change them there, re-export the HTML, and copy-paste that index.html file into the Ongage HTML tab. For quick text tweaks, you can use the WYSIWYG editor, which should be fine too.

I hope this has been helpful. If you’re an Ongage user wanting to create custom HTML emails from Figma and export them for the Ongage platform, hopefully, this will be a workflow improvement. Thank you, as always, for watching. We’ll be back soon with more Figma tutorials like this one shortly.