Help Center
How can we help? 👋
All Categories
Figma Plugin
Setting Up the Plugin

Setting Up the Plugin

Install and configure the Email Love plugin and generate your API key.

Last updated on June 11, 2026

This guide walks you through installing and configuring the Email Love plugin so you can start syncing components and exporting templates.

Step 1: Generate an API Key in Email Love Builder

Your API key is the authentication credential that allows the Email Love plugin to access your Email Love Builder workspace.

To create an API key:

  1. Log in to Email Love Builder and click Settings in the left navigation
  1. Go to the API Keys tab
  1. Click Create API Key
  1. Enter a descriptive name (e.g., "Figma Plugin")
  1. Click Create
  1. Copy the key immediately: it's only shown once and cannot be retrieved later

API keys always start with ef_. Store this key somewhere safe; you'll need it in Step 3.

Step 2: Install the Email Love Plugin

The Email Love plugin is available in the Figma Community.

To install the plugin:

  1. In Figma, go to Plugins in the left sidebar
  1. Click Browse all plugins
  1. Search for Email Love
  1. Click on the Email Love plugin
  1. Click Install

The plugin is now available in your Figma account and can be used in any of your files.

Step 3: Configure the Plugin with Your API Key

Once installed, open the plugin and configure it with your Email Love Builder account details.

To set up the plugin:

  1. In any Figma file, go to Plugins > Email Love
  1. The plugin window opens on the right side
  1. Click Settings (gear icon or settings button)
  1. Paste your API key in the API Key field
  1. Click Connect

The plugin will verify your API key and load your Email Love Builder workspaces.

Step 4: Select Your Workspace and Design System

After connecting your API key, choose where you want to sync components and export templates.

To select your workspace and design system:

  1. In the plugin, look for the Workspace dropdown
  1. Select the workspace where you want to work
  1. Look for the Design System dropdown
  1. Select the design system where components will be synced

If you only have one workspace and design system, these are selected automatically.

Syncing Components

Now that your plugin is configured, you can start syncing Figma components to Email Love Builder.

How to Sync Components

  1. In Figma, select the component frame(s) you want to sync
  1. Open the Email Love plugin (Plugins > Email Love)
  1. The selected frames appear in the plugin panel
  1. Click Sync to Email Love Builder
  1. The plugin converts the frames to MJML and pushes them to your design system

What Happens During Sync

  • The plugin converts your Figma component to MJML (email markup language)
  • It records the Figma node ID so future syncs update the same component
  • If the component already exists, it's updated; otherwise, a new component is created
  • Unchanged components are skipped to save time

Syncing Multiple Components

You can sync several components at once by selecting multiple frames before clicking Sync. This is useful for syncing an entire design system or a related set of components.

Understanding Sync Status

After syncing, components in your Email Love Builder design system show status indicators that tell you about their relationship with Figma:

Green Checkmark

The component is synced from Figma and matches the latest Figma version. No changes have been made in Email Love Builder since the sync.

Blue Cloud

The component was originally synced from Figma but has been edited or modified in Email Love Builder after the sync. The component in Email Love Builder may differ from what's in Figma.

Conflict Indicator

If a component was edited in both Figma and Email Love Builder since the last sync, the plugin flags this conflict. You'll need to review both versions and decide which to keep. The plugin will guide you through conflict resolution.

Exporting a Full Email

Want to move a complete email design from Figma to Email Love Builder? Use the export feature.

To export an email as a template:

  1. In Figma, select the entire email design frame
  1. Open the Email Love plugin
  1. Click Export as Template
  1. Select a destination Project folder in Email Love Builder (if available)
  1. Optionally enter a Template Name
  1. Click Export

The email design is converted to MJML and appears in your Email Love Builder project as a new template, ready for editing, testing, and personalization.

Verifying Your Setup

To confirm everything is working correctly:

  1. Open the Email Love plugin in Figma
  1. Check that your workspace and design system are selected
  1. Create a simple test component frame (e.g., a colored rectangle)
  1. Select it and click Sync to Email Love Builder
  1. Go to Email Love Builder and check your design system: the test component should appear

If you see the test component in your design system, you're all set!

Troubleshooting

"API Key Invalid" Error

  • Make sure you copied the entire key from Email Love Builder (it should start with ef_)
  • Check that there are no extra spaces before or after the key
  • API keys are case-sensitive

Plugin Isn't Loading

  • Try refreshing the Figma file
  • Close and reopen the plugin
  • Check your internet connection

Synced Components Look Incorrect

MJML has different layout rules than Figma. Complex designs may need refinement in Email Love Builder:

  • Test the component in an email client
  • Adjust spacing, sizing, or nesting in Email Love Builder if needed
  • Consult the Figma Plugin Guide for best practices

I Don't See My Design System

  • Verify you selected the correct workspace
  • Make sure you have a design system created in Email Love Builder
  • Check that your API key has the necessary permissions

Next Steps

  • Learn about syncing and exporting with Email Love
  • Explore managing your design system
  • Check the API reference for programmatic access

Questions?

If you need help, contact our support team. We're here to make your workflow as smooth as possible!

Did this answer your question?
😞
😐
🤩