EmailBridge docs

Slice your Figma email and build it straight into your Klaviyo or Omnisend master template — no HTML.

Quick start

From a Figma design to a ready-to-send email in three steps:

1. Slice your design in Figma with the Slice tool — one slice per section.
2. Connect your platform — add your Klaviyo or Omnisend API key and pick a master template to clone.
3. Build — EmailBridge optimizes your slices and builds them into your template, ready to send.

Install the plugin

EmailBridge runs as a Figma plugin.

• Open Figma and go to Plugins → EmailBridge (or import it in development from Plugins → Development → Import plugin from manifest).
• Run the plugin from any Figma design file. The panel opens on the right.

Connect Klaviyo or Omnisend

Switch between platforms at the top of the panel, then add your API key.

Klaviyo

• Create a Private API key in Klaviyo (pk_…) with Accounts: Read, Images: Full and Templates: Full — see API access & scopes for the exact list.
• Paste it into EmailBridge. Your account name is pulled from Klaviyo automatically.

Omnisend

• Create an API key with Email content and Images access (and Brands to auto-fill your store name) — see API access & scopes.
• Paste it into EmailBridge.

API access & scopes

EmailBridge uses the minimum access needed to build templates and upload images — nothing else. Your key reaches the secure bridge only at build time and is never stored.

Klaviyo — Private API key (pk_…)

Create it in Klaviyo → Settings → API keys → Create Private API Key. Choose Custom Key and grant the three scopes above (a Full Access key also works).

Omnisend — API key

Create it in Omnisend → Store settings → Integrations & API → API keys.

Pick a master template

EmailBridge never builds an email from nothing — it clones your own master template and drops your design in, so your header, footer and legal blocks stay exactly as you set them.

• In Klaviyo, the master must be a drag-and-drop (SYSTEM_DRAGGABLE) template. In Omnisend, any saved template works.
• Pick it from the Master template dropdown. Hit ↻ Reload if you just created one.
• Your sliced design is added as a new section at the top of the cloned template.

Slice your design

EmailBridge reads Figma Slice tool regions — not frames or groups. Each slice is one block in the final email.

1. Design your full email in one Figma frame.
2. Pick the Slice tool (shortcut S) and draw a slice over each section — hero, product, banner, footer art, and so on.
3. Select that frame and open EmailBridge. It finds every slice inside, at any depth, and lists them.

By default every slice becomes an image block. You can turn specific slices into other block types by naming them — see Links, Editable text, and Buttons below.

What each slice name becomes

Sizes & columns

Image width is set by how many slices share a row, not by the slice’s own size — always exported at 2× retina:

Place slices side by side in your design and EmailBridge builds them as real columns (a table on Klaviyo, native columns on Omnisend) — up to 4 across, retina-sharp. Stacked slices become full-width rows.

Links

To make an image clickable, give EmailBridge a URL in any of these ways — it picks the first it finds:

• Add a Figma hyperlink to a text layer inside the slice.
• Type a plain URL as text inside the slice (https://…, www.…, mailto:, tel:).
• Name the slice itself a URL.

Alt text

EmailBridge fills alt text for you: it takes the biggest text inside the slice (your headline) and uses it as the alt. Newlines collapse to spaces.

If a slice has no text, the alt falls back to your brand / company name. You can always override it in the build panel’s Alt text field.

Build & review

1. Select the one frame that holds your slices.
2. EmailBridge shows a pre-flight list: a thumbnail and badge for every slice, with editable Link and Alt fields. Use the × toggle to skip any slice from this build.
3. Pick your master template and click Build.
4. Your slices are optimized, uploaded, and built into a clone of your template. Open it in Klaviyo or Omnisend to send.

Editable text optional

This is an optional, opt-in feature. By default text stays inside the image. To make a section a real, editable text block instead, name the slice:

• text or body → body text
• h1, h2, h3, h4 (or heading 1…4) → headings

The text block inherits your master template’s typography — its Body and Heading styles — so the size and font come from your template, not from Figma. Color, bold/italic, links and line breaks are kept from your design.

Buttons optional

Also optional. Name a slice button and EmailBridge builds a real button instead of an image, matching your design:

• Background color, corner radius, label, text color and link are read from the slice.
• Padding is a consistent 16px top/bottom, 30px left/right; the button fits to its text; label size is kept in a 16–18px range for tappability.
• Put the destination URL on the button’s text (hyperlink or typed URL), or in the panel’s Link field.

If anything needed is missing (no label, no shape), the slice safely falls back to an image — so a “button” slice never breaks a build.

Image optimization

Every image slice is compressed in your browser (MozJPEG) with quality targeting, and exported at 2× retina for crisp 600px-wide emails. You see the source vs optimized size in the panel as it works.

Limits

• 40 slices maximum per build.
• Klaviyo caps image uploads at about 100 per day per account. A 20-slice email uses 20 of those — so plan large/frequent sends accordingly. (Text and button slices don’t use an image upload on Klaviyo.)
• The master template must be drag-and-drop / draggable.

Troubleshooting

“No slices found”

Mark your export regions with the Slice tool (not frames or rectangles), then re-select the frame.

“Pick a master template first”

Add your API key, hit ↻ Reload, and choose a drag-and-drop template from the dropdown.

“Build / Patch failed”

Usually a stale or restricted API key, or a master that isn’t draggable. Re-check the key’s permissions (Images + Templates on Klaviyo; Brands on Omnisend) and that the master is a drag-and-drop template.

A multi-column row came out small

If one slice in a side-by-side row can’t be exported, EmailBridge stops the build rather than shipping a half-width image — re-select the frame and try again.

FAQ

Does it change my master template?

No. EmailBridge clones your master for each build; your original is untouched.

Klaviyo and Omnisend both?

Yes — same Figma file, switch the platform, pick that platform’s master, build.

Do I need to write HTML?

Never. You design in Figma; EmailBridge does the rest.

Are text and button blocks required?

No — they’re optional. The default output is images, which works everywhere. Opt in by naming slices text/body/h1–h4 or button when you want editable blocks.

Where does my design land in the template?

As a new section at the top, above your template’s header and footer.