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: Use free Figma email templates to design HTML emails - This tutorial shows how to use the Emailify Figma plugin to start with free included email templates, customize them in Figma, and export the finished design as production-ready HTML. It also demonstrates how to mix and match components from different templates and preview the result before downloading.. Machine-readable page: /emailify/tutorials/use-free-figma-email-templates-to-design-html-emails.md.

Use free Figma email templates to design HTML emails

This tutorial shows how to use the Emailify Figma plugin to start with free included email templates, customize them in Figma, and export the finished design as production-ready HTML. It also demonstrates how to mix and match components from different templates and preview the result before downloading.

← Back to Emailify Video Tutorials

What this video covers

This tutorial shows how to use the Emailify Figma plugin to start with free included email templates, customize them in Figma, and export the finished design as production-ready HTML. It also demonstrates how to mix and match components from different templates and preview the result before downloading.

Things you'll need

  • A Figma file
  • The Emailify Figma plugin

Steps

  1. Open Figma, use the Resources icon to search for Emailify, and run or save the plugin for later.
  2. In the plugin, add a new blank Emailify frame, or click the plus icon and browse Emailify Figma templates to start from a free template.
  3. Open a template from the Figma Community page with Open in Figma, which duplicates it into your drafts.
  4. Edit the template in Figma by changing text, images, colors, fonts, and by moving or copying rows, columns, buttons, and other components into a new Emailify frame.
  5. Use Preview to check the real HTML layout and, if needed, open layer settings to adjust options like font sizes, padding, and mobile or desktop visibility.
  6. When the design is ready, click Export HTML, choose the emails and any subject line or preview text, then export to HTML or send to a platform such as Klaviyo or MailChimp if configured.
  7. Download the zip file, open the exported folders, and use the index.html and previews file to review the finished email in a browser.

Useful links