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 artboards into responsive HTML email templates without writing a single line of code.

This plugin bridges design and production: you create and refine your layout in Figma, then send it directly to Postcards, where you can edit, customize, and export your design into fully responsive, cross‑client compatible HTML emails.

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 render correctly 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 on different devices and clients before sending.

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:

Download as ZIP (with hosted images) for free.
Copy Email Code, Save as Outlook Template, or Export via Integrations to your ESP.
Use Postcards’ drag‑and‑drop builder to keep editing your email visually, ensuring pixel‑perfect alignment and responsive behavior across platforms.

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.

Prepare Your Design

Finalize your email layout in Figma. Each email should exist within a single artboard (frame).
Use clear layer names (e.g., Header, CTA, Footer) for a cleaner export structure.
Make sure all images are properly placed, aligned, and grouped.

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.

Configure Export Settings

You can choose to export your design to an existing Postcards project or create a new one before starting the export.
Choose Export Format (recommended: JPG or PNG for image-based sections).
Adjust Scale (e.g., 2× for sharper graphics on high-DPI displays).
Click Export to Postcards.

Automatic Import

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.

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.

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.
- Apply your Brand Presets for consistent typography and color schemes.
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.

Tips for Structuring Figma Designs for Better Postcards Exports

Designing your email layout properly in Figma ensures a clean import into Postcards Email Builder and avoids alignment or rendering issues. Below are key recommendations to help you build structured, multi-section email templates that export smoothly and remain editable.

1. Build with a Clear Frame Hierarchy

Postcards works best when your design structure is predictable and modular. For example:

Each section acts as a self-contained module, making it easier for Postcards to interpret and edit later.

2. Use Auto Layout Correctly

Apply Auto Layout → Vertical direction only to your top-level email container frame.
Inside that, each major section should be a Frame (not a Group) so it imports as one block.
Use consistent spacing between modules (e.g., 40 px) for predictable stacking.
Avoid applying Auto Layout to nested frames unless you intentionally need horizontal/vertical flows inside them.

3. Keep Image Layers Simple

Use Place Image instead of background fills whenever possible (Figma menu → Place image, or press Shift + Ctrl/Cmd + K).
Avoid complex masks, blend modes, or heavy effects; they may not export cleanly.
If you have overlapping elements or image collages, select them → right-click → Frame selection so they become one frame. This ensures they act as a single module inside the Auto Layout stack.

4. Set Constraints and Sizing Intentionally

Set the main email width to a fixed size (commonly 600 px) for email-safe rendering.
Inside sections, use either Hug contents, Fill container, or Fixed sizing; try to avoid mixing unpredictable constraints.
For instance: a hero frame set to “Fixed width” and a text frame set to “Hug contents.”

5. Avoid Unsupported Features

Some Figma features don’t translate well into email HTML or the Postcards builder:

Masks, blend modes, and blur effects.
Absolute-positioned layers inside Auto Layout containers.
Unframed layers outside the main structured flow.
When you’ve used these features, either flatten the layer (Ctrl/Cmd + E) or convert it into a regular frame without Auto Layout.

6. Adopt Smart Naming Conventions

Labeling frames clearly makes your project easier to navigate once imported into Postcards

“Header – Logo+Nav”
“Hero – MainImage”
“Section – Testimonial”
“Footer – ContactInfo

Well-named modules also help with edits and later reuse.

7. Combine Visual Creativity with Modular Logic

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.

8. 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.

✔️ Masked or 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.

Troubleshooting

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.

Tips for Success

Organize Figma Layers: Well-named and grouped layers make export cleaner and easier to edit later.
Check Responsiveness Early: Test using Postcards’ built-in preview modes before sending.
Use Postcards Components: Replace image-based blocks with editable Postcards modules for best results.
Test Across Clients: Always send test emails to Gmail, Outlook, and Apple Mail to confirm rendering.
Reference Documentation: The plugin’s Figma Community page provides changelogs, updates, and troubleshooting resources.