Figma Klaviyo email templates — what's included
These Klaviyo email templates are designed in Figma and export as production-ready HTML in one click using the Marka Email Generator plugin. All Klaviyo personalization tags are pre-configured — drop in your brand, export, and import to Klaviyo without writing a line of code.
Works with Klaviyo flows, campaigns, A/B tests, and Smart Send Time.
Klaviyo personalization variables reference
All templates include the most common Klaviyo dynamic tags already placed in the correct text layers:
| Variable | Description |
|---|---|
{{ first_name }} |
Contact first name |
{{ last_name }} |
Contact last name |
{{ email }} |
Contact email address |
{{ organization }} |
Company or organization name |
{{ event.value }} |
Triggered event value (e.g. order total) |
{{ event.ProductName }} |
Product name from triggered event |
{% unsubscribe %} |
Unsubscribe link (required in every email) |
{% unsubscribe_preferences %} |
Preference center link |
For a full reference with all Klaviyo variables and flow-specific tags, see the Klaviyo email variables guide.
What's included in every template
Figma source file with components Full component set: header with logo, hero, text blocks, CTA buttons, product cards, social icons, and footer. Customize everything visually — no HTML editing required.
Klaviyo variables pre-configured Personalization tags are placed in text layers and preserved on export. Select "Export for Klaviyo" in Marka to ensure variable syntax is output correctly.
Outlook-compatible table-based HTML Exported HTML uses table-based layouts with inline CSS — the only approach that renders correctly across Outlook 2007–365, Gmail, Apple Mail, and mobile email apps.
Mobile responsive layouts Auto Layout in Figma maps to responsive media queries in the exported HTML. Columns collapse to single-column on mobile automatically.
Dark mode support CSS dark mode overrides are included for Apple Mail, Gmail mobile, and Outlook's forced dark mode.
How to import these templates to Klaviyo
- Duplicate the Figma file and customize with your brand
- Open Marka Email Generator Plugin in Figma
- Select your email frame and click Export for Klaviyo
- Copy the HTML
- In Klaviyo: go to Content → Templates → Create Template
- Select Import HTML and paste your code
- Save — your template is ready to use in any flow or campaign
For a full walkthrough with screenshots, see the Figma to Klaviyo export guide.
Using these templates in Klaviyo flows
Once imported, templates work in all Klaviyo sending contexts:
- Welcome series — trigger on list subscription or account creation
- Abandoned cart flows — trigger on Checkout Started event
- Post-purchase flows — trigger on Placed Order or Fulfilled Order
- Win-back campaigns — re-engage lapsed subscribers
- Browse abandonment — trigger on Viewed Product
- Regular campaigns — newsletters and promotions
Klaviyo conditional logic ({% if %}, {% for %}) can be added directly to the HTML after import for advanced personalization.
Frequently asked questions
Do Klaviyo variables work after export from Figma?
Yes. Type Klaviyo variable syntax (e.g. {{ first_name }}) directly into Figma text layers. Marka preserves them in the exported HTML when you choose the Klaviyo export option.
Can I use these templates in Klaviyo A/B tests? Yes. Import the template to Klaviyo, then use it as the base for both variants in a flow or campaign A/B test. Adjust content or layout per variant directly in Klaviyo's HTML editor.
Do I need a paid Klaviyo plan to use custom HTML templates? Custom HTML email templates work on all Klaviyo plans, including the free tier. There are no plan restrictions on using custom-coded templates.
Can I update the template after importing? Yes. Edit in Figma and re-export for design changes. For small copy tweaks, you can edit the HTML directly in Klaviyo's template editor.
