Brevo-ready HTML
50,000+ users in Figma

How to Export HTML Email Templates from Figma to Brevo: Step-by-Step Guide

Convert your Figma email designs into production-ready Brevo HTML email templates. Export directly via API key or copy-paste — no coding required. Done in 5 minutes with the Marka HTML Email Generator.

Install Plugin Browse Templates

Updated April 2026

Figma to Brevo email templates: export clean HTML in one click

Create professional Brevo email campaigns directly from your Figma designs. Export clean, Brevo-ready HTML instantly with the Marka HTML Email Generator.

100% compatible with Brevo email campaigns

Exports table-based HTML optimized for Brevo and Outlook

One-click export HTML email from Figma

Step-by-step guide

Method 1: Via API key (recommended)

Marka pushes the template directly to Brevo — no copy-pasting required.

Get your Brevo API key

In Brevo, go to Settings → API Keys and click Generate a new API key. Give it a name, copy the key — you won't be able to see it again after closing the dialog.

Brevo Settings page showing API Keys section

Add your API key and sender email to the Marka plugin

Open the Marka plugin in Figma and select Export as Brevo. Fill in two fields:

API key — paste the key you just copied
Sender email — enter the verified sender address from your Brevo account (Settings → Senders & IP). Brevo requires a sender email to create the template correctly via API — without it the import will fail.

Both values are saved locally — you only need to enter them once.

Marka plugin showing Export as Brevo option with API key and sender email fields

Export — Marka pushes the template to Brevo

Click Export. Marka generates the HTML and sends the template directly to your Brevo account. You'll see a confirmation when the export is complete.

Marka plugin showing export complete confirmation after pushing template to Brevo

Find your template in Brevo

Your template appears in Marketing → Campaigns → Email Templates. From there you can use it in any campaign or transactional send via the Brevo API.

Brevo Marketing → Campaigns → Email Templates showing imported template

Don't want to use an API key?

Use the copy & paste method ↓

Method 2: Copy & paste HTML (no API key needed)

Export HTML from Marka and paste it directly into the Brevo HTML editor.

Add Brevo variables to your Figma text layers

Type Brevo variable syntax directly into your Figma text layers. Marka preserves them in the exported HTML:

Variable	Description
{{ contact.FIRSTNAME }}	Contact first name
{{ contact.LASTNAME }}	Contact last name
{{ contact.EMAIL }}	Contact email address
{{ params.order_id }}	Custom transactional param (example)
{{ params.amount }}	Custom transactional param (example)
{{ unsubscription_link }}	Unsubscribe link (required by law)
{{ mirror_link }}	View in browser link

The {{ unsubscription_link }} variable is required by law in all marketing emails — include it in your footer.

Copy the HTML output from Marka

Select your email frame on the canvas, open the Marka plugin, and click Export HTML → Copy HTML. The complete HTML is now on your clipboard.

Marka plugin showing Export options with Copy HTML button

Create a template in Brevo

In Brevo, go to Marketing → Campaigns → Email Templates and click Create a template. When prompted to choose an editor, select HTML editor.

Brevo create template screen with HTML editor option highlighted

Paste your HTML and save

Clear the default code and paste your exported HTML from Marka. Click Save & Activate. The template is now available for campaigns and transactional sends.

Use Brevo's Send a test email button to verify contact attributes render correctly before going live.

Brevo HTML editor with Figma email template pasted in

Why export email templates from Figma to Brevo?

Brevo's drag-and-drop editor has a limited block set. Figma gives you full design freedom — Marka exports it as Brevo-ready HTML in one click.

Unlimited Design Freedom

Design any Brevo email layout in Figma. No locked modules, no rigid blocks — your exact brand design, pixel-perfect across all email clients.

Developer-Free Workflow

Designers create in Figma, marketers push to Brevo. No HTML/CSS hand-coding. Ship custom Brevo campaigns without a developer.

90% Faster Than Hand-Coding

Export Brevo-ready HTML in 5 minutes. Update designs in Figma and re-export — no rebuilding templates from scratch.

Brevo Variables Preserved

Type Brevo contact attributes and transactional params directly into Figma text layers. Marka preserves them in the exported HTML — no post-export editing.

Frequently asked questions

Can I export Figma designs directly to Brevo via API?

Yes. Use the Marka Email Generator Plugin with your Brevo API key and a verified sender email — Marka pushes the template directly to your Brevo account without copy-pasting. The sender email is required by Brevo to create the template correctly via API. You can also export HTML manually and paste it into the Brevo HTML editor.

Do Brevo contact attributes work in Figma designs?

Yes. Type Brevo variable syntax like {{ contact.FIRSTNAME }} or {{ unsubscription_link }} directly into your Figma text layers. Marka preserves them exactly in the exported HTML. They'll resolve when Brevo sends the campaign.

How do I get a Brevo API key?

In Brevo, go to Settings → API Keys and click Generate a new API key. Give it a name and copy the key — you'll paste it into the Marka plugin's Export as Brevo field.

Does it work for Brevo transactional emails?

Yes. For transactional emails, use {{ params.variable_name }} syntax for dynamic content like order IDs, amounts, or product names. Pass the params object when sending via the Brevo API or SMTP.

Will emails render correctly in Outlook?

Yes. Marka generates table-based HTML with inline CSS — the only approach that renders correctly across Outlook 2007 through Microsoft 365, Gmail, Apple Mail, and all major clients.

Are templates mobile responsive?

Yes, if you use Figma Auto Layout. Marka generates responsive HTML with media queries that collapse multi-column layouts to single column on mobile automatically.