How to Export HTML Emails from Figma

How to Export HTML Emails from Figma

Looking to convert your Figma designs into fully functional HTML email templates? With Marka Email Generator, you can preview and export clean HTML in just a few clicks—no coding required.

Step-by-Step Guide

1. Select a Frame in Figma

Start by designing your email layout using Auto Layout in Figma. When you're ready, select the frame you want to export.

2. Open the Marka Plugin

Launch the Marka Email Generator plugin from the Figma plugins menu.

3. Preview the Email

Click "Preview" in the plugin to see how your design will look as an HTML email. Marka supports light and dark mode previews, mobile responsiveness, and text rendering.

4. Export HTML Code

Once you’re satisfied with the preview, click "Export" to download the plain, production-ready HTML. The code is optimized for major email clients, including:

  • Gmail
  • Outlook
  • Apple Mail
  • iOS Mail
  • Yahoo Mail

5. Export to Email Platforms

You can also export directly to your favorite email marketing platforms:

  • Mailchimp
  • Klaviyo
  • Postmark
  • HubSpot
  • Brevo (formerly Sendinblue)
  • SendGrid

No manual copy-pasting needed—Marka handles the formatting for each platform.

6. Send a Test Email

Before sending a campaign, use the built-in "Send Test Email" feature to review the design in your inbox. This helps ensure proper rendering across devices.

Marka makes it easy for designers to turn Figma layouts into responsive, accessible HTML emails. Whether you're building a one-off campaign or managing a full design system, you’ll get clean code and powerful export options in seconds.