Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: 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.. Machine-readable page: /emailify/tutorials/export-html-emails-from-figma-to-emailoctopus.md.

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

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