Skip to main content
The Email Love Figma plugin integrates with Email Love Builder, 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.

​
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 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)
1

Connect the Builder to the Email Love Figma Plugin

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.
2

Sync a Template to the Builder

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 BuilderOnce a template is synced, team members can:
  • Move content blocks around within the email
  • Edit text and buttons
  • Add links
  • Rearrange sections
What Stays LockedAs 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.
3

Sync a Design System to the Builder

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 BuilderAfter 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.
4

Build Emails Using Your Design System 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. We’re happy to give you a demo or answer any questions.