How to Import a Custom Figma Email Template into HubSpot
HubSpot's drag-and-drop email editor works well for standard campaigns, but it can't reproduce a fully custom design — a branded layout with a specific grid, custom typography, or design elements that don't fit into HubSpot's pre-built modules. For that, you need a coded template in HubSpot Design Manager.
This guide covers the complete workflow: design your custom email in Figma → export clean HTML with Marka → import into HubSpot as a coded template.
Why use a custom coded template in HubSpot
HubSpot has three ways to create emails:
- Drag-and-drop editor — fast, but limited to HubSpot's block set
- Classic template — legacy HTML option, still supported
- Coded template in Design Manager — full HTML control, supports all HubSpot personalization tokens
For a custom Figma design, the coded template route is the right choice. It accepts raw HTML, preserves your exact design, and still supports every HubSpot personalization token and Smart Content rule.
Step 1: Design your email in Figma with HubSpot tokens
Before exporting, add HubSpot personalization tokens directly into your Figma text layers. Marka preserves them in the exported HTML.
| Token | Description |
|---|---|
{{ contact.firstname }} |
Contact first name |
{{ contact.lastname }} |
Contact last name |
{{ contact.email }} |
Contact email address |
{{ contact.company }} |
Contact company name |
{{ owner.first_name }} |
Contact owner first name |
{{ unsubscribe_link }} |
Unsubscribe URL (required) |
{{ site_settings.company_name }} |
Your company name |
Add tokens exactly as shown — HubSpot resolves them when the email is sent. If a token has no value for a contact, HubSpot substitutes the default value you set in the token settings.
Step 2: Export HTML from Figma with Marka
- Open Marka Email Generator Plugin in Figma
- Select your email frame on the canvas
- Click Export HTML → Copy HTML
The exported HTML is production-ready: table-based layout, inlined CSS, responsive columns, and all tokens preserved.
Step 3: Open HubSpot Design Manager
- In HubSpot, go to Marketing → Files and Templates → Design Manager
- Click New File in the left sidebar
- Select HTML & HubL as the file type
- Name your file (e.g.
custom-onboarding-email.html) - Click Create
Design Manager opens a code editor where you can paste your HTML directly.
Step 4: Paste your HTML
Clear the default content in the editor and paste your exported HTML from Marka.
Important: HubSpot Design Manager uses HubL (HubSpot's templating language) in addition to standard HTML. For a basic email template, plain HTML with HubSpot tokens works fine. If you want to add editable modules (so marketing can change content in the email editor without touching the code), you'll need to wrap sections in HubL {% dnd_section %} tags — but this is optional and only needed if multiple people will edit the template.
Click Publish to save the template.
Step 5: Use the template in a HubSpot email
- Go to Marketing → Email → Create email
- Select Custom from the template picker
- Find your template under My Templates or Coded templates
- Select it — the email editor opens with your custom design
From here you can edit any text content, swap images, and use HubSpot's preview and personalization tools. The layout is locked to your design — marketing can update copy without breaking the template.
How to update your custom template
When the design changes in Figma:
- Re-export HTML from Marka (same process as above)
- In Design Manager, open your template file
- Replace the HTML content with the new export
- Publish
All emails using this template pick up the update for future sends. Already-sent emails are not affected.
Common issues
Tokens showing as literal text instead of resolving
Make sure the token syntax matches HubSpot's format exactly: {{ contact.firstname }} with spaces inside the braces. HubSpot is case-sensitive on the property name.
Images not loading Images must be hosted at publicly accessible URLs. Upload images to the HubSpot Files tool (Marketing → Files and Templates → Files) to get a permanent HubSpot-hosted URL, then reference it in Figma before exporting.
Template not appearing in the email picker Only templates published in Design Manager appear in the email picker. If the template is in draft, click Publish in Design Manager first.
Styles breaking in Outlook If your email looks wrong in Outlook, the HTML likely has unsupported CSS. Marka exports Outlook-safe table HTML by default — if you've manually edited the exported code, check for any Flexbox or Grid properties, which Outlook doesn't support.
The difference between custom templates and HubSpot's default editor
| Custom coded template | HubSpot drag-and-drop | |
|---|---|---|
| Design control | Full | Limited to HubSpot blocks |
| Custom fonts | Yes (with fallbacks) | Partial |
| Custom grid layouts | Yes | No |
| HubSpot tokens | Yes | Yes |
| Smart Content | Yes | Yes |
| Editable by non-developers | With HubL modules | Yes |
| Time to set up | 10–15 min | 2–3 min |
For one-off campaigns, drag-and-drop is faster. For recurring templates where your brand design matters — welcome emails, nurture sequences, newsletters — a custom coded template is the right approach.
