How to export HTML emails from Figma to Yotpo 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 Yotpo 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 little resources icon, and search for Emailify. Under the “Plugins” tab, if you click on the “Emailify” item, you can run the Figma plugin by either clicking on the “Run” button here, or I’d recommend clicking on the “Save” icon to save it to your plugins list for easy access.

I’ve already clicked on the save icon, so 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 the Emailify item. That’s just going to run the Figma plugin we saved a second ago.

If you’re new to the plugin, the way that it works is it helps you design HTML emails in Figma and then automatically export those to production-ready HTML directly from the plugin.

To get started, I’m just going to create a brand new template called “My Template” and click on “Add New Emailify Container.” That’s going to add a little Emailify frame to your page that we can now start populating with components.

I’m not going to be going through all of the design features in the Figma plugin today, but if you’re interested in learning more, I’d highly recommend checking out the other videos on the YouTube channel or going to the Emailify documentation site. Today I’m just going to be creating a really simple template using some of the components here, which I’m not going to be customizing too much. You can obviously go through and customize the design to your liking, but I’ll create a really simple one to show you how to upload it to the Yotpo platform.

Once you’ve got your email design ready to go, the last thing you need to do is go to the Footer tab. Underneath Platforms, scroll right down to the bottom and find the letter “Y” — you’ll see the Yotpo footer option. Go ahead and click on that component, and it’s going to populate the required links and the full address.

These are required fields in the Yotpo platform. You can see if I go to the navigation link, the unsubscribe URL is automatically pre-populated, along with the “View in Browser” link and the store full address variable, which is required as well. Make sure that’s added. Again, you can customize this to your liking design-wise, but you just want to ensure you’ve got those footer links in there before exporting your template.

Once you’ve got that designed the way you’d like, you can preview the email by clicking on the little Preview icon in the plugin. That allows you to view the HTML rendered on desktop and mobile. This is real HTML — this is what the code is going to look like when it gets exported.

You can customize it further, including adding mobile overrides. If you go into the Settings panel, you can override things like font size or padding on mobile. I’m not going to be doing that today — I’ll just be leaving everything as the default and using this template as-is.

Once your template is ready, click on the “Export HTML” button in the plugin. By default, it’s set to the “HTML Email” option, which is the standard one. We want to scroll down to the “Platform Integration” section, find the Yotpo option, click on that, and now we can populate our subject line.

Type in something like “My Test Subject” and add your preheader text — this is the text that shows up next to or under the subject line in email clients. Add the preheader text here, and when you’re ready, click on the “Export for Yotpo” button.

This will automatically generate all the HTML code, upload the images, and give you a button that says “Download Your ZIP File.” Once that appears, click on it and save the ZIP file anywhere on your computer.

Once you’ve unzipped it, open up the folder and you’ll see that your template has now been exported as an index.html file inside the folder you named. In this case, it’s just called “My Template.” You can preview it by opening the previews.html file, which gives you a preview on desktop and mobile — a nice preview page you can send to clients for approval and things like that.

For the email itself, it’s the index.html file in that folder. This is your exported email, ready to go. Leave that open because we’re going to grab the HTML code in a second.

Next, log into the Yotpo platform and navigate to the “Email Templates” page on the left-hand side. Underneath “Campaigns” in the menu, click on “Email Templates,” which will load up the templates page.

Go to the “My Templates” tab and click on “Start From Scratch.” We’re not going to use the visual editor — instead, select the middle option called “HTML Editor.” That allows us to paste in the custom code we just exported from Figma.

Click “Next,” and once that loads, remove all the default code included. Highlight all of it and delete it. Then go back to your index.html file, right-click anywhere outside the email, and click “View Page Source.” Select all of the source code — Command+A or Control+A — and copy it to your clipboard.

Go back to Yotpo and paste all of that code into the HTML editor. You’ll see all of your exported HTML is now loaded into Yotpo. The unsubscribe links, view-in-browser links, and the full address variable are all added. You shouldn’t run into any issues when saving.

Click on “Save and Close” at the top. Once that saves, you’ll see your template is now included under your “My Templates” list. You can now use that to create a campaign or any other type of flow inside the Yotpo platform.

To preview it, you can click on the preview option. You’ll notice the unsubscribe link and the view-in-browser link at the bottom of the window are populated, which is exactly what we want.

Now that it’s ready, you can use this to create a campaign. Click on the “Create” button, enter your email subject — the subject line you added earlier in Emailify will have been added to the title tag, so if someone clicks on the view-in-browser link, that’s what shows up. You’ll also want to paste the subject into the subject line field in Yotpo.

If you already added the preview text or preheader text in Emailify, you don’t need to re-enter it in Yotpo. Just leave that blank. If you enter it in both places, it will double up the text. If you didn’t add it in Emailify, then go ahead and add it in Yotpo instead — but again, only use one or the other.

Once you’re ready, you can schedule the email or send it right away. You can also run test sends beforehand — I recommend using a platform like Litmus or just sending a test to yourself.

That’s basically everything. I just wanted to quickly run through the end-to-end flow for designing and exporting HTML templates from Figma and getting those into the Yotpo platform as custom HTML templates. That’s going to be the best way to do it.

The platform doesn’t have an API to automate this at the moment, so you will need to copy and paste the code into your email templates. But once you’ve saved the template, you can reuse it as many times as you want. Just go back to “Email Templates,” click on “My Templates,” and go from there.

That’s basically it. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.