How to Export HTML Email Templates from Figma to Klaviyo: Step-by-Step Guide
Learn how to convert your Figma email designs into production-ready Klaviyo HTML email templates. Use the fastest Figma to Klaviyo email workflow — no coding required. Export in 5 minutes with the Marka HTML Email Generator.
Updated March 2026
Figma to Klaviyo email templates: export clean HTML in one click
Create professional Klaviyo email templates directly from your Figma designs. Export clean, Klaviyo-ready HTML code instantly with the Marka HTML Email Generator.
100% compatible with Klaviyo email editor
Exports table-based HTML optimized for Klaviyo and Outlook
One-click export HTML email from Figma
Step-by-step guide
Method 1: Via API key (recommended)
Marka pushes the template directly to Klaviyo — no copy-pasting required.
Install the Marka plugin
Install the free Marka Email Generator plugin from the Figma Community. Open Figma, search for Marka in the plugins panel, and click Install.
Install Figma PluginDesign your template inside the plugin
Open the Marka plugin and build your email template. Add Klaviyo personalization variables directly into text layers:
| Variable | Description |
|---|---|
| {{ first_name }} | Contact first name |
| {{ last_name }} | Contact last name |
| {{ email }} | Contact email address |
| {{ organization.name }} | Your company name |
| {{ organization.address1 }} | Company address (CAN-SPAM) |
| {{ organization.city }} | Company city |
| {{ organization.state }} | Company state |
| {{ organization.zip }} | Company ZIP code |
| {{ unsubscribe_link }} | Unsubscribe URL (required) |
| {{ manage_preferences_link }} | Manage email preferences URL |
For conditional blocks, add Jinja2 tags ({% if %} / {% endif %}) as text layers. See the Klaviyo variables guide for the full reference.
Select "Export as Klaviyo" and enter your API key
In the plugin, choose Export as Klaviyo. The plugin will prompt you for your Klaviyo API key. You can find it in Klaviyo under Account → Settings → API Keys — create a Private API key if you don't have one, then paste it into the plugin.
Export — Marka pushes the template to Klaviyo
Click Export. Marka generates the HTML and sends the template directly to your Klaviyo account — no downloading, no copy-pasting.
Find and use your template in Klaviyo
Your template appears in Klaviyo → Content → Templates. Use it in any campaign or flow.
Don't have a Klaviyo API key?
Use the copy & paste method ↓Method 2: Copy & paste (no API key needed)
Export HTML or a ZIP archive from Marka and import it manually into Klaviyo Templates.
Install the Marka plugin
Install the free Marka Email Generator plugin from the Figma Community. Open Figma, search for Marka in the plugins panel, and click Install.
Install Figma PluginDesign your template inside the plugin
Open the Marka plugin and build your email template. Add Klaviyo personalization variables directly into text layers:
| Variable | Description |
|---|---|
| {{ first_name }} | Contact first name |
| {{ last_name }} | Contact last name |
| {{ email }} | Contact email address |
| {{ organization.name }} | Your company name |
| {{ organization.address1 }} | Company address (CAN-SPAM) |
| {{ organization.city }} | Company city |
| {{ organization.state }} | Company state |
| {{ organization.zip }} | Company ZIP code |
| {{ unsubscribe_link }} | Unsubscribe URL (required) |
| {{ manage_preferences_link }} | Manage email preferences URL |
For conditional blocks, add Jinja2 tags ({% if %} / {% endif %}) as text layers. See the Klaviyo variables guide for the full reference.
Copy the HTML or download the ZIP archive
When your design is ready, choose how to export:
- HTML only — copy the generated HTML code directly from the plugin (use this if your email has no hosted images)
- ZIP archive — download a ZIP containing the HTML file and all image assets (use this if your template includes images)
Go to Klaviyo Templates → Import
In Klaviyo, go to Content → Templates and click Import. Choose your import format:
- HTML — upload or paste the HTML file exported from Marka
- ZIP — upload the ZIP archive (HTML + images) exported from Marka
Preview and save
Klaviyo imports the template and opens it in the editor. Use the Preview panel to check rendering, then click Save. The template is now available in all Klaviyo campaigns and flows.
Why export email templates from Figma to Klaviyo?
Create custom Klaviyo emails with Figma's powerful design tools, then export production-ready HTML in one click. No coding, no developer bottleneck, no design limitations.
Unlimited Design Freedom
Design any Klaviyo email layout you can imagine. No rigid template blocks, no locked modules. Your exact brand design, pixel-perfect across all email clients.
Developer-Free Workflow
Designers create in Figma, marketers export to Klaviyo. Zero HTML or CSS knowledge required. Ship custom Klaviyo templates without waiting for engineering.
90% Faster Than Hand-Coding
Export Klaviyo-ready HTML in 5 minutes vs 2-4 hours coding by hand. Update designs instantly with re-export. Iterate on flows in real-time, not days.
Full Klaviyo Integration
Personalization variables, conditional blocks, and flow logic work natively. Use templates in campaigns, automated flows, and A/B tests.
Frequently asked questions
Can I export Figma designs directly to Klaviyo?
Yes. Use the Marka Email Generator Plugin to export your Figma email frame as clean HTML, then paste it into Klaviyo using the HTML template option. The process takes about 5 minutes from Figma to a ready-to-use Klaviyo template.
Do Klaviyo personalization variables work in Figma designs?
Yes. Type Klaviyo variables like {{ first_name }} or {{ unsubscribe_link }} directly into your Figma text layers. The Marka Plugin preserves them exactly in the exported HTML, including Jinja2 conditionals and filters.
How do I save an HTML email as a template in Klaviyo?
In Klaviyo, go to Content → Templates → Create Template. Select "HTML" as the editor type, paste your exported HTML, and save. You can then use this template in campaigns and flows.
Will my emails render correctly in Outlook?
Yes. Marka Plugin generates table-based HTML with inline CSS — the only approach that renders correctly in Outlook 2007 through Microsoft 365. The exported code works across all major email clients.
Are templates mobile responsive automatically?
Yes, if you use Figma Auto Layout. Marka Plugin generates responsive HTML with media queries. Emails built with Auto Layout will look correct on desktop and mobile without additional work.
Can I use Klaviyo dynamic tags like {% if %} in Figma templates?
Yes. Type Klaviyo Jinja2 tags directly in Figma text layers. For conditional blocks that wrap multiple elements, add the {% if %} and {% endif %} tags in separate text layers and mark them appropriately. The Marka plugin exports them as HTML.
How do I add the Klaviyo unsubscribe link?
Add {{ unsubscribe_link }} as the link URL for your unsubscribe text in Figma. In the Marka Plugin's link field for that text layer, enter {{ unsubscribe_link }}. Klaviyo requires this in all campaign emails.
Resources and learning
Guides, tutorials and resources to help you master HTML email generation with Marka Plugin and Figma.
Explore all Marka Plugin features
HTML email generation is one part of the Marka Plugin. Explore design systems, template libraries, dark mode tools and more.
View all features →Complete guide: export HTML from Figma
Step by step tutorial for exporting production ready HTML email code from Figma with Marka Plugin.
Read guide →Klaviyo variables reference
Complete reference for Klaviyo personalization variables, dynamic tags, and conditional blocks for Figma-designed HTML emails.
Read guide →Browse ready made email templates
Free Figma email templates ready for HTML export. Includes newsletters, welcome flows, transactional emails and more.
Browse templates →Design Klaviyo emails in Figma, export in one click
Stop fighting with Klaviyo's template builder. Design beautiful emails in Figma with full creative control, export production-ready HTML, and import to Klaviyo in minutes. Free to start.