Works with Brevo

Figma to Brevo, as real HTML

Design your email in Figma, turn it into responsive, email-safe HTML with MarkupMail, and paste it into Brevo. 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 Brevo

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. 03Paste into Brevo

    Copy the HTML, or download the ZIP, then paste the HTML into a new Brevo campaign using the HTML custom code editor.

    Brevo’s guide to the HTML editor
Brevo details

Ready for Brevo

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

Personalisation tags, kept as typed

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

  • {{ contact.FIRSTNAME }}The contact’s first name
  • {{ unsubscribe }}The unsubscribe link. If it’s missing, Brevo adds one when it sends
  • {{ mirror }}A link to view the email in a browser
Brevo’s guide to personalisation

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 Brevo

What to know before your first send.

Where do I paste the HTML in Brevo?

In a new email campaign, start from scratch with the HTML custom code editor, then paste it in. Brevo’s guide has the steps.

Do Brevo’s personalisation tags work?

Yes. Type them into your design, like {{ contact.FIRSTNAME }}, and MarkupMail keeps them exactly as typed, so Brevo fills them in when it sends. Attribute names can differ between accounts, so check the ones in your Brevo contacts.

Where do my images go?

Brevo needs every image hosted at a public web address, and it doesn’t import a ZIP. Upload the images to your own web hosting, then swap each image path in the HTML for its full web address.

Can I edit the text in Brevo?

Yes, in Brevo’s HTML editor. MarkupMail keeps your text as live text, not part of an image, so you can change the copy there without going back to Figma.

Your next Brevo 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