How to Export HTML Email Templates from Figma to HubSpot: Step-by-Step Guide
Learn how to convert your Figma email designs into production-ready HubSpot HTML email templates. No coding required. A simple, 5-minute workflow using the Marka HTML Email Generator.
Figma to HubSpot email templates: export clean HTML in one click
Create professional HubSpot email templates directly from your Figma designs. Export clean, HubSpot-ready HTML code instantly with the Marka HTML Email Generator.
100% compatible with HubSpot Marketing Hub email editor
Exports table-based HTML optimized for HubSpot and Outlook
One-click export HTML email from Figma
Step-by-step guide
Install the Marka HTML Email Generator for Figma
Install the free Marka Email HTML Generator plugin from the Figma Community. No sign in required. The plugin is reviewed and approved by the Figma team.
Install Figma PluginDesign your email template in Figma
You can begin your HubSpot email design in several ways:
Use ready to export templates from ready to export from HubSpot to Figma
Or design freely in Figma:
- Build your own email using reusable blocks inside the Marka plugin
- Create a fully custom responsive layout from scratch
Design your email template in Figma
Before exporting your HTML, prepare your email directly in Figma:
- Add clickable link URLs
- Add an optional preheader text
- Add mobile overrides if needed
- Insert required HubSpot variables and tags
| Variable | Description |
|---|---|
| {{ site_settings.company_city }} | Company city |
| {{ site_settings.company_name }} | Company name |
| {{ site_settings.company_state }} | Company state |
| {{ site_settings.company_street_address_1 }} | Company address |
| {{ unsubscribe_link }} | URL of the page that allows recipients to manage subscription preferences or unsubscribe from email communications |
Export your HTML email using the Marka plugin
- Open the Marka Email Generator plugin inside Figma
- Select your email frame on the canvas
- Click the Export HTML button
- Choose the “Export for HubSpot” option
- Copy the generated HTML code
Add the exported HTML template to HubSpot Design Manager
Go to your HubSpot dashboard → Content → Design Manager
Click “Create File”. In the popup window choose “HTML + HUBL” and continue 
Choose Template Type: Email, give your file a name, and click Create 
Paste your HTML email code from the plugin into the HubSpot editor and click Publish Changes
Create a new HubSpot email using your imported template
Go to your HubSpot dashboard → Content → Design Manager and click Create Email
Select Regular email type
Open the Custom tab and choose your imported HTML template
Give your email a name and click Create email
Add recipients and send your HubSpot email, fully designed in Figma
Why export email templates from Figma to HubSpot?
Create custom HubSpot 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 HubSpot email layout you can imagine. No rigid template blocks, no locked modules, no builder constraints. Your exact brand design, pixel-perfect.
Developer-Free Workflow
Designers create in Figma, marketers export to HubSpot. Zero HTML or CSS knowledge required. Ship custom HubSpot templates without waiting for engineering.
90% Faster Than Hand-Coding
Export HubSpot-ready HTML in 5 minutes vs 2-4 hours coding by hand. Update designs instantly with re-export. Iterate on campaigns in real-time, not days.
Full HubSpot Integration
Personalization tokens, Smart Content, and CTAs work natively. Use templates in workflows, sequences, and automation. Compatible with all HubSpot Marketing Hub features.
Frequently asked questions
Can I export Figma designs directly to HubSpot?
Yes, you can export Figma email designs to HubSpot using Marka Email Generator Plugin. The plugin generates clean, HubSpot-compatible HTML code that you can paste directly into HubSpot's Design Manager. The entire process takes about 5 minutes from Figma to a live HubSpot email template.
Do I need a HubSpot Pro account to use Figma templates?
You need at least HubSpot Marketing Hub Starter to use custom coded email templates. The free HubSpot account doesn't support custom HTML templates. HubSpot Sales Hub Professional and Enterprise also support custom email templates. Marka Plugin works with all HubSpot paid plans that include custom template access.
Can I use this with HubSpot workflows and automation?
You need at least HubSpot Marketing Hub Starter to use custom coded email templates. The free HubSpot account doesn't support custom HTML templates. HubSpot Sales Hub Professional and Enterprise also support custom email templates. Marka Plugin works with all HubSpot paid plans that include custom template access.
Do HubSpot personalization tokens work in Figma templates?
Yes, HubSpot personalization tokens work perfectly. Simply type tokens like {{ contact.firstname }}, {{ contact.company }}, or {{ contact.email }} directly into your Figma text layers. Marka Plugin preserves all HubSpot tokens when exporting HTML, so your personalization will work exactly as expected in HubSpot Marketing Hub.
How do unsubscribe links work with Figma to HubSpot templates?
Add the HubSpot unsubscribe token {{ unsubscribe_link_all }} in the footer link in markdown style like so [unsubscribe]({{ unsubscribe_link_all }}). Markdown links are supported in the Marka Email Generator Figma Plugin, so add this text to the footer, and the link will generate automatically.
Can I use HubSpot Smart Content in exported templates?
Yes, templates exported from Figma support HubSpot Smart Content. After importing your template to HubSpot, you can add Smart Content rules directly in HubSpot's email editor to show different content based on contact properties, list membership, device type, or other criteria.
Will my emails work in Outlook when exported to HubSpot?
Yes, Marka Plugin generates table-based HTML specifically optimized for Outlook compatibility. The exported code works in Outlook 2007, 2010, 2013, 2016, 2019, Microsoft 365, and Outlook.com, as well as all other major email clients including Gmail, Apple Mail, Yahoo, and mobile apps.
Are templates mobile responsive automatically?
Yes, if you use Figma's Auto Layout feature, Marka Plugin generates responsive HTML that adapts to mobile screens automatically. The plugin creates media queries and responsive table structures so your emails look great on desktop, tablet, and mobile devices without additional work.
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. Learn best practices and common patterns.
Read guide →Browse ready made email templates
Free Figma email templates ready for HTML export. Includes newsletters, welcome flows, transactional emails, e commerce receipts and more.
Browse templates →Supabase email templates
Production ready email templates for teams building with Supabase Auth. Use them with the same HTML email generator workflow.
View Supabase templates →Design HubSpot emails in Figma, export in one click
Stop wasting hours hand-coding HubSpot email templates. Design beautiful emails in Figma and export production-ready HTML to HubSpot Marketing Hub in 5 minutes. Free to start.