Figma Plugin: Export Figma Email Designs to Postcards

The Figma Email Template to HTML plugin enhances the functionality of Postcards by seamlessly integrating Figma email designs into Postcards’ visual workflow. It allows designers and marketers to transform their Figma email layouts into responsive HTML email templates without writing a single line of code.

This plugin bridges design and production: you design in Figma, then export directly into Postcards, where your design is converted into fully editable modules and elements, preserving visual accuracy while maximizing editability. From there, you can continue refining and customizing your email directly in Postcards, fully editing text, images, buttons, spacing, margins, layouts, and more before exporting production-ready HTML.

Why use it

The Figma Email Template to HTML plugin streamlines the process of turning visual mockups into ready-to-send HTML emails. It’s ideal for designers who want creative freedom in Figma and marketers who need production-ready email templates. Once exported, you can continue refining your design in Postcards using its drag-and-drop editor and powerful integrations.

Key Features:

• Seamless Export: Converts Figma artboards into Postcards‑compatible HTML templates in one click.
• Drag‑and‑Drop Editing: Refine and customize in Postcards’ intuitive interface.
• Responsive Design: Ensures templates are mobile-friendly and optimized for consistent display across email clients.
• Integration Support: Export directly to Mailchimp, Klaviyo, SendGrid, HubSpot, Salesforce, and other popular ESPs.
• No Coding Required: Easy for both designers and marketers to use, even with little to no technical experience.
• Consistent Branding: Maintain cohesive fonts, colors, and design styles across all exported templates.
• Instant Preview: Test how your email looks across different devices and email clients before sending, including built-in dark mode preview in Postcards.

In short: You design in Figma, then perfect in Postcards. With Postcards, your email becomes both highly customizable and effortlessly production‑ready.

From Postcards, you can:

• Use Postcards’ drag‑and‑drop builder to keep editing your email visually, ensuring responsive behavior across platforms.
• Download your HTML with hosted images for free, quickly copy email code, Save as Outlook Template, or Export via Integrations to your ESP.

Install the plugin (Figma)

To install the Figma Email Template to HTML plugin, you can use either of the two methods below.

Method A – Via the Community Page (direct link)

• Open the plugin listing: Here
• Ensure you are signed in to your Figma account.
• Click the “Save” icon on the plugin page.
• The plugin is now added to your Figma account and will automatically appear in your workspace, ready to use whenever you’re ready to export your design.

Method B - Install from the Figma Community (Inside the App)

• Open Figma in your browser or desktop app and sign in.
• In the left sidebar, click Community to open the Community page.
• In the top-right search bar, type “Postcards” then click the Plugins filter button to narrow your results, and select Export Figma Email Template to HTML – Postcards Email Builder from the list.

• Select the plugin from the search results.
• Click the Save icon to add it to your account.

Tip: Installation is tied to your personal Figma account. Each team member who plans to export designs must install the plugin on their own account.

Connect Figma to Postcards (first‑time pairing)

Once the plugin is installed, connect your Figma account with Postcards to enable seamless exporting.

Run the Plugin

• In Figma, select your completed email artboard.

• Click the Figma icon in the top-left corner of the app, then navigate to Plugins → Saved Plugins → Export Figma Email Template to HTML.

  Alternatively, you can right-click on the selected frame (artboard) in your design and choose Plugins → Export Figma Email Template to HTML directly from the context menu.

• Log In and Pair Accounts
• The plugin will prompt you to log in to your Designmodo (Postcards) account. If you don’t have one, you can create it directly from the popup window.
• Once authenticated, Figma and Postcards will link automatically.

How the Figma plugin works (important)

When you select a frame and run the plugin, it analyzes the structure of the selected element before exporting. How the plugin processes your design:

1. Auto Layout detection

When you select a component to export, the plugin first checks whether the selected element is a group or frame with Auto Layout enabled. In Figma, you can enable Auto Layout by selecting the frame and clicking Auto layout in the right sidebar (or using Shift + A).

If Auto Layout is enabled, the plugin recursively inspects all child elements. Parent groups and subgroups that have Auto Layout enabled are exported as editable Grid structures inside Postcards.

2. Image-based fallbacks

If Auto Layout is disabled for a child group, that group is exported as a single solid image. Additionally, elements may be exported as images if:

• Unsupported attributes  are used (e.g. rotate property on texts)
• The element is visually complex or cannot be represented as HTML email-safe markup

3. Text handling

Text layers are exported as editable text with fonts, sizes, colors, and styles preserved.

4. Images, vectors, and masks

All images and vectors are exported as images. Layer masks are exported as a background image of the group they belong to. If multiple masks are present, they are merged into a single background image.

5. Buttons

Figma does not have a native “button” component. What appears visually as a button is typically just a group of elements (background + text).

Because of this if a button is not built using Auto Layout, it may export as an image. For best results, treat buttons as Auto Layout frames with text inside. This ensures buttons export as editable elements inside Postcards instead of flattened images.

6. Background

The background of the main frame is applied to the body  of the exported template.

