How to export HTML emails from Figma to OneSignal using Emailify

Video Transcript

Today, I’m going to show you how to automatically upload your HTML email designs from Figma to the OneSignal email marketing platform using the Emailify Figma plugin. So, to get started, all we need to do is go to our Figma file, click on the little “Resources” icon up here.

If you search for “Emailify” and under the “Plugins” tab, if you just click on the Emailify result, you can run the Figma plugin by either clicking this “Run” button here. Alternatively, I’d recommend clicking on this “Save” icon here. That will save it to your Figma plugins list for easy access. I’ve already done that, so I’m going to my canvas. I’m just going to right-click anywhere, go down to “Plugins,” and then 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 Figma plugin, it helps you design HTML emails in Figma, which you can then export to production-ready HTML automatically. I’m not going to be going through all of the design details in this tutorial. If you’re interested in that, there’s a bunch of other tutorials on the YouTube channel. Just check out the Emailify playlist for those.

In this Figma tutorial, I’m going to assume you’ve already got your design looking the way you want, the HTML is rendering the way you want, and now you just want to upload it into the OneSignal email platform.

The way we do that is we basically go to our “Export HTML” button up here and click on that. Then we want to change the “HTML Email” option up here and scroll down to the “Platform Integrations” group. You just want to go down and scroll until you find OneSignal, and click on the “OneSignal” option.

Then, it’s going to ask you for your app ID and API key from OneSignal. You can click on this link here to figure out where to find those. But I’ll show you what that looks like in OneSignal.

If you’re logged in and you go to your apps page, which is just the default dashboard page, find the app you’re going to be sending the email from. Go to this little hamburger menu down here and click on “Open Dashboard.” Then click on the settings icon over here in the menu. Go to the Keys and IDs submenu over here.

Once you’ve clicked on that, you’ll see here it’s got this OneSignal Keys section. What you want to do is copy the app ID. So, we’re just going to click on this little copy icon. That’s going to copy it to our clipboard. We just copied the app ID, so we’re going to paste that into the ID input over here in Emailify.

Then go back to OneSignal. We’re going to copy our REST API key. I’m going to copy that to our clipboard as well. I’m going to go back to Emailify and paste that into the key field here. You just want to make sure you’ve got a subject line set. You can optionally add some pre-header text as well.

But once you’re ready to go, you can just click on the upload to OneSignal button here in Emailify. That’s just going to automatically export our email to HTML. It’s going to upload all of our images, and then it’s going to upload it to OneSignal.

You can see here we’ve got a successful message telling us that our OneSignal templates have been uploaded. We can find it by going to our OneSignal dashboard and then going to our app, which we’re in at the moment. Then you just want to click on the “Messages” tab up here in the menu.

Click on “Messages” and then click on the “Templates” submenu over here. You can see here that our email has been uploaded. The name of the email is matching the name that we set in Figma on our Emailify frame. If we click on that, it’s going to load up the email template that we just uploaded.

So, if we just make this window a little bit bigger, you can see down here that all of our code has been uploaded automatically. Our subject line that we added in Emailify has been included. You can see we’ve got our HTML over here. This is all real HTML that was just uploaded from Figma, and it’s been automatically added to our OneSignal templates.

That’s basically ready to go. Now you can use that email template to send out emails. It was automatically uploaded to OneSignal from Figma, so you didn’t have to manually copy and paste or make any manual updates to your images and things like that. It’s all production-ready, and the emails are all ready to go with all of the images included.

So, yeah, that’s basically it. I just wanted to keep this a really short tutorial. If you’re using the OneSignal email marketing platform and you’re interested in getting your emails from Figma into production-ready HTML in your email templates in OneSignal, this is going to be a quick way of doing it with essentially one click, and you’re ready to go.

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