Sync your emails to Composa

The Email Love Figma plugin integrates with Composa, a drag-and-drop email builder built by the Email Love team. Composa lets non-designers on your team edit and build emails using your Figma components — without breaking your branding, layouts, or styles.

This guide walks you through connecting the two tools and syncing your templates and design systems from Figma into Composa.

Why Use Composa with the Email Love Figma Plugin?

You may design all your emails in Figma, but not everyone on your team is a designer. Composa bridges that gap by letting team members build and edit emails using your Figma assets in a simple visual editor. As the designer, you maintain full control over styling, layouts, branding, and fonts in Figma — Composa simply makes the content editable for end users.

With Composa you can:

Sync full email templates from Figma so team members can edit content directly

Sync your design system so team members can build new emails by combining your Figma components

Lock down components like headers, footers, and pre-headers to prevent branding changes

Manage projects to organize email campaigns

Integrate with your ESP to send emails directly from Composa

A Quick Overview of Composa

Before connecting Figma, here's how Composa is organized:

Projects — Where your email campaigns live. A project can contain as many emails as you need.

Design Systems — Where your synced Figma components are stored. Each design system is a library of reusable email components.

Image Library — Manage all your email images in one place.

Dynamic Content — Manage personalized and dynamic content blocks.

ESP Integrations — Connect to any email platform you use for sending.

Prerequisites

Before you begin, make sure you have:

An active Composa account

The Email Love Figma plugin installed

At least one email designed in Figma using the plugin

Your Composa API key (found in your Composa account settings)

Step 1: Connect Composa to the Email Love Figma Plugin

First, you'll need to connect Composa to the plugin using your API key.

Open Figma and navigate to your email design

Select your email frame

Launch the Email Love Figma plugin

Click the Export button

From the dropdown, select one of the two Composa integrations:

Template Sync — Syncs a full email template to a Composa project

Design System Sync — Syncs individual components to a Composa design system

Paste your Composa API key

Give the connection a name (optional, but helpful for managing multiple workspaces)

Click Set API Key

Your Composa account is now connected to the plugin.

Step 2: Sync a Template to Composa

Template Sync exports your complete email design from Figma into a Composa project, where team members can edit the content.

In Figma, select the frame containing your full email design

In the plugin, click Export and select Template Sync

Select your Composa workspace

Select the project (folder) where you want the template to appear

Click Export to Composa

Wait for the success confirmation

Now switch to Composa and navigate to your project. Your template will appear there, ready to edit.

What Can Be Edited in Composa

Once a template is synced, team members can:

Move content blocks around within the email

Edit text and buttons

Add links

Rearrange sections

What Stays Locked

As the designer, you control all styling in Figma. The following cannot be changed by end users in Composa:

Fonts and typography

Colors and branding

Layout structure

Component styling

This ensures every email sent stays on-brand, regardless of who builds it.

Step 3: Sync a Design System to Composa

Design System Sync takes your individual Figma components and creates a reusable component library in Composa. This is powerful because it lets team members build entirely new emails by dragging and dropping your Figma components.

Prepare Your Components in Figma

Place all the components you want to sync into a single frame in Figma

Each component (header, hero, content block, CTA, footer, etc.) should be a separate element within that frame

Sync the Design System

Select the frame containing your components

In the plugin, click Export and select Design System Sync

Choose Create New Design System and give it a name (e.g., your brand name)

Click Export

The plugin will sync each component individually into Composa

You'll see a confirmation showing how many components were created.

Configure Your Design System in Composa

After syncing, go to the Design Systems section in Composa to review and configure your components:

Rename components — The default names come from your Figma layer names (e.g., "mj-wrapper"). Give them recognizable names like "Header", "Hero Banner", "Two-Column Content", etc.

Lock components — Lock down components like headers, footers, and pre-headers so users cannot modify them. This is ideal for elements that should remain consistent across all emails.

Preview the MJML — Each component shows its MJML code for reference.

Tip: You can also rename your components in Figma before syncing to save time configuring them in Composa.

Step 4: Build Emails Using Your Design System in Composa

Once your design system is synced, team members can create new emails using your component library.

In Composa, go to your project

Create a new email

Select Create from Design System and choose the design system you synced

Your components will appear in the left-hand sidebar

Drag and drop components into the email canvas

Edit text, buttons, images, and links directly in the visual editor

This gives non-designers the freedom to build emails while staying within your brand guidelines.

Best Practices

Use Template Sync when you want to share a specific, finished email design for content editing

Use Design System Sync when you want to empower team members to create new emails from your component library

Lock sensitive components like headers, footers, and legal disclaimers to prevent accidental changes

Name your components clearly in Figma before syncing — it saves configuration time in Composa

Organize projects in Composa to keep campaigns, teams, or brands separated

Troubleshooting

Export fails or times out: Double-check that your API key is correct and has the necessary permissions. If you recently created the key, wait a moment and try again.

Components not appearing in Composa: Make sure all your components are inside a single frame in Figma before syncing. Individual layers outside of a frame may not sync correctly.

Design system not showing when creating an email: When creating a new email in Composa, make sure you select Create from Design System and choose the correct design system from the list.

Branding looks different in Composa: Composa renders the HTML exported from Figma. If something looks off, check your original Figma design and re-sync. The styling is controlled entirely in Figma.

Need Help?

If you have questions about the Composa integration, feel free to reach out to us at support@emaillove.com. We're happy to give you a demo or answer any questions.

Export Overview — Understand all export options and how the plugin converts your Figma design to HTML

Pre-Built Email Components — Browse the available components you can use in your designs

Saving Custom Components — How to save your own reusable components in the plugin