The Email Love Builder 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 Email Love Builder.
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 Email Love Builder. 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 Email Love Builder 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 Email Love Builder as a ready-to-edit template.
- Select your finished email design
- Export as a template with one click
- Organize it in your Email Love Builder 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 Email Love Builder 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 Email Love Builder
- Conflict detection: If a component was edited in both Figma and Email Love Builder 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 Email Love Builder display a visual indicator:
- Green checkmark: Component is synced from Figma and up to date
- Blue cloud: Component was edited in Email Love Builder after being synced from Figma
These indicators help you understand the relationship between your Figma designs and production components.
Getting Started
Prerequisites
- An Email Love Builder account
- Access to a Figma file where you want to use the plugin
- An API key from Email Love Builder (see the setup guide below)
Quick Start
- Generate an API key in Email Love Builder (Settings > API Keys)
- Install the Email Love plugin from the Figma Community
- Open the plugin in Figma and paste your API key in Settings
- Select your workspace and design system
- 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 Email Love Builder:
- Create or modify component frames in Figma
- Open the Email Love plugin
- Select the component frames you want to sync
- Click Sync to Email Love Builder
- The plugin displays sync status and any conflicts
- Review synced components in your Email Love Builder design system
- Use them in templates or continue iterating in Figma
Email Export Workflow
To export a complete email design as a template:
- Finish designing your email in Figma
- Select the entire design frame
- Open the Email Love plugin
- Click Export as Template
- Choose a destination project folder in Email Love Builder
- The template appears in Email Love Builder 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 Email Love Builder, Email Love flags the conflict and lets you choose which version to keep.
Workspace and Design System Selection
If your Email Love Builder 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 Email Love Builder 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 Email Love Builder (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 Email Love Builder. Test components in actual email clients to verify they render correctly.
I see a sync conflict
Review the changes in both Figma and Email Love Builder, 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!