How to export emails from Figma to grayscale wireframe previews using Emailify

Video Transcript

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

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

If you’re new to the Figma plugin, the way that it works is it basically helps you design and export HTML emails from Figma, and the way it does that is using built-in tools to design components and layouts, and customize the content using the Figma plugin. If you’re new to the Figma plugin, I’d recommend checking out another Figma tutorial on our YouTube channel to help with going into the details of actually designing the emails. In this Figma tutorial I’m just going to assume that you’ve already got your Emailify designs ready to export, and all we’re going to be focusing on today is exporting those as wireframe style PDFs that you can then send to your clients for early previews.

To get started, all we need to do is click on the “Export HTML” button in the Figma plugin, and then we just want to change this export setting here from “HTML Email” and instead scroll down to “PDF Previews”; we’re going to select “PDF Previews” and that’s just going to change the export option to export PDF previews of our HTML instead of just the raw HTML files. Now that we’ve got that selected, we’ve got a new toggle here called “Enable Wireframe Mode”, if you make sure that’s turned on; it might be turned off by default, so if you do want to use wireframe mode, you’ll just need to opt into that. If you click on “Enable Wireframe Mode”, that’s basically going to automatically take our designs here and export them as a grayscale wireframe PDF.

I’ll show you what that looks like now; if you click on the “Export to PDF” button, that’s going to go through your emails, it’s going to go through the selected emails that we’ve got here and it’s going to automatically export them as grayscale PDFs. Once it’s finished converting, we’ll just click on the “Download your zip file” button and save that anywhere to computer, and if we now open up that zip file and then open up the folder, you’ll see here that we’ve got a bunch of different files. The first one we can see is this PDF file with the same name as our Figma file; if we open up that in our preview, we can see when the PDF has been opened up we’ve got a grayscale version of the email that we designed here. It’s also making all of the text “Lorem Ipsum”, it’s putting all dummy text in there. It’s also swapping out any images; you can see here the background image the logo image the inline image here, those are all being swapped out with gray blanked out images, you can still see that they’re images, but they’re just grayscaled out.

That’s also going to be happening down here; if we’ve got our second email, you can see the second one, the text is matching up with the length; the length is automatically taking into account, how much length of the text there is and turning that into “Lorem Ipsum” automatically. Then any elements with color are just getting gray scaled out as well; you can see the button which was orange, it’s still got that tint to it, but it’s just in gray, it’s been grayed out; again, the button text has been replaced as well.

That’s basically what it looks like; this is an automated way to export your HTML email designs from Figma to a more grayscale, out blanked out version. This can be handy if you’re in the early stages of a design process and you don’t have all the final content or any real content yet, and you just want to give the clients or stakeholder a way to visualize what the layout or structure is going to look like without necessarily having the content ready to go yet; more of a stripped down version that you can send them in those early stages.

The other files that we have in here are basically just variants on that initial PDF; if you want to send a PDF just of each email, you can go into the email folder of each email and use this PDF instead, and that will just give you the desktop and mobile versions of each of those designs just in its own file. If you want to also have individual pages, you can get the mobile and desktop PDFs here as well. If you just want to send a PDF with the mobile design or the desktop design you can send those PDF files that are included as well. Finally, we’ve got some JPG folders; if you wanted to use the JPG images of these exports, you can open up these files here and these are actually just JPG image files that you can use however you want. For example, we could move those into Figma; if we drop those in you can see here these are just regular images, and we can now use them in our Figma file as well if we really wanted to. These are just images of the exported grayscale wireframes, so we could add a little nice mock-up around them, or we could export these to a different format, or really whatever you want to do you can do that with these JPGs as well. That’s just another option you can use if you wanted to take those wireframe exports and do something else with them without them having to be sent in a PDF.

That’s basically it; if you want to try out this feature, you can use it now in the Emailify Figma plugin. As I said, this is just for the PDF previews feature at the moment; if you want to include the wireframe mode toggle you can just turn that on and you’ll automatically get these outputs. Of course, by default, that’s just turned off; if you have that turned off and export the PDF it’s just going to export the original designs as they were, it’s not going to make any changes to the design at all, it’s just going to export them as HTML and render the HTML in your PDF previews.

We’ll leave it there for today; I just wanted to do a quick run through of this new feature to optionally export wireframe grayscale PDF previews from Emailify. Hopefully this is helpful if you’ve been wanting to create more stripped back wireframe style with grayscale images or grayscale previews of your email designs without necessarily having to send the final version to your clients straight away. Thank you as always for watching, and we’ll be back soon with more Figma tutorials like this one very soon.