Video transcript
9-minute video ·
Today I’m going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Bento 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 in the toolbar, and then search for “Emailify.” Under the plugins tab, just click on the Emailify item. You can either run the Figma plugin by clicking on the little “Run” button, or I’d recommend clicking on the “Save” icon, which will allow you to save the plugin to your plugins list for easy access later.
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 to “Saved Plugins”, and click on Emailify. That’s going to run the plugin we saved a second ago.
If you’re new to the plugin, the way that it works is it helps you to design HTML emails and then export those to production-ready code with one click. For example, we can just spin up a new frame by putting in a template name here, or you can browse the existing templates that come with the plugin and clone one of those into your Figma file.
We’ll be having a look at one of those in a moment. But just as a really quick overview to get started, you can create a new Emailify frame, and that will allow you to start adding components and layers down here, which you can then customize to your own brand and drop in your own content and things like that.
It’s a really quick way of building out an email. You can use these components and tools down here to design emails within a few minutes and get those spun up as reusable components. You can customize this however you like.
To do a nicer example today, I’m just going to grab one of the templates that we looked at and spin up the Figma plugin in this Figma file. Then we’re going to preview that and upload it to Bento.
You can preview the emails in Figma by clicking on the little preview button in the Figma plugin. That’s going to spin up a real HTML preview inside Figma, so you can see what it’s going to look like on desktop and mobile. You can also view those at the same time. If you want to look at both of those next to each other, you can do that.
You can override the content. For example, if you wanted to add mobile overrides, you could do that for any of these layers. You can see here it’s updating the font size on mobile but leaving it on desktop.
I’m not going to go through all of the design features in detail today. If you’re new to the plugin and want to learn more about how the design works and how the plugin works for designing emails, please check out some of the other YouTube tutorials on the channel.
For today, I’m going to assume that you’ve already got your design the way you want and now want to export it into the Bento email platform. We’re going to do that now.
Before we do, the last thing we need to do is add a Bento footer. If you go to the Footers tab in the Figma plugin, you’ll see under the letter “B” there’s a Bento email footer. If we click on that, it adds a new component or row to our template. Of course, you can customize that design however you like, but the important thing is that the unsubscribe and view-in-browser links are pre-populated.
If we click on those link layers and check out the tag, we can see the clickable URL is set to the Bento unsubscribe link. This is a special Bento tag, and the same applies for the view-in-browser link. These are pre-populated, and you need that to be able to send out the email. If it doesn’t have an unsubscribe link like this, Bento will add its own, so you want to make sure to add your own. You can customize the design to your preference.
Now that we’ve got that set up and we’ve previewed the email and are happy with it, all we need to do is go to the Export HTML button in the plugin and click on that.
Change the option from “HTML Email” — which is the default export option that will download a zip to your computer — and go down to the Platform Integrations section to find Bento. Click on the Bento option.
You can enter your subject line and preheader text. The preheader text is what shows up after the subject line in your email client. Add that preheader text there. You can also toggle whitespace if you want to add extra space after the preview text so that the body content doesn’t show up. I always prefer to have that on, so I’ll leave it toggled.
Then click on “Export for Bento.” This will automatically generate all the HTML code, upload all the images, and give us a nice zip file we can now download.
Once the export finishes, click on the “Download Your Zip File” button and then “Save.” Once that’s saved to your desktop, open up the folder. You’ll see the Emailify template folder, which matches the Figma frame name.
Open that folder and find the index.html file. Drag that into your browser. You’ll see our HTML has been exported as expected.
Next, go to the Broadcasts page in the Bento platform. You can get there by going to the Emails section on the left, clicking on “Broadcasts,” and then clicking “Create Broadcast” in the top right.
Click on “Create Broadcast.” Once that loads up, give it a name. I’m just going to call this “Test Email.” You can fill in all the recipient details and such. For today, I’ll leave that empty and click on “Save and Continue.”
After clicking “Save and Continue,” you’ll see a screen asking how you want to build your email. Go to the bottom right and click on “Code Mode.” This allows us to paste our code into their code editor.
Click the Code Mode tile, which loads an empty code editor. Go back to your HTML file that we just opened from the zip folder — the index.html file. Open it in your browser, right-click anywhere, and choose “View Page Source.” Select all of that and copy it to your clipboard.
Then go back to Bento. Delete anything in the HTML editor and paste in the code. You’ll see all of the code has been pasted in — this is the full HTML export from Emailify.
Click on “Save Changes.” You can preview that by clicking on the “Preview” tab. This will load up the preview of the HTML we just pasted in. It’s looking really good.
Importantly, you can see that the unsubscribe and view-in-browser links are valid. In the bottom left of the browser window, you’ll see they are being pre-populated, and Bento recognizes them as valid tags. That’s all looking great.
You can send a preview to yourself if you want. Otherwise, you can click on “Leave Editor.” That will show you what the email looks like and have it ready to send.
You’ll notice there’s no subject line in here. That’s because you need to add it manually again. You can see in the export settings, we added the subject line, and that populates the title tag. For example, if someone clicked on the view-in-browser link, the title tag you see at the top would be populated from the Emailify input.
You still need to copy that directly into the Bento platform manually. Just paste it in there. You don’t have to set the preview text again if you’ve already set it in Emailify. If not, feel free to paste it into Bento. But if you’ve already set it in Emailify, setting it in Bento will just duplicate it — use one or the other.
Anyway, that’s basically it. Once you’ve pasted everything in, the email is now ready to review and send as a custom HTML email — completely ready to be sent as a custom template from the Bento email marketing service.
If you’re using Bento — bentonow.com is the domain — and you’ve been wondering how to get a custom HTML email designed with your brand and content into the platform to send out, this is a really easy way to do that. If you’re already using Figma and want to spin up an email quickly, then export the code automatically to be uploaded into the Bento platform, this is the way to go.
I’ll leave it there for today. I just wanted to keep that really simple. Hopefully, that helps your workflow if you’re a Figma and Bento user.
Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle