Skip to main content
This guide walks you through installing and configuring the Email Love Figma plugin so you can start syncing components and exporting templates.
1

Generate an API Key in Email Love Builder

Your API key is the authentication credential that allows the Figma 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
  2. Go to the API Keys tab
  3. Click Create API Key
  4. Enter a descriptive name (e.g., “Figma Plugin”)
  5. Click Create
  6. 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.
2

Install the Email Love Figma Plugin

The Email Love Figma plugin is available in the Figma Community.To install the Figma plugin:
  1. In Figma, go to Plugins in the left sidebar
  2. Click Browse all plugins
  3. Search for Email Love
  4. Click on the Email Love Figma plugin
  5. Click Install
The Figma plugin is now available in your Figma account and can be used in any of your files. For more detail, see the Figma plugin install guide.
3

Configure the Figma Plugin with Your API Key

Once installed, open the Figma plugin and configure it with your Email Love Builder account details.To set up the Figma plugin:
  1. In any Figma file, go to Plugins > Email Love
  2. The Figma plugin window opens on the right side
  3. Click Settings (gear icon or settings button)
  4. Paste your API key in the API Key field
  5. Click Connect
The Figma plugin will verify your API key and load your Email Love Builder workspaces.
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 Figma plugin, look for the Workspace dropdown
  2. Select the workspace where you want to work
  3. Look for the Design System dropdown
  4. 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 Figma 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
  2. Open the Email Love Figma plugin (Plugins > Email Love)
  3. The selected frames appear in the Figma plugin panel
  4. Click Sync to Email Love Builder
  5. The Figma plugin converts the frames to MJML and pushes them to your design system

​
What Happens During Sync

  • The Figma 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 Figma plugin flags this conflict. You’ll need to review both versions and decide which to keep. The Figma 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
  2. Open the Email Love Figma plugin
  3. Click Export as Template
  4. Select a destination Project folder in Email Love Builder (if available)
  5. Optionally enter a Template Name
  6. 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 Figma plugin in Figma
  2. Check that your workspace and design system are selected
  3. Create a simple test component frame (e.g., a colored rectangle)
  4. Select it and click Sync to Email Love Builder
  5. 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

​
Figma Plugin Isn’t Loading

  • Try refreshing the Figma file
  • Close and reopen the Figma 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 docs 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

​
Questions?

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