---
url: "/emailify/tutorials/export-html-emails-from-figma-to-emailoctopus.md"
description: "This tutorial shows how to use the Emailify Figma plugin to design an HTML email, export it as production-ready code, and import it into EmailOctopus as a custom template. It also covers adding the EmailOctopus footer, previewing the email, and saving the finished template in EmailOctopus."
---

# Export HTML emails from Figma to EmailOctopus

> This tutorial shows how to use the Emailify Figma plugin to design an HTML email, export it as production-ready code, and import it into EmailOctopus as a custom template. It also covers adding the EmailOctopus footer, previewing the email, and saving the finished template in EmailOctopus.

[← Back to Emailify Video Tutorials](/emailify/tutorials)

[Embedded media](https://www.youtube-nocookie.com/embed/SxoknO-JXSM)

## What this video covers

This tutorial shows how to use the Emailify Figma plugin to design an HTML email, export it as production-ready code, and import it into EmailOctopus as a custom template. It also covers adding the EmailOctopus footer, previewing the email, and saving the finished template in EmailOctopus.

## Things you'll need

- A Figma file with the Emailify Figma plugin available
- An EmailOctopus account

## Steps

1. [ ] Open Figma, find Emailify in Resources, save the plugin, and run it from Plugins > Saved plugins.
2. [ ] Create a new Emailify container, then choose the EmailOctopus footer option from the footer tab so unsubscribe, viewing browser, and address tags are added automatically.
3. [ ] Preview the design in the plugin, including mobile view if needed, and then close the preview.
4. [ ] Click Export HTML, choose the EmailOctopus platform option, enter the subject line and preheader text, and export the template.
5. [ ] Download the zip file, open it, and use the index.html file for the email template.
6. [ ] In EmailOctopus, go to Templates, create a new template, choose code your own, remove the default code, and drag and drop the exported index.html into the editor.
7. [ ] Preview or send a test, then click Save to store the custom HTML template in EmailOctopus.

## Useful links

- [Watch the full video on YouTube](https://www.youtube.com/watch?v=SxoknO-JXSM)
- [Read the full video transcript](https://www.hypermatic.com/tutorials/how-to-export-html-emails-from-figma-to-emailoctopus-using-emailify)
- [Read: Uploading your emails to EmailOctopus](/emailify/integrations/emailoctopus)
- [Next: Export HTML emails from Figma to Loops.so](/emailify/tutorials/export-html-emails-from-figma-to-loops-so)
- [Open Emailify in the Figma Community](https://www.figma.com/community/plugin/910671699871076601)