What makes a good HubSpot HTML email template?
HubSpot's drag-and-drop email editor works for basic campaigns, but it has real limits: fixed block types, restricted layouts, and no way to achieve fully custom designs without writing code. Custom coded HTML email templates unlock full design freedom — any layout, any font treatment, any structure — while still working natively with HubSpot Marketing Hub.
The templates above are designed in Figma and export as clean, HubSpot-compatible HTML in one click using the Marka Email Generator plugin. They work with HubSpot workflows, automation, smart content, and all personalization tokens out of the box.
What's included in every HubSpot email template
Figma source file with editable components Each template includes a Figma file with a full component set: header, hero, content blocks, CTA, footer, and social icons. Customize colors, fonts, logos, and copy without touching HTML.
Pre-configured HubSpot personalization tokens All templates include the most common HubSpot contact tokens already placed in the right layers:
| Token | Description |
|---|---|
{{ contact.firstname }} |
Contact first name |
{{ contact.lastname }} |
Contact last name |
{{ contact.email }} |
Contact email address |
{{ contact.company }} |
Contact company name |
{{ unsubscribe_link }} |
Subscription preferences page |
{{ unsubscribe_link_all }} |
Full unsubscribe URL |
{{ site_settings.company_name }} |
Your company name |
{{ site_settings.company_street_address_1 }} |
Company address (CAN-SPAM) |
Outlook-compatible table-based HTML The exported HTML uses table-based layouts with inline CSS — the only approach that renders correctly in Outlook 2007 through Microsoft 365. No CSS Grid, no Flexbox, no rendering surprises.
Mobile responsive layouts Built with Figma Auto Layout, the exported HTML includes media queries that adapt the layout for mobile screens automatically.
Dark mode support All templates include dark mode CSS that renders correctly in Apple Mail, Gmail mobile, and Outlook's forced dark mode.
How to use these templates in HubSpot
- Duplicate the Figma template file
- Customize design (colors, fonts, logo, copy) — no code needed
- Open the Marka Email Generator plugin in Figma
- Select your email frame and click Export for HubSpot
- In HubSpot: go to Content → Design Manager → Create File → HTML + HUBL → Email
- Paste the exported HTML and click Publish Changes
- Create a new email, open the Custom tab, and select your template
For full step-by-step instructions with screenshots, see the Figma to HubSpot export guide.
Using these templates with HubSpot workflows and automation
Once imported to HubSpot Design Manager, these templates work in every HubSpot sending context:
- Marketing email campaigns — one-off sends and recurring newsletters
- Enrollment workflows — automated sequences triggered by contact properties or form submissions
- Drip campaigns — multi-step nurture sequences
- Automated emails — triggered by deal stage, list membership, or custom events
- Transactional emails — receipts, confirmations, and notifications (with HubSpot Transactional Email add-on)
The templates are plain HTML + HUBL — HubSpot's templating language. You can add HUBL logic for smart content, conditional blocks, and advanced personalization directly in the HTML after importing.
HubSpot plan requirements
Custom coded HTML email templates require a paid HubSpot account:
- HubSpot Marketing Hub Starter or higher — supports custom HTML templates in email campaigns
- HubSpot Sales Hub Professional / Enterprise — supports custom templates in sequences
- Free HubSpot accounts — do not support custom HTML email templates
The Marka plugin itself is free to install and export.
Frequently asked questions
Can I edit these templates after importing to HubSpot? Yes. Once imported to Design Manager, you can edit the HTML directly in HubSpot. For design changes, it's faster to update in Figma and re-export — the whole process takes under 2 minutes.
Do these templates work with HubSpot Smart Content? Yes. After importing, you can add Smart Content rules in HubSpot's template editor to show different content blocks based on contact properties, list membership, device type, or lifecycle stage.
Are these templates compatible with HubSpot's email health tools? Yes. The exported HTML passes HubSpot's built-in spam score check and renders correctly in HubSpot's preview tool. All required elements (unsubscribe link, company address) are included.
Can I use these templates in HubSpot Sales sequences? Sales Hub Professional and Enterprise support custom HTML templates in sequences. Import the template to Design Manager first, then select it when creating a sequence email.
How do I update all templates when my brand changes? Update the Figma source file (colors, logo, fonts) using Figma variables, then re-export each template and paste the updated HTML into HubSpot Design Manager. With Figma variables, a full brand update across all templates takes about 10 minutes.
