How to upload preview links for HTML emails from Figma to Netlify using Emailify

Video Transcript

Today I’m going to be showing you how to automatically create preview links for your HTML emails in Netlify using the Emailify Figma plugin; this is going to allow you to share preview Links of your email designs exported to HTML with stakeholders or clients or anyone on your team.

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

In this Figma tutorial, I’m not going to be going through details of how to design the emails, there’s some other Figma tutorials on our YouTube channel that you can find in the Emailify playlist if you want to jump into that, but for today I’m just going to be assuming that you’ve already got your emails designed using the Emailify components that you’ve customized, and basically the email is ready to go and you just want to now upload it to Netlify to create a preview link to share that design exported as HTML with stakeholders for approval.

All we need to do is click on the “Export HTML” button and once we’ve done that we can see here that by default it’s going to export the HTML email to download to the computer, but in this case we want to export it to Netlify. I’m going to scroll all the way down and find the “Upload Preview Link” group, and I’m going to click on the “Netlify” option. Netlify is a platform that hosts static websites or static HTML, so this is going to allow us to automatically upload our HTML email from Figma up to a Netlify preview link. All you need to do is click on this “Personal Access Token” link here, and if you’re logged into Netlify, which I am; if you don’t have a Netlify account you can create a free one, if you’re a Netlify user, you can just sign in and if you click on that link you’ll be taken to the applications page in your settings panel.

What you need to do is go down to “Personal access tokens” and click on “New access token”, I’m going to click that, and then add a description; in this case, I’m just going to say “Emailify” and click on “Generate token” and that’s just going to give me a new personal access token that I can copy. I can copy that to my clipboard by clicking on this little copy icon here, and it’s worth storing that somewhere safe in a password manager or something like that to reuse again later, if you like, because once you leave this page it’s not going to be able to show you that token again; just something to keep in mind.

After you copy it to your clipboard, go back to Figma, go back into the Emailify Figma plugin, and in this input field here with the key icon, just click on that, and then paste in that token that we just copied. I’m going to paste that in and that’s just going to connect to Netlify and automatically generate a new Netlify site; what that does is it basically just creates a brand new site in your Netlify account and it gives it this random name that comes from Netlify. You can obviously go ahead and change that site name as well, if you click on the “Change site name” link; I’m going to click on that now and that’s basically just going to take you directly to the new site that was just created by the Figma plugin using the API. You can see here it’s currently called “Majestic Dolphin”, and we probably aren’t going to be sending a link called Majestic Dolphin to our clients. In order to change that, all we need to do is click on the “Change site name” button in Netlify and if we change that now to be something more relevant, we’ll just say email “Jiro Sushi Preview” and I’m just going to call it that, and click “Save”. Just something to keep in mind is that the site name does have to be unique; it can’t be the same subdomain as any other subdomain on Netlify, so you just want to make it something unique.

Once you’ve changed that in Netlify, you can just jump back into Figma, click on this little “refresh” icon, that’s just going to reload the Netlify site, and you can see here that it’s picked up on the fact that we’ve just changed the site name to “Email Jiro Sushi Preview”, and this is now going to be our new domain. It’s worth noting that the Site ID here stays the same, so we could basically change that once again; if I changed it to “preview link”, for example, we could click click “Save”, and if we jump back again refresh that, it’s going to automatically change that again to the same Site ID; that’s just a really easy way to rename the site.

All you need to do is just put in all your details as usual, subject line, pre-header text, all that sort of stuff; and now all we need to do is click on “Upload to Netlify”; I’m going to click on “Upload to Netlify”, that’s just going to generate the HTML and upload the images that it normally does, and then it’s going to upload it to Netlify. It’s pretty quick, we can see here that it’s telling us that our Netlify preview link has been uploaded, and if we click on the “Netlify Preview URL”, I’m going to click on that link, that’s going to open up the URL that we just created.

You can see here that we’ve got our HTML preview ready to go, this is the HTML that was just exported from Figma, we can see that it’s looking exactly the way we wanted based on the preview in Figma. We can now send this link around to team members, or stakeholders, or anyone who needs to approve the design, you can basically just share that link now without having to manually upload it yourself.

You can also download the zip file, if you wanted to have a copy of the files that were uploaded to Netlify, all you need to do is click on “Download your zip file”, click on “Save”, and that’s just going to create a zip file on your desktop or wherever you save it. If we open up that folder after unzipping it, we can see here that these are the files that were uploaded; the index.html file, which is the preview file that was what was uploaded to Netlify, which is pointing to our email here; this is the email contents and the images and everything like that.

That’s basically what it looks like there. I hope that’s helpful if you’ve been wondering how to generate preview links automatically, if you’re sending around HTML email exports from Figma to clients or stakeholders, this is going to be a lot easier than manually downloading the preview files and uploading them to an S3 bucket or a Netlify site yourself. This is just a really quick way of automating that process to upload the preview links to Netlify, which is a really good platform for hosting static sites. That’s going to be it for today, I just want to keep it really simple to show you this new export feature from Emailify; I hope you find it useful for you and your team, and I hope that improves your workflow for sharing around HTML email preview links with stakeholders. Thank you as always for watching, and we’ll be back soon with more Figma tutorials like this one very soon.