Works with HubSpot

Figma to HubSpot, as real HTML

Design your email in Figma, turn it into responsive, email-safe HTML with MarkupMail, and use it as a HubSpot email template. No coding needed.

Try it free in Figma See how it works

No sign-up, no card. 5 free emails every month.

How it works

Three steps from Figma to HubSpot

Design the email the way you already do. MarkupMail writes the code.

  1. 01Select a frame

    Design the email in Figma as you normally would, then select the frame you want to export.

  2. 02Click Generate

    MarkupMail builds email-safe HTML that holds up even in Outlook, with your text still editable. Then it runs 30+ checks and flags anything to fix.

  3. 03Add it to HubSpot

    Paste the HTML into a new coded email template in HubSpot’s design manager, publish it, then create your email from that template.

    HubSpot’s guide to coded templates
HubSpot details

Ready for HubSpot

Personalisation tokens come through untouched, and the checks that matter run before you export.

Personalisation tokens, kept as typed

Type HubSpot’s tokens straight into your design. MarkupMail keeps them exactly as they are, so HubSpot can fill them in when it sends.

  • {{ contact.firstname }}The contact’s first name
  • {{ unsubscribe_link }}The unsubscribe link, which HubSpot requires in email templates
  • {{ site_settings.company_name }}Your company name, which HubSpot requires along with your address tokens
  • {{ view_as_page_url }}A link to view the email in a browser
HubSpot’s guide to personalisation tokens

Checked before you export

MarkupMail runs 30+ checks before you export, including these.

  • Missing unsubscribe link
  • Missing postal address
  • Too big for Gmail, which clips emails over 102KB
  • Missing alt text
  • Links going nowhere
FAQ

Using MarkupMail with HubSpot

What to know before your first send.

Which HubSpot plan do I need?

Building your own coded email templates needs Marketing Hub Professional or Enterprise. HubSpot’s guide has the details.

Do HubSpot’s personalisation tokens work?

Yes. Type them into your design, like {{ contact.firstname }}, and MarkupMail keeps them exactly as typed, so HubSpot fills them in when it sends.

Which tokens does HubSpot require?

Email templates need the unsubscribe link and your company’s name and address, as HubSpot tokens like {{ unsubscribe_link }}. Type them into your design, or HubSpot may show an error when you publish the template. HubSpot’s guide lists them all.

Where do my images go?

Upload them to HubSpot’s Files tool, then swap each image path in the HTML for the file’s web address.

Can I edit the text in HubSpot?

Yes, in the design manager, where the template’s code lives. MarkupMail keeps your text as live text, not part of an image, so it’s there to change. Edits apply to every email made from that template.

Your next HubSpot email, built in Figma.

Install MarkupMail in Figma, select a frame and click Generate. Your first 5 emails every month are free.

Try MarkupMail free