How to Make an Email in Figma and Export with Marka

You can design the layout, edit the content and review an email with your team in Figma. Marka Email Generator handles the HTML export, so your campaign can move from the canvas into your sending platform.

This walkthrough starts with a template and finishes with an exported email ready for an inbox test. Open Marka in Figma and choose a Figma email template to follow along.

1. Choose a template for your message

Start with the purpose: a newsletter, welcome message, product announcement or account notification. Pick a layout close to the amount of content you need. A short announcement is easier to maintain when it begins with a short template.

Duplicate the Figma file and name your working frame after the campaign. Keep the original nearby as a reference. If you are starting from scratch, use Marka's new-project option; follow the setup guide to connect an existing frame.

2. Make the design your own

Replace the logo, headline, body copy and images. Set your brand colors, then review the complete email at actual size. Start with one primary action and make its label specific: “View the new collection” gives readers more context than “Click here.”

Use shared components for the header, footer and repeated sections. Keep the copy in editable text layers so changing a sentence is a design edit. Check long headlines and multi-line button labels before calling the layout finished.

For a reusable foundation, explore the email design system.

3. Prepare the phone layout

Review how the content flows at a narrow width. Check image size, paragraph length and the order of any columns.

Marka's Responsive mode uses the frame's Auto Layout and Constraints settings. Breakpoints mode lets you prepare separate desktop and mobile layouts. Use the mobile setup instructions to choose and configure your approach.

Preview again after changing the content. Real copy often reveals sizing issues that placeholder text did not.

4. Add the destinations and inbox preview text

Select linked text and configure its destination using Figma links or Marka's link properties. Check the actual URL for every action. The text settings guide explains the available controls.

Write a preheader that adds useful context to the subject line, then enter it in the export settings. Keep a note beside the frame with the approved subject and preheader so the person scheduling the campaign has both.

If the email includes personalization, get the correct fields from your sending platform and test them there after export. Start with a simple greeting before adding more complex dynamic content.

5. Preview with Marka

Review the selected email in the plugin before exporting. Check the mobile layout, text wrapping, section spacing and button visibility. For alternate colors, follow the dark-mode workflow.

Return to the Figma frame to make visual changes, then refresh your preview. This keeps the editable design aligned with the version you will send.

6. Export the email

From Marka's preview, open Export and use Download Email. The plugin offers HTML or a ZIP containing HTML and images. If you use cloud image hosting, the exported file references hosted assets; otherwise, arrange image hosting for the email you import. See export options.

Check current plans for export allowances. Access to a free Figma template does not mean unlimited plugin exports.

7. Bring the design into your email platform

Choose the guide for your sender:

Your platform manages recipients, subject lines and sending. Review its template access requirements before planning the handoff.

8. Send a test and keep the Figma file ready for revisions

Use your sending platform to deliver a test message. Check the received email on a phone and desktop, including links, images, personalization and both display themes where available.

A plugin preview helps with design review; an inbox test shows what the recipient receives after the sending platform processes the email. Fix visual issues in Figma and repeat the export when needed.

Once approved, save the Figma frame as the starting point for your next campaign. Create your email with Marka or pick a template to customize.