Figma to HubSpot email workflow: Complete technical guide

How to design HubSpot emails in Figma and export HTML in one click

HubSpot's built-in email editor works for simple campaigns, but it limits what you can design. If you want full creative control over your HubSpot emails, Figma gives you the flexibility to build exactly what you need—and Marka Email Generator Plugin lets you export production-ready HTML in one click.

This guide covers why Figma works better for custom HubSpot emails, how to prepare your designs for export, and how to import your templates into HubSpot Marketing Hub.

Why design HubSpot emails in Figma

Full design flexibility

HubSpot's drag-and-drop editor restricts you to predefined modules and layouts. Figma removes those constraints. Design any layout, use any typography, create custom spacing—your email looks exactly how you want it, not how a template builder allows.

Built-in collaboration

Figma's collaborative features work for email design the same way they work for product design. Your team can comment, suggest edits, and review designs in real-time. Version history tracks every change, so you can roll back if needed. No more emailing PSD files or syncing through shared drives.

One-click HTML export

Marka Email Generator Plugin connects Figma to HubSpot. Select your email frame, click export, and get production-ready HTML optimized for HubSpot and Outlook. No hand-coding, no developer bottleneck. This is the only tool that gives you maximum design flexibility while handling the technical email HTML requirements automatically.

How to prepare your email in Figma

Use plugin blocks

If you prefer building from scratch, Marka Plugin includes a library of email blocks directly in the plugin UI. These blocks are pre-built for email compatibility and include all the sections you need: header, footer, call to action, product cards, feature grids, and more.

Open the plugin, browse blocks, and insert them into your Figma canvas. Each block is already optimized for HubSpot export.

Send a test email

Before exporting to HubSpot, you can send a test email directly from the plugin. Enter your email address, send the test, and check rendering across email clients. Fix any issues in Figma and re-test until it looks right.

How to import your template to HubSpot

Getting your Figma email into HubSpot takes two steps: import the HTML to Design Manager, then use the template in Marketing Hub.

Step 1: Add HTML to Design Manager

  1. Export your email from Figma using Marka Plugin (select "HubSpot" format)
  2. Copy the generated HTML code
  3. Go to HubSpot → Content → Design Manager
  4. Click "Create File" and choose "HTML + HUBL"
  5. Select "Email" as the template type
  6. Paste your HTML code and click "Publish Changes"

Step 2: Use template in Marketing Hub

  1. Go to HubSpot → Marketing → Email
  2. Click "Create Email" and select "Regular"
  3. Open the "Custom" tab
  4. Select your imported template
  5. Name your email and click "Create"

Your Figma design is now ready to send. Add recipients, set your subject line, and launch your campaign.

Need more detail? Follow the complete step-by-step guide with screenshots: Figma to HubSpot export guide