Overview

The Composa Figma Plugin, called Email Love, bridges your design workflow with email production. Whether you're syncing individual components or exporting complete email designs, Email Love makes it seamless to move from Figma to Composa.

What Email Love Does

Email Love provides two powerful capabilities for email designers:

1. Sync Design System Components

Convert your Figma components into reusable Email Design System (EDS) components in Composa. Your existing design system in Figma becomes the foundation for a production-ready design system.

• Select component frames in Figma

• The plugin converts them to MJML (email markup language)

• Components are synced to your Composa design system

• Keep your design system in sync as you iterate

2. Export Full Email Designs

Take a complete email design from Figma and export it directly into Composa as a ready-to-edit template.

• Select your finished email design

• Export as a template with one click

• Organize it in your Composa project folders

• Start testing, personalizing, and sending immediately

How Component Syncing Works

Email Love uses an intelligent syncing system to keep your design system up to date:

Initial Sync

When you sync a Figma component frame for the first time, Email Love:

• Converts the frame and all nested elements to MJML markup

• Pushes the component to your Composa design system

• Records the Figma node ID as a unique identifier

Smart Updates

The plugin is smart about subsequent syncs:

• Unchanged components: Skipped to save time

• Modified components: Automatically updated in Composa

• Conflict detection: If a component was edited in both Figma and Composa since the last sync, the conflict is flagged so you can decide which version to keep

This means you can safely re-sync components without worrying about creating duplicates or losing important changes.

Sync Status Indicators

After syncing, components in Composa display a visual indicator:

• Green checkmark: Component is synced from Figma and up to date

• Blue cloud: Component was edited in Composa after being synced from Figma

These indicators help you understand the relationship between your Figma designs and production components.

Getting Started

Prerequisites

• A Composa account

• Access to a Figma file where you want to use the plugin

• An API key from Composa (see the setup guide below)

Quick Start

1. Generate an API key in Composa (Settings > API Keys)

2. Install the Email Love plugin from the Figma Community

3. Open the plugin in Figma and paste your API key in Settings

4. Select your workspace and design system

5. Start syncing components or exporting templates

For detailed setup instructions, see Setting Up the Plugin.

Component Sync Workflow

Here's the typical flow for syncing components from Figma to Composa:

1. Create or modify component frames in Figma

2. Open the Email Love plugin

3. Select the component frames you want to sync

4. Click Sync to Composa

5. The plugin displays sync status and any conflicts

6. Review synced components in your Composa design system

7. Use them in templates or continue iterating in Figma

Email Export Workflow

To export a complete email design as a template:

1. Finish designing your email in Figma

2. Select the entire design frame

3. Open the Email Love plugin

4. Click Export as Template

5. Choose a destination project folder in Composa

6. The template appears in Composa ready for editing, testing, and personalization

Key Features

Batch Syncing

Select multiple component frames at once and sync them together. Ideal for syncing a full design system or a set of related components.

Conflict Resolution

When a component is edited in both Figma and Composa, Email Love flags the conflict and lets you choose which version to keep.

Workspace and Design System Selection

If your Composa account has multiple workspaces or design systems, the plugin lets you choose where to sync components and export templates.

Real-time Status Updates

After syncing, the plugin displays clear status messages about what was created, updated, or skipped.

Best Practices

• Organize Figma frames: Use consistent naming conventions for your component frames to make syncing and tracking easier

• Test early: After syncing components, test them in Composa templates to ensure the MJML conversion looks correct

• Sync regularly: Regular, small syncs are easier to manage than large batch syncs

• Use design system for reusability: Synced components in your design system can be used across multiple templates

• Document components: Add helpful descriptions to components in your design system to guide template builders

Troubleshooting

My API key isn't working

Make sure you've copied the entire API key from Composa (they start with "ef_"). API keys are case-sensitive and must not include extra spaces.

Synced components don't look right

MJML has some layout differences from Figma. Complex nested designs may need refinement in Composa. Test components in actual email clients to verify they render correctly.

I see a sync conflict

Review the changes in both Figma and Composa, then choose which version to keep. The plugin will update the component based on your selection.

The plugin isn't responding

Try refreshing the Figma file and reopening the plugin. If the issue persists, check your internet connection and API key settings.

Next Steps

• Set up the plugin to get started

• Learn about managing your design system

• Explore the API reference for programmatic access

Need Help?

If you encounter issues or have questions about Email Love, contact our support team. We're always happy to help!