As shown in the image, the background color of the main frame is adjusted using the Fill panel in Figma (for example, setting it to #DAE5FF    ). This main frame represents the overall canvas of the email. When the design is exported, the background applied to this frame becomes the global background of the email

Clipped or masked elements are exported as background images on the group they belong to. When multiple such elements are present, they are merged into a single background image to preserve visual accuracy.

In this example, the "Module 1" frame uses both a solid color fill and an image fill. These fills are visually stacked in Figma and treated as a single background. During export, they are flattened and exported as one background image to preserve the exact appearance.

Prepare your design in Figma

Designing your email layout properly in Figma ensures a clean import into Postcards Email Builder and avoids alignment or rendering issues.

We recommend starting from our Figma email template, which is built with export best practices in mind. You can copy this template and design directly inside it, or create your own layout from scratch if you prefer.

To get started, duplicate the template into your own drafts by clicking the file menu and selecting Duplicate to your drafts. From there, you can design directly inside the duplicated file or use it as a starting point for your own layout. Below are key recommendations to help you build structured, multi-section email templates that export smoothly and remain editable.

• Build with a Clear Frame Hierarchy

Use a single main frame, your email should live inside one main frame. This frame represents the email body. Postcards works best when your design structure is predictable and modular. For example:

While Figma allows free-form layout, for email exports you’ll benefit from modular, repeatable blocks. Each major block in Figma should correspond to a module within Postcards, ensuring you keep design flexibility and structured editability.

• Use vertical Auto Layout on the main frame

Enable Auto Layout (vertical) on the main email frame. Place all content frames inside this main Auto Layout container.

• Recommended width

Set your content width to 600px. This is a long-standing best practice for email design and works reliably across clients.

• Avoid unsupported features

Some Figma features don’t translate well into email HTML or Postcards. If your design uses any of these features, mark the affected frame for image export when exporting with the plugin. To maximize editability, avoid using advanced visual effects and complex masking.

• Avoid unnecessary nesting and overlap

Some complex layer structures can make designs harder to translate into email-friendly layouts. To ensure a clean and predictable export, avoid excessive nesting or overlapping elements, and use clear, consistent layer names throughout your design.

Configure Export Settings

After selecting your main email frame, open the plugin.

You can then configure the following options:

Project destination

• Export into a new Postcards project
• Export into an existing Postcards project

Image exports format

• PNG (recommended for UI elements and transparency)

• JPG (smaller file size for photo-heavy designs)

Image scale

• 1×

• 2× (recommended for Retina / high‑DPI screens)

• 3×

Image exports

By default, the plugin decides what becomes editable and what becomes an image. However, you can force an element to export as an image. How to do this:

• Select any layer, group, or frame in Figma with the plug-in opened. Click “Mark for image export” in the plugin panel. The plugin automatically adds a *     prefix to that layer.

In this example, I’ve selected the button frame and clicked Mark for image export. The plugin automatically adds a *      prefix to the layer, and the button is exported as an image.

Any layer or group prefixed with “*” will be exported as an image.

This is useful for:

• Decorative sections
• Complex layouts
• Sections that have advanced styling.
• Visual-only blocks that don’t need to stay editable

Once configured, click “Export to Postcards”. When the export finishes, you can open the project directly in the Postcards editor.

If nothing happens after clicking “Export,” make sure you’ve selected a frame in Figma and are logged into the correct Designmodo account in your browser.

Once export completes, click "Open in Editor" and your Figma design will open in a new Postcards tab, automatically imported as a project. From here, you can customize it directly in the Postcards builder.

Use the design in Postcards

After successful export, your Figma design becomes a fully editable project inside Postcards, where you can enhance, refine, and finalize your email template.

Review Imported Content

Your Figma artboard appears as a static layout initially. You can delete placeholder images or replace them with editable Postcards modules. This ensures better responsiveness and accessibility.

Edit and Customize

• Use the Left panel to manage your email structure; add, remove, or rearrange modules.
• Use the Right panel to modify text, images, colors, padding, and borders and more.
• Apply your Brand Presets for consistent typography and color scheme.

Add New Modules

• Postcards offers a vast library of pre-built, fully responsive components, including headers, CTAs, e-commerce sections, footers, and more, that you can easily drag and drop onto the canvas.

Troubleshooting & Expected behavior

Pre-Export Checklist

✔️ Top-level frame uses Auto Layout – Vertical.

✔️ Each major section is a Frame (not a Group).

✔️ Email width set (e.g., 600 px).

✔️ No loose layers outside the container.

✔️ Difficult effects flattened.

✔️ Image collages grouped/framed into one block.

By following these structured tips, you’ll make sure your Figma design imports cleanly into Postcards and exports into production-ready HTML without unexpected layout surprises.

Why does something look different?

Email HTML has limitations. Some Figma layouts must be flattened to maintain visual accuracy.

Fix the “selected element is not an auto-layout” error

• Select the parent frame that contains all elements (text, images, buttons, etc.).
• In the right-hand sidebar, look for Auto layout.
• Ensure that your design flows vertically. Auto Layout should be set to Direction: Vertical (this mimics how email sections stack).
• Adjust padding and spacing between items as needed to maintain alignment.