Once you're happy with your design and the settings that you wanted to configure, you can export your email(s) from Figma to HTML by clicking the Export HTML button in the Emailify plugin header, selecting the email(s) you'd like to export and optionally adding a subject line and preheader text.
Export and download your HTML email from Figma as a .zip file
The default option selected is HTML Email, which will ensure your emails are exported to compiled production ready emails (with all the CSS pre-inlined and the HTML minified).
When you're ready, click on the Export To HTML button to start exporting the emails you've selected from Figma to HTML.
After Emailify has finished processing your email(s), you'll be shown a confirmation message; you can download your .zip file by clicking the Download your .zip file button.
Saving file downloads from Figma If you're using the Figma desktop app, you'll see a prompt appear to download your file. However, if you're using Figma in a web browser, your file will automatically be downloaded to your computer by default (usually to the Downloads directory on your computer).
If the export finished but the ZIP did not download
If you reached Emailify's finished export screen, the email export itself has already been generated. Start by clicking Download your .zip file again from that finished screen.
Then check the download path that matches how you are running Figma:
- In the Figma desktop app, look for the native save prompt from Figma and make sure it is not hidden behind another window or desktop.
- In Figma in a web browser, check your browser's downloads list and your computer's default Downloads folder.
If the ZIP still does not appear:
- Re-run the export once after checking the correct download location.
- If you are on a work network, try a different Wi-Fi network or a browser/private window in case the download handoff is being interrupted locally.
- If one attempt used a free Pro trial run but no file arrived, stop retrying and email [email protected] with the product name, whether you were using Figma desktop or browser, and a screenshot of the finished export screen or missing download prompt.
If the export completed on your last free Pro trial run, the finished export screen should still allow the ZIP to be downloaded. For general trial rules, see Use Hypermatic free Pro trial runs. For private help with trial-use or account-specific checks, see Choose the right Hypermatic support channel.
Emailify will automatically detect if any text layers in your design require RTL (right-to-left) styling, and will automatically apply the dir="rtl" HTML attribute to any text content areas in your exported emails.
Unzipping and viewing your exported HTML email .zip package
After you've downloaded your .zip file from Figma to your computer, you can open your file explorer to the directory where it was saved. Double clicking on the exported .zip file will unzip the contents.
The .zip file contains each email's index.html file and image assets in a separate folder. A generated index.html file at the root lets you review every exported email from one preview page. You can also upload it as a Netlify preview link for clients or teammates.
Double clicking either the preview page index.html file, or any index.html file inside your individual email folders will open up the file in your web browser and let you preview the exported HTML.
The plain text content version of your HTML email will automatically be included inside the .zip file of any email exports from the plugin. If you unzip your exported .zip file, then open the folder of your email, there will be a plain-text-version.txt file alongside your index.html file.