How to export HTML emails from Figma to Stripo using Emailify

Video Transcript

Today, I’m going to be showing you a quick tutorial on how to export your HTML email templates from Figma into the Stripo email platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file. If you click on the little “Resources” icon up here and search for Emailify under the “Plugins” tab, if you click on Emailify, you can run the Figma plugin by either clicking on this “Run” button here or I’d recommend clicking on this little “Save” icon here, and that’ll allow you to run it from your Figma plugin list. I’ve already clicked on the save icon so I’m going to go to my canvas, just right-click anywhere, go down to “Plugins,” then go down to “Saved plugins,” and click on Emailify, and that’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it helps you to design and export responsive HTML emails directly from Figma without needing to code anything or know anything about email development. So to get started, all we’re going to do is just create a brand new email. So I’m just going to call this test template from Figma and click on add new Emailify container.

I’m not going to be going through all the design features of the Figma plugin today. If you are new to the Figma plugin and you want to learn more, there’s a bunch of YouTube tutorials on the channel or in the Emailify documentation that you can look into, which will give you a deep dive into the design tools and how to customize emails for your own brand and design. But for today, I’m just going to be sticking with a really basic template that I’m just going to spin up right now. I’m not going to customize it. You can obviously customize this design and content for yourself, but for today, I’m just going to be keeping it really simple to show you how to upload this into the Stripo platform.

We’ve just got a few different components here, which we can then preview in our preview panel here by clicking on the preview button. And you can see here we’ve got our HTML as we’d expect, taking from the design. Again, I’m just going to keep this really simple and show you how to get this HTML into the Stripo platform. So all we need to do once you’re happy with your email is click on the export HTML button in the Figma plugin.

Then just change this option up here from HTML email and go down to platforms and find Stripo. So click on Stripo. And then once you’ve added your subject line and preheader text if you’d like, then you can click on the export for Stripo button. I’ve just clicked on that, which is going to generate all of the HTML code export and upload all the images. And then we can just click on this download your zip file button here. And then we can save that anywhere on our computer. So I’m just going to save it to my desktop.

If you unzip that zip file and then open up the folder, you’ll be able to see that we’ve got a previews page. And so this allows you to view a preview of the email. So you can see the desktop version, the mobile version, and you can send this to clients or stakeholders to approve the email. But for today, what we really want to do is get the index.html file inside of the folder here. So you want to expand your folder that you’ve named the same as your Figma template. So whatever your Figma template is called in the frame that’s what the folder is going to be called here. And the file you want to get is the index.html file. So just go ahead and open up that file. You can open it up in a browser or a code editor. I’m just going to open it up in the browser.

To get the code, you just have to right-click anywhere on the page and click on view page source. And then you can grab the code by selecting all the content. So that’s “Command + A” on Mac or “Control + A” on Windows. And then just copy that to your clipboard. So just either right-click and copy that or do a “Command + C” or “Control + C” to copy that to your clipboard.

Then you basically want to go to your Stripo account. So I’m already logged into Stripo. I currently don’t have any emails added. So if you’ve got no emails on yours as well, the button you want to click on is this basic templates button. So in your Stripo doil account, click on basic templates under the email messages tab. So just go ahead and click on basic templates. And then you want to click on the my HTML option here. So you don’t want the empty template. You definitely want this my HTML template. Otherwise, you’re going to get a bunch of other stuff that we don’t want. So go ahead and click on my HTML. And once that loads, you’ll get the Stripo editor pop up here with a blank screen.

What we need to do now is click on this little code icon up here. So you can see where I’ve got my button hovered. So click on that little code button. And that’s going to open up this code editor down here. So we don’t want any of this code that is being included by default. So you’re going to select all of that code, just select everything, and then we’re going to paste from our clipboard. So “Command + V” or “Control + V”.

Now that we’ve pasted in the HTML, you can see that it’s instantly loaded up the template in our editor here. We can make small tweaks to this content. So if you wanted to remove certain bits of text or expand it, you can add in text there. Or if you want to change any of the images, you can click on an image that’ll load it up in here. And you can see currently it’s uploaded on the hyper Matic CDN. But you can change that out with your own image if you wanted to replace it. So you can click on replace image and then drag and drop an image from your computer or one that you’ve got saved in the Stripo platform. And you can automatically override those images if you like.

Alternatively, you can edit those in Figma and re-upload the content. It just depends on what you want your workflow to look like. So I’m going to upload one more Figma template just to show you how to do this if you’ve already got some messages or templates added to your email messages page here. And what you can do is click on this new message button. So go ahead and click on new message. And you want to click on my HTML again. And one more time, we’re just going to click on the code button and select all and paste. And again, we’ve just added our template as well. So that was just exactly the same steps on that second part. The first part was just showing you the difference between loading the new message template or new template page with no templates added previously. So you get that little set of menu buttons here, which doesn’t include this new message button. But once you’ve added at least one template, you can always add new ones using this new message button. So just make sure you click on that and that will always take you to the new message screen.

Then just click on my HTML. And once again, click on the code button to paste in your template. So whatever template you’re exporting, I’ll just export one more so you can see what it looks like. We’re just going to export this GitHub template, which I’ve taken from the community. So if you browse some of the Figma templates that are included in the Figma plugin, that’s the GitHub one there. So you can grab those for free of the Figma Community. There’s an Emailify compatible out of the box, so you can grab that.

I’m going to export that one, click on export HTML, change this to Stripo once again. So I’m going to click on the Stripo option, click on export for Stripo. And once that finishes exporting, I’m going to save that to my computer again. So this is just finishing uploading the images. I’m going to click download your zip file, save that to my desktop again, open up that new zip file, and open up the folder. And you can see here under the Emailify template, we’ve got our index.html file. So once more, I’m just going to drag and drop that into my browser. And you can see the content is all there. So we’re going to right-click, go to view page source, so we’ll copy all of the HTML go back to Stripo, and in our new template that we just selected a second ago, we’re going to again paste all of that in over the top of the code there. So we’re going to select all, paste. You can see we’ve got our content in here as we’d expect. So we’ve got our links. So if you wanted to add a link in here, you can add that in. So you could add that to github.com and that will automatically link that to github.com when it’s clicked. So this is a really easy way to make content updates. Or you can just basically leave the content as it is from Figma and then send out the email from Stripo to whatever integration you’re using with their platform.

That’s pretty much it for today. I just wanted to show you a really quick tutorial on how to get your HTML emails out of Figma into the Stripo platform and into their editor using the Emailify Figma plugin. Thank you as always for watching and we’ll be back with more Figma tutorials like this one very soon.