How to export HTML emails from Figma to PDF previews using Emailify

Video Transcript

Today I’m going to be showing you how to automatically export PDF previews of your HTML email designs from Figma using the Emailify Figma plugin.

To get started all, we need to do is go up to the “Resources” icon at the top of your Figma file, if you click on that and search for “Emailify”, and under the “Plugins” tab you’ll see Emailify pop up. If you go ahead and click on that, you can run the Figma plugin by clicking on this “Run” button here, or I’d recommend clicking on the “More options” icon, and then clicking on “Save Figma plugin”, and that’ll just save it to your Figma plugins list for later. I’ve already gone ahead and done that, so I’m going to right click on my Figma canvas, just going to go down to “Plugins”, I’m going to go into “Saved Plugins”, and then click on the “Emailify” item, and that’s just going to run the Figma plugin we just saved a second ago.

If you’re new to the Figma plugin, the way it works is it basically allows you to design emails in Figma with some help from some of the built-in components from Emailify, and also some of the quick add options, so you can build out your own layouts and contents here. I’m not going to be going into detail about that today; if you want to run down of that, there’s a couple of really good Figma tutorials on the YouTube channel if you just search for the Emailify playlist, you’ll be able to see those pop up and get those sorted out before you continue with this Figma tutorial

Today, I’m just going to assume that you’ve already got your designs set up the way that you want, and you’ve got them rendering the way you want, and all you want to do now is export them to a PDF that you can send to your clients or stakeholders, and send that around for approval, if you don’t want to send an HTML version. What this is going to do is it’s basically going to take the real HTML, we can see here in the preview we’ve got real HTML from our design that’s automatically getting converted to HTML through the Figma plugin, and it’s going to take the mobile and desktop designs from HTML, this real HTML render, and it’s going to basically export those out to a PDF.

We’re going to do that now; if we close off the preview, and I’m just going to go to the “Export HTML” button, I’m going to click on “Export HTML” and by default it’s going to be set to the “HTML Email” option, we’re just going to click on that drop down now, and under the “Download To Ccmputer” group, we can see at the bottom here we’ve got a new option called “PDF Previews”. I’m going to click on “PDF Previews”, and that’s all you need to do, you don’t need to change anything else. All you need to do is select the emails on your page that you want to include in the export; I’m just going to export both of these emails today, and I’m just going to now click on the “Export to PDF” button.

I’m going to click on “Export to PDF”, and this is basically going to generate the HTML for our emails and then also generate the PDF previews based on that HTML. It’s just going to give us some PDF files and also some JPEG files, some static image files that we’re going to be able to use or look at in a moment; once it finishes generating the PDF previews, it’s going to zip that up for us and it’s going to allow us to download that zip file to our computer. in a moment we’ll get a confirmation screen telling us that our PDF previews are ready to download. We can now download our zip file; I’m just going to click “Download .zip file” and save that to my desktop, and if I unzip that file I’ll show you what’s in that folder.

We’ve got the unzipped folder here, and you can see that there’s a few different files in here. The first one is just the PDF file that contains all of our emails with the mobile and desktop view for each of them; I’m just going to open that up now to preview it, and we can see here that we’ve got our first email, this is our desktop view, and as we scroll down on the second page you’ll see the mobile view. We’ve got our mobile view, and then the third page will be the desktop view for the second email, and then the final page is the mobile view for that second email as well. All of those mock-ups desktop and mobile HTML based, these are not being rendered from the Figma images, these are actually being rendered based on the real HTML that’s getting generated. As you can see, we’ve got the way that the mobile version renders in HTML the way that the desktop version renders in HTML, and that’s getting exported to a single PDF file.

That’s probably the main PDF that you’re going to be using if you just want to send around a PDF of all of the previews in one file, you can definitely do that, and there’s also some other options. We can see here we’ve got our emails that we’ve exported in two separate folders as well; if we open up one of those folders, if we now open up the PDF in that folder, this particular PDF will just include the desktop view and mobile view of that one email, if you just wanted to send PDFs of each of those emails. If you you wanted to send those two separately, you could send these two files to your stakeholder or client to review, and those would be each design in separate PDFs with the mobile and desktop version in each of those. Even more granularly, if you wanted to just send a PDF of the mobile or desktop version on its own, you can do that as well. If you open up this PDFs folder inside of the email, you can basically get a one-page PDF for the mobile version; this is just a one-page document here it doesn’t have any more pages, or, you’ve got the desktop one as well, this is just the desktop PDF if you just wanted to send one of them.

Furthermore, you can also break it down into JPEG; if you wanted to use these JPEGs for any reason, you’ve got access to those as well. If you wanted to include them in your own personalized mock-up, or something like that for example, you could drop these into your Figma file. I can drop those JPEGs in there and that will basically allow me to use these exports as images. I can actually take those JPEGs include them into Figma, or drop them into a different application, or just send them as static images; if you didn’t want to send a PDF, you could just send them as images or upload them to a different preview application, or just as an email or Slack attachment, or something like that.

You’ve got a few options herem depending on what kind of preview workflow you have internally; if it’s PDF based, if you want to include them all in the one document you’ve got that one up here, if you want to include them as separate documents with mobile and desktop you can do that here, and then finally if you wanted to really get granular you can send them as individual PDFs with a PDF per view of mobile and desktop in here as well. As we just went through, the JPEGs as well, we’ve got our JPEGs for each of these mock-ups; this is version two, you can see we’ve got our JPEGs there.

That’s a really easy way of exporting the HTML files to PDF if you want to use that as an alternative way to send preview links. The other option is just to export the HTML normally; if you export it to HTML normally, it will also include a preview link that you can use as well, or you can actually upload it to Netlify and get a hosted URL as well. I covered that in another YouTube Figma tutorial, but for today we’re just going to leave it with the PDF previews to keep it simple.

That’s basically it; I just wanted to run through this new feature with you because I know that some people still prefer to send PDF previews rather than live HTML previews. This is going to be a really good balance, where you can automatically export the PDF previews from Figma from Emailify based on the HTML, but still get the PDF document that you can just send as a document file via email or whatever platform you’re using with your stakeholders and clients, and they can review that and mark it up, or do whatever you usually do with your PDF review processes.

We’ll leave it there for today, and I hope that’s been helpful if you’ve been wondering how to export your HTML emails from Emailify out to a PDF, you can easily do it now using this new “PDF Previews” option. Thank you as always for watching, and we’ll be back soon with more Figma tutorials like this one very soon.