> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Sync Figma emails to Email Love Builder
> Sync email templates from Figma to Email Love Builder for browser-based team editing, no Figma seat required.
The Email Love Figma plugin integrates with [Email Love Builder](/builder/getting-started/overview), a drag-and-drop email builder built by the Email Love team. The Builder 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 the Builder. For the Builder-side view of this connection, see the [Builder's Figma plugin docs](/builder/figma-plugin/overview).
## Why Use the Builder with the Email Love Figma Plugin?
You may design all your emails in Figma, but not everyone on your team is a designer. The Builder 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. The Builder simply makes the content editable for end users.
With the Builder 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 the Builder
## A Quick Overview of the Builder
Before connecting Figma, here's how the Builder 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 [Email Love Builder](/builder/getting-started/overview) account
* The Email Love Figma plugin installed
* At least one email designed in Figma using the plugin
* Your Builder API key (found in your Builder account settings)
First, you'll need to connect the Builder to the plugin using your API key.
1. Open Figma and navigate to your email design
2. Select your email frame
3. Launch the Email Love Figma plugin
4. Click the **Export** button
5. From the dropdown, select one of the two Builder integrations:
* **Template Sync**: Syncs a full email template to a Builder project
* **Design System Sync**: Syncs individual components to a Builder design system
6. Paste your Builder API key
7. Give the connection a name (optional, but helpful for managing multiple workspaces)
8. Click **Set API Key**
Your Builder account is now connected to the plugin.
Template Sync exports your complete email design from Figma into a Builder project, where team members can edit the content.
1. In Figma, select the frame containing your full email design
2. In the plugin, click **Export** and select **Template Sync**
3. Select your Builder workspace
4. Select the project (folder) where you want the template to appear
5. Click **Export**
6. Wait for the success confirmation
Now switch to the Builder and navigate to your project. Your template will appear there, ready to edit.
**What Can Be Edited in the Builder**
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 the Builder:
* Fonts and typography
* Colors and branding
* Layout structure
* Component styling
This ensures every email sent stays on-brand, regardless of who builds it.
Design System Sync takes your individual Figma components and creates a reusable component library in the Builder. This is powerful because it lets team members build entirely new emails by dragging and dropping your Figma components.
**Prepare Your Components in Figma**
1. Place all the components you want to sync into a single frame in Figma
2. Each component (header, hero, content block, CTA, footer, etc.) should be a separate element within that frame
**Sync the Design System**
1. Select the frame containing your components
2. In the plugin, click **Export** and select **Design System Sync**
3. Choose **Create New Design System** and give it a name (e.g., your brand name)
4. Click **Export**
5. The plugin will sync each component individually into the Builder
You'll see a confirmation showing how many components were created.
**Configure Your Design System in the Builder**
After syncing, go to the **Design Systems** section in the Builder 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 the Builder.
Once your design system is synced, team members can create new emails using your component library.
1. In the Builder, go to your project
2. Create a new email
3. Select **Create from Design System** and choose the design system you synced
4. Your components will appear in the left-hand sidebar
5. Drag and drop components into the email canvas
6. 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 the Builder.
* **Organize projects** in the Builder 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 the Builder:** 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 the Builder, make sure you select **Create from Design System** and choose the correct design system from the list.
**Branding looks different in the Builder:** The Builder 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 Builder integration, feel free to reach out to us at [support@emaillove.com](mailto:support@emaillove.com). We're happy to give you a demo or answer any questions.
## Related Articles
* [Export Overview](/plugin/export/overview): Understand all export options and how the plugin converts your Figma design to HTML
* [Pre-Built Email Components](/plugin/components/pre-built): Browse the available components you can use in your designs
* [Saving Custom Components](/plugin/components/save-components): How to save your own reusable components in the plugin