Figma to Postmark: Build Beautiful Transactional Email Templates

Postmark is purpose-built for transactional email — fast delivery, reliable inbox placement, and straightforward API. The one thing it doesn't give you is a visual template editor. Your templates live as raw HTML.

That's where Figma and Marka come in. Design your transactional templates in Figma, export production-ready HTML with Marka Email Generator Plugin, and paste directly into Postmark's template editor.

Transactional email types that work well in this workflow

Welcome / confirm email — sent when a user signs up
Email verification / magic link — auth emails (Supabase, Firebase, Auth0)
Password reset — time-sensitive, must render fast and clearly
Order confirmation — receipt with order details
Shipping notification — tracking number, carrier, ETA
Invoice / payment receipt — PDF-optional, HTML primary
Subscription renewal — upcoming charge notice
Account suspension / reactivation — critical delivery path

All of these require the same things: clean rendering in all email clients, Outlook compatibility, and fast loading. Marka's table-based HTML export covers all of these by default.

How to prepare transactional templates in Figma

Keep transactional designs simple

Transactional emails have higher trust requirements than marketing emails. Heavy design, lots of images, and complex layouts reduce credibility. The best transactional templates:

White or off-white background
Single column, 600px max width
Clear hierarchy: action → explanation → details
One clear CTA button (verify email, reset password, view order)
Minimal footer with company name and address

Use Postmark variables in Figma text layers

Postmark uses Mustache-style templating ({{variable_name}}). Type them directly into Figma text layers — Marka preserves them in the HTML export:

Variable pattern	Usage
`{{first_name}}`	Recipient first name
`{{action_url}}`	CTA button link URL
`{{support_email}}`	Support contact address
`{{product_name}}`	Your product/app name
`{{company_name}}`	Your company name
`{{expiry_hours}}`	Link expiry time
`{{order_id}}`	Order reference number
`{{order_total}}`	Order total amount

For button links: In the Marka Plugin's link field for your CTA button, use {{action_url}}. The plugin exports this as the href value in the HTML.

Always include a plain text version

Postmark requires (or strongly recommends) a plain text alternative for all transactional emails. This is separate from the HTML — you'll add the text version directly in Postmark's template editor. Keep it brief: just the key information and the URL.

Exporting from Figma with Marka

Open Marka Email Generator Plugin in Figma
Select your email frame (single column, 600px wide recommended)
Click Export HTML
Choose the standard HTML export (Postmark uses raw HTML)
Copy the exported code

The export gives you complete, self-contained HTML with inline CSS — exactly what Postmark needs for the HtmlBody field.

Importing HTML into Postmark

Postmark has two ways to use HTML templates: the Templates feature in the dashboard, and the API HtmlBody field on individual messages.

Using Postmark Templates (recommended)

Go to your Postmark server → Templates
Click New Template
Give it a name (e.g., "Welcome Email", "Password Reset")
In the HTML tab, paste your exported HTML
Add a plain text version in the Text tab
Save the template

When sending via the API, set TemplateAlias to your template's alias and pass a TemplateModel object with your variable values — for example first_name, action_url, and product_name. Postmark substitutes these into the Mustache placeholders in your HTML at send time.

Using HtmlBody directly (for simple or dynamic cases)

For emails where the entire HTML is generated server-side, send the Postmark API request with HtmlBody set to your exported HTML string and TextBody set to your plain text version. Include your Mustache variables inside the HTML before sending, or substitute them server-side before the API call.

Postmark message streams

Postmark separates transactional and broadcast (marketing) traffic into message streams. Use the correct stream for your email type:

Outbound stream (default): transactional, one-to-one emails
Broadcast stream: promotional, one-to-many emails

Mixing transactional and marketing emails in the same stream hurts deliverability. Send your Figma-designed marketing templates through the broadcast stream, and transactional emails (password reset, order confirmation) through the outbound stream.

Testing before you deploy

Postmark's Template Playground lets you preview and test templates with real data before going live:

Open your template in Postmark
Click Preview & Test
Fill in variable values in the JSON panel
Send a test to your inbox

Also test rendering in Outlook (Postmark's test email feature shows desktop rendering but not client-specific rendering — use Litmus or Email on Acid for cross-client testing).