# Overview
Source: https://help.emaillove.com/builder/api/overview
Programmatic access to templates and design systems: authentication, endpoints, and resources.
The Email Love Builder API provides programmatic access to templates, design systems, and Figma plugin sync functionality. This overview covers authentication, base endpoints, and key resources.
## API Basics
### Base URL
All API requests should be made to:
```text theme={null}
https://api.emaillove.com/api
```
### Authentication
All API requests require a Bearer token (your API key) in the Authorization header:
```text theme={null}
Authorization: Bearer ef_xxxxxxxxxxxxxxxxxxxxx
```
Your API key can be generated in Email Love Builder at **Settings > API Keys**. Keys always start with `ef_`.
### Rate Limiting
Each API key is limited to **100 requests per minute**. If you exceed this limit, the API will return a 429 (Too Many Requests) response. Wait briefly before retrying.
## Key Endpoints
### Templates
```http theme={null}
POST /api/templates
```
Create a new email template in your workspace.
```http theme={null}
GET /api/templates
```
Retrieve all templates in your workspace.
```http theme={null}
GET /api/templates/:id
```
Retrieve a specific template by ID.
```http theme={null}
PUT /api/templates/:id
```
Update template properties or content.
```http theme={null}
DELETE /api/templates/:id
```
Delete a template from your workspace.
### Design Systems
```http theme={null}
POST /api/plugin/design-systems/:id/sync
```
Sync design system components from Figma. Used by the Email Love Figma plugin to push components to your design system.
```http theme={null}
GET /api/plugin/design-systems/:id/changes
```
Retrieve components that have changed since a specific timestamp. Useful for detecting updates and conflicts when syncing with Figma.
## Common Use Cases
### Automated Template Creation
Use the Templates endpoints to programmatically create, update, and manage templates. Integrate with your workflow automation tools to generate templates based on data or events.
### Design System Sync Automation
Integrate component syncing with your CI/CD pipeline or design tool workflows to automatically keep your Email Love Builder design system in sync with your source designs.
### Template Management
Build custom interfaces for template organization, search, and management using the API.
## Response Format
All API responses are returned in JSON format. Successful requests return the created or modified resource along with relevant metadata.
### Error Responses
Errors include an error code and descriptive message:
```json theme={null}
{
"error": "invalid_api_key",
"message": "The provided API key is not valid"
}
```
## Best Practices
* **Use Bearer Token Authentication:** Always include your API key in the Authorization header
* **Handle Rate Limits:** Implement exponential backoff when approaching the 100 requests per minute limit
* **Validate Responses:** Check response status codes and error messages to handle failures gracefully
* **Store API Keys Securely:** Never commit API keys to version control or expose them in client-side code
* **Generate Workspace-Specific Keys:** Create separate API keys for different integrations or purposes
## Security Considerations
* API keys grant full access to your workspace: treat them as secrets
* Rotate API keys periodically for enhanced security
* Revoke keys that are no longer needed (go to Settings > API Keys > Revoke)
* Never share API keys via email or unsecured channels
* Use API keys only with HTTPS connections
## Detailed Documentation
For complete endpoint documentation including request bodies, response schemas, and code examples, see the full API reference in the repository.
## Examples
### Authenticate and List Templates
```bash theme={null}
curl -X GET https://api.emaillove.com/api/templates \
-H "Authorization: Bearer ef_xxxxxxxxxxxxxxxxxxxxx"
```
### Create a New Template
```bash theme={null}
curl -X POST https://api.emaillove.com/api/templates \
-H "Authorization: Bearer ef_xxxxxxxxxxxxxxxxxxxxx" \
-H "Content-Type: application/json" \
-d '{
"name": "Welcome Email",
"description": "Onboarding email for new users"
}'
```
## Need Help?
* Review endpoint-specific documentation in the detailed reference
* Check the [Figma plugin guide](/builder/figma-plugin/overview) for plugin-specific API usage
* Contact our support team for integration assistance
## Changelog
API updates and new endpoints are documented in our changelog. Check back regularly for new features and improvements.
# Creating a Design System
Source: https://help.emaillove.com/builder/design-systems/create
Build your first design system: components, layouts, and base styles.
This guide walks you through building your first design system, from initial setup through adding components, layouts, and base styles.
## Getting Started
1. In Email Love Builder, go to **Settings**
2. Click **Design Systems**
1. Click the **Create Design System** button
2. You'll be prompted to enter:
* **Name**: A clear name for your design system (e.g., "Acme Corp Marketing", "SaaS Onboarding")
* **Description**: Optional details about when and how to use this design system
* **Body Width**: The default email width in pixels (standard is 600px)
3. Click **Create** to proceed
## Adding Components
Components are the reusable building blocks of your design system. They're organized by category to keep everything organized and easy to find.
### To Add a Component:
1. Click **Add Component** in your design system
2. **Choose a Category**: Select which category your component belongs to (see categories below)
3. **Paste MJML Code**: Enter the MJML code for your component
4. **Name the Component**: Give it a descriptive name (e.g., "Hero Image with Text", "Primary CTA Button")
5. Click **Save**
A thumbnail is automatically generated from your component, making it easy to visually identify components in the editor.
### Component Categories
Organizing components by category makes them easy to find when building emails. Here's what each category is for:
**Header**
* Top banners and hero sections
* Logo placements
* Navigation elements
* Announcement bars
**Content**
* Text blocks and paragraphs
* Image plus text combinations
* Feature lists and bullet points
* Product showcases
**CTA (Call-to-Action)**
* Standalone buttons
* Button sections
* Action-oriented containers
**Footer**
* Unsubscribe links and preferences centers
* Social media links
* Legal and compliance text
* Company contact information
**Container**
* Structural wrappers
* Layout dividers
* Section containers
**Styles**
* Decorative elements
* Dividers and spacers
* Borders and lines
## Adding Layouts
Layouts are complete email templates that serve as starting points for new emails. Rather than dragging individual components together, use a layout to get a fully-structured template.
### To Add a Layout:
1. Click **Add Layout** in your design system
2. **Paste Full MJML Template**: Paste a complete, working MJML email template
3. **Name the Layout**: Give it a descriptive name (e.g., "Newsletter Template", "Product Announcement")
4. **Add Description**: Optional notes about when to use this layout
5. Click **Save**
Layouts appear as starting point options when team members create new emails from your design system.
## Setting Base Styles
Base styles are global styling rules that automatically apply to all emails using your design system. They're defined as `mj-head` attributes in MJML and control:
* **Fonts**: Default typeface, sizes, and weights
* **Colors**: Primary brand colors, text colors, backgrounds
* **Spacing**: Default padding, margins, and gaps
* **Line Heights**: Default text spacing
### To Add Base Styles:
1. Go to the **Base Styles** section
2. Enter your styling attributes in the provided editor (these become your `mj-head` configuration)
3. Click **Save**
All templates created from this design system will inherit these styles, ensuring brand consistency without requiring designers to set styling on individual elements.
## Importing Components from MJML
Have an existing email template you'd like to break down into components? You can import a full MJML email and automatically extract sections into individual components.
### To Import Components:
1. Click **Import from MJML** in your design system
2. Paste your complete MJML email template
3. The system automatically detects major sections (`mj-section` tags) and extracts them as individual components
4. Review the extracted components and assign them to appropriate categories
5. Click **Finish Import**
This is a fast way to populate your design system with components from existing successful email campaigns.
## Tips for Success
* **Keep Components Focused**: Make each component do one thing well (e.g., a header component, not header + footer)
* **Use Descriptive Names**: Name components based on their purpose, not their appearance
* **Start with One Layout**: Begin with a single, flexible layout template and add more as you identify patterns
* **Test Base Styles**: Verify that your base styles render correctly across email clients before finalizing
* **Document Usage**: Use component descriptions to guide your team on when and how to use each piece
## What's Next?
Once your design system is set up, learn how to use it by checking out [Using a Design System](/builder/design-systems/use).
# Overview
Source: https://help.emaillove.com/builder/design-systems/overview
What design systems are, why they're valuable, and how to use them.
Welcome to the Email Design Systems documentation! This section will help you understand what design systems are, why they're valuable, and how to create and use them in your email templates.
## What is a Design System?
A design system is a reusable library of branded email components, layouts, and base styles that ensures consistency across all your email templates. Instead of building each email from scratch, you can leverage pre-built, on-brand components and layouts that your entire team can use.
Think of it as your email brand's toolkit: a centralized collection of design decisions, component building blocks, and templates that all work together seamlessly.
## Why Use a Design System?
Design systems offer several key benefits:
* **Brand Consistency**: Every email reflects your brand identity through shared colors, typography, and spacing
* **Faster Template Creation**: Build emails quickly by combining existing components instead of coding from scratch
* **Team Alignment**: Your entire team works with the same approved components and patterns
* **Easier Maintenance**: Update brand guidelines in one place, and changes apply across all templates using that design system
## Key Parts of a Design System
### Components
Reusable MJML sections organized by category. Components are the building blocks you'll drag onto your email canvas. Examples include headers, content blocks, buttons, and footers.
### Layouts
Full email templates that serve as starting points for new emails. Layouts provide a pre-structured, ready-to-customize foundation instead of starting with a blank canvas.
### Base Styles
Global typography, colors, spacing, and other styling applied automatically to all templates using this design system. Base styles ensure visual consistency without needing to set styling on individual elements.
### Body Width
The default width setting for emails created from your design system (typically 600px for email standards compliance).
## Permissions
Only workspace owners can create and edit design systems. However, once a design system is set up, team members with the appropriate permissions can create new emails using the design system.
## Next Steps
Ready to get started? Check out these guides:
* [Creating a Design System](/builder/design-systems/create) - Step-by-step instructions for building your first design system
* [Using a Design System](/builder/design-systems/use) - Learn how to leverage your design system when creating emails
# Using a Design System
Source: https://help.emaillove.com/builder/design-systems/use
Create and edit emails using your design system's components, layouts, and base styles.
This guide explains how to create and edit emails using a design system, and how to make the most of your design system's components, layouts, and base styles.
## Creating an Email from a Design System
1. Click **Create New Email** in Email Love Builder
2. You'll be presented with two options:
* **Start from Scratch**: Create a blank email
* **Start from Design System**: Select this option to use one of your design systems
1. Select **Start from Design System**
2. Choose the design system you want to use from the dropdown
3. Select whether you want to:
* **Start with a Layout**: Begin with a pre-structured template (recommended for most users)
* **Start with Components**: Begin with a blank canvas and build from individual components
Once you've selected your design system and starting point, you're ready to begin editing your email.
## The Design System Components Panel
When editing an email created from a design system, the left panel displays all components from that design system organized by category.
### Component Organization
Components are grouped by category for easy discovery:
* **Header** - Top sections and navigation
* **Content** - Body text and imagery
* **CTA** - Buttons and call-to-action sections
* **Footer** - Legal, social, and unsubscribe content
* **Container** - Structural elements
* **Styles** - Decorative elements
Click a category to expand and view all components in that category.
## Adding Components to Your Email
### Drag and Drop
1. Click and hold a component from the left panel
2. Drag it onto your email canvas to the position you want
3. Release to place the component
### Replace Existing Sections
1. Hover over any section on your canvas
2. Click the component icon that appears
3. Select a new component from the dropdown to swap it in
This allows you to quickly try different variations without deleting and re-adding content.
## Base Styles
Base styles from your design system are automatically applied to your email. You don't need to do anything special to activate them.
### What Base Styles Control
* **Typography**: Default fonts, sizes, and weights
* **Colors**: Text colors, backgrounds, and accent colors
* **Spacing**: Padding, margins, and gaps between elements
* **Line Heights**: Default text line spacing
### Overriding Base Styles
While base styles provide consistency, you can override them on individual elements when needed:
1. Select an element on your canvas
2. Modify its styling in the properties panel
3. Your custom styling takes precedence over base styles
Use overrides sparingly to maintain brand consistency.
## Using Layouts
Layouts are complete email templates that serve as starting points.
### Applying a Layout
1. When creating a new email, choose **Start with a Layout**
2. Select the layout from the available options
3. Your email canvas populates with the complete template
### Customizing a Layout
Layouts are fully customizable. After applying a layout:
1. Edit any text, images, or content
2. Swap components by hovering over sections
3. Add or remove sections as needed
4. Adjust colors and spacing for your specific campaign
Layouts provide a foundation, but you have complete flexibility to customize them for each email.
## Section Locking
If you're a workspace owner, you can lock specific sections to control how editors use templates.
### Why Lock Sections?
Locking sections allows you to create structured templates where:
* Certain branding elements (headers, footers) remain unchanged
* Editors can only customize designated content areas
* Compliance and legal sections are protected from accidental modifications
### Locking a Section
1. Select a section on your canvas
2. Click the lock icon in the section toolbar
3. Choose your lock level:
* **Locked**: Editors cannot modify this section at all
* **Content Only**: Editors can change content but not styling
* **Unlocked**: Editors have full modification access
Locked sections appear with a lock icon badge on the canvas.
## Switching Design Systems
If you need to change which design system a template uses:
1. Click **Template Settings** in the top menu
2. Go to the **Design System** section
3. Select a different design system from the dropdown
4. Click **Apply**
Your email will update to use components and base styles from the new design system. Note that existing customizations may be affected if the new design system has different base styles.
## Removing a Design System
To remove the design system from a template and work with standalone components:
1. Click **Template Settings**
2. Go to the **Design System** section
3. Click **Remove Design System**
4. Confirm your action
Your email will retain its current structure and content, but will no longer be connected to the design system. You'll lose access to automatic base style updates if the design system is updated in the future.
## Tips for Success
* **Start with Layouts**: Using a layout as your foundation is faster than building component-by-component
* **Use Consistent Components**: Stick to your design system's components to maintain brand consistency
* **Leverage Base Styles**: Trust the global styling to handle brand guidelines; focus on content
* **Preview Across Clients**: Always preview your email in multiple email clients before sending
* **Document Custom Changes**: If you override base styles, document why to help your team understand your choices
## Need Help?
* Review component descriptions in the left panel for guidance on component usage
* Check the design system overview for details on available components and layouts
* Ask your workspace owner about design system updates or new components
Happy designing!
# Overview
Source: https://help.emaillove.com/builder/editor/overview
Understand the core features, views, and layout of the editor.
Welcome to the Email Love Builder email editor! This guide will help you understand the core features and layout of the editor, so you can create beautiful, responsive email templates with ease.
## Editor Views
The Email Love Builder editor offers three distinct view modes to suit your workflow, whether you prefer visual design or hands-on coding.
### Visual Editor
The Visual Editor is a drag-and-drop MJML builder that makes it easy to design emails without writing code. You can drag components from the left panel onto the canvas, arrange them, and customize their properties in real-time. This is the default view and perfect for designers and non-technical users.
### Code View
For developers and advanced users, the Code View provides a raw MJML editor where you can write and edit email markup directly. All changes sync instantly with the visual editor, so switching between views is seamless.
### Preview
The Preview mode lets you see how your email will look to recipients. You can toggle between desktop and mobile responsive views, and test both light and dark mode rendering to ensure your template looks great everywhere.
## Editor Layout
The Email Love Builder editor is organized into three main sections:
**Left Panel (Element Palette)** Contains all available elements and components for building your template. When using a design system, this shows EDS Components organized by category (header, content, CTA, footer, container, styles) plus pre-built Layouts. When starting from scratch, you'll see Layouts and Basic elements to get you started.
**Center (Canvas)** Your main design workspace. Drag elements from the left panel here to build your email. Click any element on the canvas to select it and edit its properties.
**Right Panel (Element Properties)** When you select an element, this panel shows all available customization options. You can edit text content, colors, padding, fonts, images, links, and more without touching code.
## Top Toolbar
The toolbar at the top of the editor provides quick access to essential functions:
* **Save**: Manually save your template (though autosave handles this automatically)
* **Undo/Redo**: Step back or forward through your changes
* **Preview Toggle**: Switch to preview mode to see your email rendered
* **Desktop/Mobile Toggle**: View responsive breakpoints in preview mode
* **Export**: Download your template, send test emails, or export to connected platforms
* **View Mode Switcher**: Toggle between Visual Editor, Code View, and Preview
## Autosave
Your templates are automatically saved every 30 seconds and immediately after you make changes. A visual indicator near the save button shows the autosave status, so you always know your work is secure. No more worrying about losing changes!
## What's Next?
Ready to dive deeper? Check out these guides to master specific features:
* **[Visual Editor Guide](/builder/editor/visual-editor)**: Learn how to drag, drop, and customize elements
* **[Previewing and Exporting](/builder/editor/preview-export)**: Test your templates and export them to your email platform
# Previewing and Exporting
Source: https://help.emaillove.com/builder/editor/preview-export
Preview across devices and modes, then export to your email platform.
Once you've designed your email template in Email Love Builder, it's time to test it and get it ready for sending. This guide covers how to preview your template across different devices and modes, and how to export it to your email platform.
## Preview Modes
The Preview feature lets you see your email exactly as recipients will see it. Access preview from the top toolbar by clicking the **Preview** button or using the view mode switcher.
### Desktop View
The default preview shows your email at desktop width (typically 600px). This is the standard email client viewing width and represents how most recipients on desktop will see your email. Your email should look polished and fully formatted at this size.
### Mobile View
Click the **Mobile** toggle to see how your email renders on phones and tablets. This view simulates a narrower screen and shows how responsive columns stack and text reflows. Mobile preview is critical, many recipients read emails on phones, so your template must look great on small screens.
Compare desktop and mobile side-by-side by resizing your browser window to get both views on screen at once.
### Light Mode
The default preview shows your email in light mode, the standard view with dark text on a light background. This is how most email clients display emails by default.
### Dark Mode
Click the **Dark Mode** toggle to see how your email renders when recipients enable dark mode in their email client. Many email clients (Gmail, Apple Mail, Outlook) now support dark mode, and your template should be readable and attractive in both modes.
With dark mode preview, you can:
* Check text contrast and readability
* Verify that white or light-colored elements aren't invisible
* Ensure images have appropriate contrast
* Test that your design intent shines through in dark environments
Email dark mode support varies by email client. Always test in the clients your audience uses most.
## Export Options
Ready to use your template? The **Export** button in the top toolbar opens a menu with several options. Choose the one that fits your workflow.
### Download MJML
Exports your template as a source MJML file. This is perfect if you want to:
* Store the raw markup in version control
* Make fine-tuned edits to the code
* Use the MJML in other tools or platforms
* Share the source file with developers
The MJML file includes all your design settings and can be reopened in Email Love Builder anytime to continue editing.
### Download HTML
Exports your template as compiled HTML, the final, rendered code ready to send through any email platform. This is the most versatile option because:
* It works with any email service provider (ESP)
* No additional processing or compilation is needed
* You can copy-paste it into any email platform
* It's smaller than MJML (no framework needed)
Use this option if you're sending through a platform that doesn't have native Email Love Builder integration.
### Copy HTML to Clipboard
A quick shortcut that copies the compiled HTML directly to your clipboard. Perfect for:
* Pasting into email platforms without downloading a file
* Quick iteration and testing
* Reducing file clutter on your computer
Simply click, copy, and paste into your email platform of choice.
### Export to Email Platforms
If your workspace has integrations set up, you can export directly to popular email service providers. Available integrations include:
**Braze** Sync your template directly into Braze's email builder. Your template appears as a new email template in your Braze workspace, ready to use in campaigns immediately.
**Iterable** Export to Iterable and your template is available in their template library. Perfect for campaigns and triggered emails.
**Marketo** Send your template directly to Marketo's template gallery. Your design is instantly ready for email programs.
**Setting Up Integrations** Before using platform integrations, configure them in **Settings > Integrations**. You'll authenticate your account and authorize Email Love Builder to write templates. Once connected, the export menu displays your available platforms. See the [Integrations guide](/builder/integrations/overview) for setup details.
### Send Test Email
Want to preview your email in a real inbox before sending to your audience? Use the **Send Test Email** option to:
* Email your template to any address
* See how it renders in actual email clients (Gmail, Outlook, Apple Mail, etc.)
* Test links, buttons, and interactive elements
* Share with teammates for feedback
To send a test email:
1. Click **Export** in the toolbar
2. Select **Send Test Email**
3. Enter one or more email addresses (comma-separated for multiple)
4. Click **Send**
5. Check your inbox in seconds
Test emails are sent from Email Love Builder's system and appear as previews, they're not logged as campaign sends and won't affect your email metrics.
## Export Flow
Here's how to export your template step-by-step:
Click **Export** in the top toolbar.
* Download MJML
* Download HTML
* Copy HTML to Clipboard
* Export to Platform (Braze, Iterable, Marketo)
* Send Test Email
* For downloads: Your file starts downloading automatically
* For clipboard: HTML is copied instantly
* For platform export: Confirm your destination and click Send
* For test email: Enter email address(es) and confirm
* You'll see a success message confirming the export
* For platform exports and test emails, check your email or platform dashboard shortly after
* For downloads, find the file in your Downloads folder
## Export Tips
* **Test before sending**: Always send a test email and preview in real email clients before launching campaigns
* **Check responsive design**: Export and view in mobile to confirm everything looks right
* **Use the right format**: Download HTML for maximum compatibility; download MJML if you need the source code
* **Verify integrations**: Make sure your platform integrations are working by testing with a small template first
* **Keep backups**: Download a copy of your MJML or HTML for your records
You're all set! Your template is tested, polished, and ready to reach your audience. Happy emailing!
# Visual Editor
Source: https://help.emaillove.com/builder/editor/visual-editor
Build professional email templates with the drag-and-drop visual editor.
The Visual Editor is the heart of Email Love Builder, a powerful drag-and-drop interface that lets you build professional email templates without writing code. This guide covers everything you need to know to create, customize, and organize your email designs.
## Left Panel: Element Palette
The left panel displays all the building blocks available for your template. What you see depends on your setup.
### Using a Design System
When your workspace is connected to a design system (EDS, Email Design System), the left panel shows:
**EDS Components** Pre-built, consistent components organized by category:
* **Header**: Logo, navigation, and header elements
* **Content**: Text blocks, images, callout boxes, and more
* **CTA**: Call-to-action buttons in various styles
* **Footer**: Footer links, contact info, and legal text
* **Container**: Structural elements for layout and spacing
* **Styles**: Text styles, color swatches, and typography presets
**Layouts** Pre-designed template structures you can use as a starting point (single column, two-column, three-column, etc.).
Using a design system ensures consistency across all your templates and speeds up the design process significantly.
### Starting from Scratch
If you're building a template without a design system, the left panel shows:
**Layouts** Basic template structures to jumpstart your design.
**Basic Elements** Fundamental building blocks like text, images, buttons, dividers, spacers, and containers. These give you complete control to build custom designs from the ground up.
## Dragging Elements onto the Canvas
Adding elements to your template is simple:
1. Click on an element in the left panel
2. Drag it onto the canvas (the center white area)
3. Drop it where you want it to appear
4. The element is automatically added to your template
As you drag, you'll see a preview of where the element will land. Drop zones are highlighted to help you place elements exactly where you want them. You can drag elements to reorder them, and dragging between sections creates new structure.
## Selecting and Customizing Elements
To edit an element, simply click it on the canvas. When selected, the element will show a blue border or highlight, and its properties will appear in the right panel.
### Nested Selection
If elements are stacked, you might need to click multiple times to select the one you want. The first click selects the container, the next click selects the nested element inside it, and so on.
### Multi-Select
You can select multiple elements at once by holding Shift or Command (Mac) / Ctrl (Windows) and clicking. This lets you move, copy, or delete multiple elements together.
## Right Panel: Element Properties
The properties panel on the right shows all customization options for the selected element. Available properties vary by element type, but typically include:
### Common Properties
**Text Content** Edit the text that appears in text blocks, buttons, and other text-based elements. You can apply basic formatting like bold and italic.
**Colors**
* **Text Color**: Change the color of text
* **Background Color**: Set the background of an element
* **Border Color**: Add and customize element borders
* **Button Color**: For CTAs, set the button background and text color
When a design system is active, you'll see predefined color swatches that maintain brand consistency.
**Spacing**
* **Padding**: Add space inside the element (between content and edge)
* **Margin**: Add space outside the element (between this element and others) Adjust spacing independently for top, right, bottom, and left, or set all sides at once.
**Fonts and Typography**
* **Font Family**: Choose from available fonts
* **Font Size**: Set the text size
* **Font Weight**: Make text bold or light
* **Line Height**: Control vertical spacing between text lines
* **Text Alignment**: Left, center, right, or justify
**Images**
* **Upload/Replace**: Choose an image from your files
* **Alt Text**: Add descriptive text for accessibility
* **Image Width/Height**: Control image dimensions
* **Link**: Make an image clickable
**Links**
* **URL**: Set the destination for links and buttons
* **Open in New Tab**: Control whether links open a new window
### Advanced Properties
Some elements offer advanced options like:
* Border style and width
* Shadow effects
* Opacity/transparency
* Display conditions (show/hide based on rules)
Hover over any property label to see a tooltip with more information.
## Section Locking
Workspace owners can lock specific sections of a template to protect important content from accidental changes. This is especially useful when:
* Multiple team members are editing the same template
* You want to enforce brand guidelines on certain sections
* You want editors to focus only on customizable areas
### How to Identify Locked Sections
Locked sections display a **lock icon** next to the section name in the layers panel. Locked elements can still be viewed and previewed, but their properties cannot be edited.
### Working with Locked Sections
* **Locked elements**: Click them to view their properties, but editing options are disabled
* **Unlocked elements**: Within a locked section, any unlocked elements can still be edited
* **Contact your workspace owner**: If you need to unlock a section, ask the workspace owner to adjust permissions
Locking is a powerful feature for maintaining template integrity while giving editors the freedom they need.
## Working with Columns and Layouts
Email layouts typically use columns for horizontal organization. Email Love Builder makes working with columns intuitive.
### Adding Columns
1. Drag a **Column element** or **Container** onto the canvas
2. The container shows available column configurations (1-col, 2-col, 3-col, etc.)
3. Select your desired column layout
4. Drag elements into each column to build your design
### Resizing Columns
Click the divider between columns and drag to resize. You can make columns equal width or set custom proportions.
### Nested Columns
Columns can contain other columns, letting you create complex, flexible layouts. For example, you might have a 2-column section with a 3-column subsection in one of the columns.
### Mobile Responsiveness
Email Love Builder automatically handles responsive behavior on mobile devices. Most elements stack into a single column on mobile, but you can customize this behavior:
1. Select a column or container
2. Look for responsive options in the properties panel
3. Set mobile-specific behavior (stack, hide, or adjust width)
Test your layout in **Preview mode** by toggling between desktop and mobile views to ensure it looks great on all screen sizes.
## Tips for Success
* **Use templates**: Start with a layout template to save time and maintain structure
* **Group related elements**: Use containers to keep related content organized
* **Test responsive views**: Always preview on mobile to catch layout issues
* **Leverage design systems**: If available, use EDS components for consistency and speed
* **Save frequently**: While autosave protects you, use the Save button for peace of mind
* **Lock sections**: If working in a team, lock sections you want to protect
You're now ready to create beautiful email templates! Head over to the [Previewing and Exporting guide](/builder/editor/preview-export) to learn how to test and deliver your designs.
# Overview
Source: https://help.emaillove.com/builder/figma-plugin/overview
Sync Figma components and export full email designs with the Email Love Figma plugin.
The Email Love Figma plugin bridges your design workflow with email production. Whether you're syncing individual components or exporting complete email designs, the Figma plugin makes it seamless to move from Figma to Email Love Builder.
These pages cover using the Figma plugin with the Builder. For the full Figma plugin documentation, start with the [Figma plugin docs](/plugin/getting-started/overview).
## What the Figma Plugin Does
The Figma plugin 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 Figma 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
The Figma plugin 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, the Figma plugin:
* 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 Figma 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 Figma plugin
* An API key from Email Love Builder (see the setup guide below)
### Quick Start
1. **Generate an API key** in Email Love Builder (Settings > API Keys)
2. **Install the Figma plugin** from the [Figma Community](/plugin/getting-started/install)
3. **Open the Figma plugin** in Figma and paste your API key in Settings
4. **Select your workspace and design system**
5. **Start syncing components or exporting templates**
For detailed setup instructions, see [Setting Up the Figma Plugin](/builder/figma-plugin/setup).
## Component Sync Workflow
Here's the typical flow for syncing components from Figma to Email Love Builder:
1. Create or modify component frames in Figma
2. Open the Email Love Figma plugin
3. Select the component frames you want to sync
4. Click **Sync to Email Love Builder**
5. The Figma plugin displays sync status and any conflicts
6. Review synced components in your Email Love Builder design system
7. Use them in templates or continue iterating in Figma
## Email Export Workflow
To export a complete email design as a template:
1. Finish designing your email in Figma
2. Select the entire design frame
3. Open the Email Love Figma plugin
4. Click **Export as Template**
5. Choose a destination project folder in Email Love Builder
6. 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, the Figma plugin 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 Figma plugin lets you choose where to sync components and export templates.
### Real-time Status Updates
After syncing, the Figma 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 Figma plugin will update the component based on your selection.
### The Figma plugin isn't responding
Try refreshing the Figma file and reopening the Figma plugin. If the issue persists, check your internet connection and API key settings.
## Next Steps
* [Set up the Figma plugin](/builder/figma-plugin/setup) to get started
* Learn about [managing your design system](/builder/design-systems/overview)
* Explore the [API reference](/builder/api/overview) for programmatic access
## Need Help?
If you encounter issues or have questions about the Figma plugin, contact our support team. We're always happy to help!
# Setting Up the Figma Plugin
Source: https://help.emaillove.com/builder/figma-plugin/setup
Install and configure the Email Love Figma plugin and generate your API key.
This guide walks you through installing and configuring the Email Love Figma plugin so you can start syncing components and exporting templates.
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.
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](/plugin/getting-started/install).
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.
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](/plugin/getting-started/overview) 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 the Figma plugin](/builder/figma-plugin/overview)
* Explore [managing your design system](/builder/design-systems/overview)
* Check the [API reference](/builder/api/overview) for programmatic access
## Questions?
If you need help, contact our support team. We're here to make your workflow as smooth as possible!
# Creating Your First Email
Source: https://help.emaillove.com/builder/getting-started/first-email
A step-by-step walkthrough of creating a template, from choosing a starting point to previewing.
This guide walks you through the detailed steps of creating an email template in Email Love Builder, from choosing your starting point all the way to previewing your finished design.
## Navigate to Your Project
Before you can create an email, you need to be inside a project (projects are folders that hold your email templates).
1. From your workspace dashboard, click **Projects** in the left sidebar
2. Click on the project where you want to create your email
* If you haven't created a project yet, see [Getting Started](/builder/getting-started/overview) for instructions
3. You're now inside your project. You'll see any existing templates listed, plus a **New Email** button
## Click "New Email"
To start creating a new template:
1. Click the **New Email** button (top right of your project)
2. A dialog box will appear asking you to choose your starting point
This is one of the most important decisions, so let's break it down.
## Choose Your Starting Point
**When to use this:**
* You're building a custom design with a unique layout
* Your team doesn't have a design system set up yet
* You want complete creative freedom
**What you get:**
* **Layouts**: Pre-designed structural templates including single-column, two-column, three-column, and asymmetrical layouts
* **Basic Elements**: Core building blocks like text blocks, images, buttons, dividers, spacers, and more
* A blank canvas with full flexibility
**How to proceed:**
1. Select **Start from Scratch**
2. You'll see a panel with available layouts
3. Click any layout to select it, or choose **Blank Canvas** to start with nothing
4. Proceed to naming your template (see next section)
**When to use this:**
* Your team has already built a design system with branded components
* You want to maintain brand consistency across all emails
* You want to work faster with pre-built, pre-styled components
**What you get:**
* **Pre-built Components**: Branded buttons, headers, footers, card layouts, and other components that follow your brand guidelines
* **Branded Layouts**: Email structures designed specifically for your brand
* **Base Styles**: Automatic color, font, and spacing settings that match your brand identity
* Everything styled to your brand from day one
**How to proceed:**
1. Select **Start from Design System**
2. A dropdown will appear showing available design systems
3. Click the design system you want to use
4. Choose a starting layout from that design system
5. Proceed to naming your template (see next section)
**Don't have a design system yet?** No problem! You can always build one later. Start from scratch for now, and when you're ready, check out our [Design Systems guide](/builder/design-systems/overview).
## Name Your Template
Once you've chosen your starting point:
1. A text field will appear asking for your template name
2. Enter a descriptive name (examples: "Welcome Email", "Order Confirmation", "Weekly Newsletter", "Black Friday Sale")
3. Optionally add a description if you want to help your team understand the template's purpose
4. Click **Create**
The editor will now open with your new template.
## Meet the Editor
The Email Love Builder editor is designed to be intuitive while giving you powerful customization options. Here's your orientation:
### Left Panel: Elements
This panel contains everything you can add to your email:
* **Layouts**: Pre-designed multi-column structures (if starting from scratch)
* **Basic Elements**: Text, images, buttons, dividers, spacers, lines, and more
* **Components**: If you're using a design system, branded components will appear here
* **Search**: Use the search bar to quickly find specific elements
**How to use it:**
* Simply drag any element from the left panel onto your canvas
* Elements will be placed where you drop them
* You can drag multiple copies of the same element if needed
### Center: Canvas
This is your email. Everything you see here is a live preview:
* The canvas shows your email at actual width (typically 600px for email width)
* This is the visual representation of what your recipients will see
* Click on any element to select it
* You can see how your design looks as you build it
* Use the zoom controls (bottom right) to zoom in/out if needed
### Right Panel: Properties
When you select an element, the properties panel appears on the right:
* **Design Properties**: Colors, backgrounds, borders, shadows, etc.
* **Typography**: Font family, size, weight, line height, text alignment
* **Spacing**: Padding and margin controls
* **Layout**: Width, height, alignment, positioning options
* **Advanced**: Conditional logic, dynamic content, and other advanced features
* **Context**: Element-specific settings (for example, buttons show "Link" and "Text" settings)
Properties change depending on what element is selected. A text block will show text-specific options, while an image will show image-specific options.
### Top Toolbar
The top of the editor contains essential controls:
* **Back**: Return to your project
* **Template Name**: Shows your template's name; click to rename it
* **Save**: Manually save (templates auto-save, but you can force a save)
* **Preview**: See how your email looks across devices and email clients
* **Publish**: Share or export your template (depending on your integrations)
* **More Options**: Duplicate, delete, or access advanced settings
* **Account Menu**: Workspace settings, billing, and account options
## Start Building
Now you're ready to design! Here's a basic workflow:
1. **Add elements** by dragging them from the left panel onto your canvas
2. **Arrange elements** by dragging them around the canvas, or use alignment controls in the right panel
3. **Customize appearance** by selecting an element and editing its properties on the right
4. **Use your design system components** (if applicable) to maintain brand consistency
5. **Preview frequently** to see how your email looks on different devices
## Saving Your Work
Good news: Email Love Builder saves your work automatically. You don't need to worry about losing your progress. That said:
* You can manually save at any time by clicking **Save** or pressing Ctrl+S (Windows) / Cmd+S (Mac)
* The save icon shows you when there are unsaved changes
* Your version history is automatically maintained (see your template's settings to view previous versions)
## Preview Your Email
Before you're done, it's important to preview your email on different devices:
1. Click the **Preview** button in the top toolbar
2. You'll see how your email looks on:
* **Desktop**: Full-width view (typically 600px)
* **Mobile**: Mobile-width view (typically 320px)
* **Different email clients**: Gmail, Outlook, Apple Mail, and others
3. Make adjustments in the editor if needed
4. Click **Close Preview** to return to editing
## Next Steps
Congratulations! You've created your first email template. Here's what to do next:
* **Explore Editor Features**: Read our [Editor Guide](/builder/editor/overview) to learn about responsive design and advanced customization
* **Build a Design System**: If you haven't already, set up a [Design System](/builder/design-systems/overview) to save time and maintain consistency
* **Connect an Email Platform**: Check out [Integrations](/builder/integrations/overview) to export templates to Braze, Iterable, or Marketo
* **Invite Your Team**: Use [Team Management](/builder/team/overview) to collaborate with colleagues
* **Import from Figma**: If you have designs in Figma, use the [Figma plugin](/builder/figma-plugin/overview) to bring them into Email Love Builder
You're all set. Happy building!
# Email Love Builder Overview
Source: https://help.emaillove.com/builder/getting-started/overview
Email Love Builder is a web-based email builder for creating on-brand emails in your browser. Set up your account and create your first template in minutes.
Email Love Builder is a web-based email builder for creating on-brand marketing emails in your browser, no Figma required. Teams build from shared design systems and pre-built components, collaborate in workspaces, and export production-ready HTML or sync templates straight to their ESP. It pairs with the [Email Love Figma plugin](/builder/figma-plugin/overview): designs created in Figma can sync in for browser-based editing.
This guide walks you through setting up your account and creating your first email template. You'll be designing emails in minutes.
Email Love Builder is currently in beta and available by invitation. To get started:
1. Head to [emaillove.com](http://emaillove.com) and click **Join the Waitlist**
2. Enter your email address
3. We'll be in touch once your spot is ready
When you first sign up, a **workspace** is created for you automatically. Think of a workspace as your own organizational hub:
* Each workspace has its own projects, design systems, and team members
* You can invite collaborators and manage permissions at the workspace level
* Workspaces keep different clients, brands, or departments completely separate
* You can create additional workspaces if you need to manage multiple teams or brands
For most users, one workspace is plenty. If you're managing multiple brands or teams, you can create additional workspaces anytime from your account settings.
A **project** is a folder that holds your email templates. It's useful for organizing templates by campaign, client, or purpose.
To create a project:
1. From your workspace, click the **Projects** tab in the left sidebar
2. Click **New Project**
3. Give your project a name (e.g., "Winter Campaign" or "Client: Acme Corp")
4. Optionally add a description to help your team understand its purpose
5. Click **Create**
You're now ready to create your first email template.
Now for the fun part: building your first email. You have two ways to start:
Perfect for custom designs or when you don't have a design system yet.
* You'll get access to **Layouts** (pre-made structural templates like single-column, two-column, etc.)
* You'll get access to **Basic Elements** (buttons, text, images, dividers, spacers, and more)
* You have complete freedom to design however you want
Ideal if your team has already set up a design system with branded components.
* You'll get **Pre-built Components** that follow your brand guidelines (branded buttons, headers, footers, etc.)
* You'll get **Branded Layouts** tailored to your brand
* You'll get consistent **Base Styles** (colors, fonts, spacing) applied automatically
* Templates built this way ensure consistency across all your emails
If you haven't set up a design system yet, don't worry: you can do that later.
### Creating Your Template
1. Inside your project, click **New Email**
2. Choose your starting point:
* **Start from Scratch**: select a layout (or start with a blank canvas)
* **Start from Design System**: select your design system
3. Give your template a name (e.g., "Welcome Email" or "Holiday Sale")
4. Click **Create**
Your editor will open automatically.
The editor is where the magic happens. Here's a quick orientation:
**Left Panel: Elements**
* Contains all available elements you can add to your email (text, images, buttons, components from your design system, etc.)
* Simply drag elements onto the canvas to add them
**Center: Canvas**
* This is your email. What you see here is a live preview of how your email will look
* Click on any element to select it and edit its properties
**Right Panel: Properties**
* Customize the selected element's appearance and settings
* Change colors, fonts, spacing, alignment, and more
* Shows you the settings available for whatever you've selected
**Top Toolbar**
* Save, preview, and publish controls
* Undo/redo and other quick actions
* Workspace switcher and account settings
As you design, your template is saved automatically. To ensure everything looks great:
1. Click **Preview** in the top toolbar to see how your email looks in different email clients and devices
2. Check mobile and desktop previews
3. When you're happy with your design, click **Save** (or use Ctrl+S / Cmd+S)
## What's Next?
Congratulations on creating your first email! Here are some natural next steps:
* **Explore the Editor**: Read our [Editor Guide](/builder/editor/overview) to master advanced features
* **Set Up a Design System**: Learn how to build [Design Systems](/builder/design-systems/overview) to keep your templates brand-consistent and save time
* **Connect an ESP**: Head to [Integrations](/builder/integrations/overview) to export your templates to Braze, Iterable, or Marketo
* **Invite Your Team**: Use [Team Management](/builder/team/overview) to collaborate with designers, marketers, and developers
Happy building! If you have any questions, our support team is ready to help.
# Braze
Source: https://help.emaillove.com/builder/integrations/braze
Connect your Braze account and export templates directly to Braze.
This guide will walk you through connecting your Braze account to Email Love Builder, enabling you to export email templates directly to Braze.
## Prerequisites
Before connecting, you'll need:
* A Braze account with administrator access
* Your Braze REST API Key (with email template permissions)
* Your Braze instance identifier (e.g., US-01, US-02, EU-01)
## Connecting Braze
Your Braze instance identifier is shown in the Braze dashboard URL or in your account settings. Common instances include:
* US-01, US-02, US-03, US-04 (United States)
* EU-01 (Europe)
* AP-01 (Asia Pacific)
1. Log in to your Braze dashboard
2. Navigate to **Settings > API Keys**
3. Create a new API Key or use an existing one
4. Ensure the key has permissions for **Email Template** management
5. Copy the API Key value
1. In Email Love Builder, go to **Settings > Integrations**
2. Find **Braze** and click **Connect**
3. Select your Braze instance from the dropdown
4. Paste your Braze REST API Key in the provided field
5. Click **Save**
Email Love Builder will validate your credentials. Once validation is complete, your Braze integration is active.
## Exporting Templates to Braze
Once connected, exporting a template to Braze is simple:
1. Open a template in the Email Love Builder editor
2. Click the **Export** button in the toolbar
3. Select **Export to Braze**
4. Your template is created as a new email template in your Braze account
5. You can now use this template in your Braze campaigns
## Template Details
When you export a template to Braze:
* The template name matches the template name in Email Love Builder
* The template includes all HTML, styling, and content from your Email Love Builder template
* The template is created in an unpublished state, allowing you to review it before use
* Any images or assets are embedded or linked based on Email Love Builder's export settings
## Disconnecting Braze
To remove the Braze integration:
1. Go to **Settings > Integrations**
2. Find **Braze** in the list
3. Click **Disconnect**
Your Braze account and any previously exported templates remain unchanged. You can reconnect at any time.
## Troubleshooting
### "Invalid API Key" Error
* Verify that your REST API Key is correct
* Confirm that the key has email template permissions enabled
* Check that the key hasn't expired in your Braze dashboard
### "Instance Not Found" Error
* Double-check that your Braze instance identifier is correct
* Ensure your instance matches your Braze dashboard location
### Export Fails
* Verify that your Braze integration is still active in Settings > Integrations
* Check that your API Key still has the necessary permissions
* Try disconnecting and reconnecting your Braze account
## Need Help?
For additional support:
* Consult [Braze's API documentation](https://www.braze.com/docs)
* Contact Braze support for account-specific issues
* Reach out to the Email Love Builder team for integration questions
# Iterable
Source: https://help.emaillove.com/builder/integrations/iterable
Connect your Iterable account and export templates directly to Iterable.
This guide will walk you through connecting your Iterable account to Email Love Builder, enabling you to export email templates directly to Iterable.
## Prerequisites
Before connecting, you'll need:
* An Iterable account with administrator access
* Your Iterable Server-side API Key (with email template permissions)
* Your Iterable data center location
## Connecting Iterable
Iterable operates in multiple data centers. Your data center is typically indicated in your Iterable dashboard URL or account settings. Common options include:
* US (United States)
* EU (Europe)
If you're unsure, check your Iterable account settings or contact Iterable support.
1. Log in to your Iterable dashboard
2. Navigate to **Settings > API Keys**
3. Create a new Server-side API Key or use an existing one
4. Ensure the key has permissions for **Email Template** management
5. Copy the API Key value
Use a Server-side API Key, not a Mobile API Key. Only Server-side keys have the necessary permissions for template management.
1. In Email Love Builder, go to **Settings > Integrations**
2. Find **Iterable** and click **Connect**
3. Select your Iterable data center from the dropdown
4. Paste your Iterable Server-side API Key in the provided field
5. Click **Save**
Email Love Builder will validate your credentials. Once validation is complete, your Iterable integration is active.
## Exporting Templates to Iterable
Once connected, exporting a template to Iterable is simple:
1. Open a template in the Email Love Builder editor
2. Click the **Export** button in the toolbar
3. Select **Export to Iterable**
4. Your template is created as a new email template in your Iterable account
5. You can now use this template in your Iterable campaigns
## Template Details
When you export a template to Iterable:
* The template name matches the template name in Email Love Builder
* The template includes all HTML, styling, and content from your Email Love Builder template
* The template is created in a draft state, allowing you to review it before use
* Any images or assets are included based on Email Love Builder's export settings
## Disconnecting Iterable
To remove the Iterable integration:
1. Go to **Settings > Integrations**
2. Find **Iterable** in the list
3. Click **Disconnect**
Your Iterable account and any previously exported templates remain unchanged. You can reconnect at any time.
## Troubleshooting
### "Invalid API Key" Error
* Verify that you're using a Server-side API Key, not a Mobile API Key
* Confirm that the key has email template permissions enabled
* Check that the API key is active and hasn't been revoked in Iterable
### "Data Center Not Found" Error
* Double-check that your selected data center matches your Iterable account's actual location
* If you're unsure, check your Iterable dashboard settings
### Export Fails
* Verify that your Iterable integration is still active in Settings > Integrations
* Check that your API Key still has the necessary permissions
* Try disconnecting and reconnecting your Iterable account
* Ensure your Iterable account has space for new templates
## Need Help?
For additional support:
* Consult [Iterable's API documentation](https://support.iterable.com/hc/en-us/articles/200722416-API-Keys)
* Contact Iterable support for account-specific issues
* Reach out to the Email Love Builder team for integration questions
# Marketo
Source: https://help.emaillove.com/builder/integrations/marketo
Connect your Adobe Marketo Engage account and export templates directly to Marketo.
This guide will walk you through connecting your Adobe Marketo Engage account to Email Love Builder, enabling you to export email templates directly to Marketo.
## Prerequisites
Before connecting, you'll need:
* A Marketo (Adobe Marketo Engage) account with administrator access
* Your Marketo Munchkin ID
* Your Marketo API Client ID and Client Secret (from a LaunchPoint API service)
## Connecting Marketo
1. Log in to your Marketo dashboard
2. Navigate to **Admin > Integration > Munchkin**
3. Locate your Munchkin ID in the format: `XXX-XXX-XXX`
4. Copy this value
1. In Marketo, go to **Admin > Integration > LaunchPoint**
2. Find an existing API service with email template permissions, or create a new one
3. Click the service to view its details
4. Retrieve or generate the **Client ID** and **Client Secret**
5. Copy both values
The API service must have permissions to create and manage email templates. If creating a new service, ensure it's assigned a role with these permissions.
1. In Email Love Builder, go to **Settings > Integrations**
2. Find **Marketo (Adobe Marketo Engage)** and click **Connect**
3. Enter your Marketo Munchkin ID
4. Enter your Client ID and Client Secret
5. Click **Validate**
Email Love Builder will validate your credentials against your Marketo account.
After validation, you'll be prompted to select a default folder in Marketo where exported templates will be stored. This folder is where new email templates from Email Love Builder will be created.
1. Select your preferred folder from the dropdown
2. Click **Save**
Your Marketo integration is now active.
## Exporting Templates to Marketo
Once connected, exporting a template to Marketo is simple:
1. Open a template in the Email Love Builder editor
2. Click the **Export** button in the toolbar
3. Select **Export to Marketo**
4. Your template is created as a new email template in Marketo
5. The template appears in your selected default folder
6. You can now use this template in your Marketo campaigns
## Handling Duplicate Template Names
If a template with the same name already exists in Marketo, Email Love Builder automatically appends a timestamp to the template name to ensure uniqueness. For example:
* Template name: `Welcome Email`
* If duplicate exists, Email Love Builder creates: `Welcome Email - 2024-01-15-143022`
This prevents accidental overwrites and allows you to manage multiple versions of templates as needed.
## Template Details
When you export a template to Marketo:
* The template name matches the template name in Email Love Builder (with timestamp appended if a duplicate exists)
* The template includes all HTML, styling, and content from your Email Love Builder template
* The template is created in the default folder you selected during setup
* The template is created as a draft, allowing you to review it before use
* Images and assets are included based on Email Love Builder's export settings
## Disconnecting Marketo
To remove the Marketo integration:
1. Go to **Settings > Integrations**
2. Find **Marketo (Adobe Marketo Engage)** in the list
3. Click **Disconnect**
Your Marketo account and any previously exported templates remain unchanged. You can reconnect at any time.
## Troubleshooting
### "Invalid Munchkin ID" Error
* Verify that your Munchkin ID is correct and in the format `XXX-XXX-XXX`
* Confirm that it matches the ID shown in **Admin > Integration > Munchkin**
### "Invalid Client ID or Client Secret" Error
* Double-check that both values are copied correctly from your LaunchPoint service
* Verify that the API service is active and has not been revoked
* Ensure the API service has email template permissions
### "Validation Failed" Error
* Verify all credentials are correct
* Confirm that your Marketo account is active and accessible
* Check that the API service has sufficient permissions
* Try disconnecting and reconnecting your Marketo account
### Export Fails
* Verify that your Marketo integration is still active in Settings > Integrations
* Check that your credentials still have the necessary permissions
* Ensure your Marketo account has space to create new templates
* Try selecting a different default folder during reconnection
## Need Help?
For additional support:
* Consult [Adobe Marketo's API documentation](https://developers.marketo.com/)
* Review [Marketo's LaunchPoint setup guide](https://docs.marketo.com/display/public/DOCS/LaunchPoint)
* Contact Adobe Marketo support for account-specific issues
* Reach out to the Email Love Builder team for integration questions
# Overview
Source: https://help.emaillove.com/builder/integrations/overview
Export your email templates directly to leading ESPs (Braze, Iterable, Marketo).
Email Love Builder integrates seamlessly with leading Email Service Providers (ESPs), allowing you to export your email templates directly to your sending platform with just one click.
## Supported Integrations
Email Love Builder currently supports the following ESPs:
* **Braze** - Customer engagement platform
* **Iterable** - Growth marketing platform
* **Marketo (Adobe Marketo Engage)** - Marketing automation platform
## Getting Started
All ESP integrations are configured in a single, centralized location:
1. Navigate to **Settings > Integrations**
2. Find the ESP you want to connect
3. Click **Connect** and follow the setup steps (see individual setup guides below)
4. Enter your API credentials and save
## Using Your Integrations
Once you've connected an ESP, exporting templates is straightforward:
1. Open a template in the editor
2. Click the **Export** button in the toolbar
3. Select **Export to \[Your ESP]**
4. Your template is created as a new email template in your connected ESP account
## Multiple Integrations
You can connect multiple ESPs simultaneously. This is useful if you send campaigns across different platforms or want to maintain templates in multiple systems. Each integration is managed independently in Settings > Integrations.
## Setup Guides
Select your ESP to view detailed setup instructions:
* [Braze Setup Guide](/builder/integrations/braze)
* [Iterable Setup Guide](/builder/integrations/iterable)
* [Marketo Setup Guide](/builder/integrations/marketo)
## Disconnecting an Integration
To disconnect an ESP:
1. Go to **Settings > Integrations**
2. Find the ESP you want to disconnect
3. Click **Disconnect**
Disconnecting an ESP will remove the connection but will not affect templates already exported to that platform.
## Troubleshooting
If you encounter issues connecting to an ESP, verify that:
* Your API credentials are correct and active
* Your API key has the necessary permissions for email template management
* Your API credentials have not expired
* Your Email Love Builder account has sufficient permissions
For additional support, contact the Email Love Builder team or consult your ESP's documentation.
# Overview
Source: https://help.emaillove.com/builder/team/overview
Invite members, assign roles, and manage permissions in a shared workspace.
Email Love Builder makes it easy to collaborate with your team on email templates in a shared workspace. This guide covers everything you need to know about inviting members, assigning roles, and managing permissions.
Collaborative workspaces in Email Love Builder allow your entire team to work together on email templates. Each member can be assigned a specific role that determines what they can see and do within the workspace.
## Roles and Permissions
Email Love Builder uses a flexible role system to control what team members can access and modify:
### Account Owner
The Account Owner is the person who originally created the workspace. This role is permanent and cannot be changed or transferred to another user.
**Permissions:**
* Full administrative access to the workspace
* Manage all team members and their roles
* Access workspace settings, design systems, and integrations
* Create, edit, and delete templates
* Lock and unlock template sections
### Owner
Owners are trusted team members promoted by the Account Owner. They have nearly identical permissions to the Account Owner and can help manage the workspace.
**Permissions:**
* Manage team members and assign roles
* Configure workspace settings, design systems, and integrations
* Create, edit, and delete templates
* Lock and unlock template sections
* Cannot modify Account Owner role or workspace ownership
### Editor
Editors are the core content creators in your workspace. They can create new templates and make changes to existing ones.
**Permissions:**
* Create and edit email templates
* Cannot modify locked sections (protected by Owners)
* Cannot change team settings or manage members
* View all templates in the workspace
### Commenter
Commenters have view-only access with the ability to provide feedback through comments.
**Permissions:**
* View all templates in the workspace
* Leave comments on templates
* Cannot edit templates or modify any settings
* Ideal for stakeholders and approvers who need visibility without editing access
## Inviting Team Members
Getting new members into your workspace is straightforward.
**To invite a team member:**
1. Click **Settings** in the left navigation menu
2. Select the **Team** tab
3. Click the **Invite Member** button
4. Enter the team member's email address
5. Select their role from the dropdown (Account Owner, Owner, Editor, or Commenter)
6. Click **Send Invitation**
The team member will receive an invitation link via email. They can click it to join your workspace with the assigned role.
## Managing Team Members
After members join your workspace, you can update their roles or remove them as needed.
**To change a member's role:**
1. Go to **Settings** > **Team**
2. Find the member in the list
3. Click the role dropdown next to their name
4. Select the new role
5. Changes take effect immediately
**To remove a member:**
1. Go to **Settings** > **Team**
2. Find the member you want to remove
3. Click the **Remove** button next to their name
4. Confirm the removal
Once removed, the member will no longer have access to your workspace or its templates.
## Section Locking
Owners can protect specific sections of a template to prevent editors from making accidental or unwanted changes. This is useful for maintaining consistency across templates.
### Protected Sections
Section locking is commonly used to protect:
* Email headers and branded logos
* Footers with legal information or compliance text
* Navigation sections
* Pre-approved design elements
### How Section Locking Works
When an Owner locks a section in a template, Editors can still view it but cannot modify the content, styling, or structure within that section. The locked section remains visible but is not editable.
**To lock a section:**
1. Open the template in the editor
2. Select the section you want to lock
3. Click the **Lock** option in the section menu
4. Only Owners and the Account Owner can unlock the section later
**To unlock a section:**
1. Select the locked section
2. Click **Unlock** (only visible to Owners and Account Owners)
3. Editors can now modify the section again
## Best Practices
* **Use appropriate roles:** Assign the minimum required permissions to each team member
* **Leverage section locking:** Protect critical elements like legal disclaimers and brand headers
* **Regular reviews:** Periodically review your team membership and update roles as needed
* **Communicate changes:** Let your team know about new members and permission updates
## Need Help?
If you have questions about team management or need to troubleshoot role permissions, contact our support team. We're here to help!
# Canceling Your Subscription
Source: https://help.emaillove.com/plugin/account/cancel
How to cancel a Stripe subscription from the plugin's Account page, or a legacy Gumroad membership
How you cancel depends on how you signed up. New customers subscribe through Stripe from inside the plugin. Customers who purchased through Gumroad manage their membership on Gumroad.
## If You Signed Up Through the Plugin (Stripe)
Open the Email Love Figma plugin.
Click on your profile name on the top left corner of the plugin interface.
On the **Account** page, click the **Manage Subscription** button. The Stripe billing portal opens in your browser.
Click **Cancel plan** and confirm.
Your plan stays active until the end of the current billing period, then your workspace moves to the Free plan. You keep your account, your designs stay in your Figma files, and you can resubscribe at any time from the Account page.
Only the workspace owner can cancel. If you're a member of someone else's workspace, ask the owner to make the change.
## If You Purchased Through Gumroad
Open the Email Love Figma plugin.
Click on your profile name on the top left corner of the plugin interface.
On the **Account** page, click the **Manage Subscription** button. You will then be redirected to the Gumroad membership management page.
Click the **Cancel Membership** button at the bottom.
The video below shows how to cancel a Gumroad subscription.
![Gumroad membership management page showing where to click the Cancel Membership button]()
From the Gumroad membership management page, you may also:
* Change your subscription plan.
* Adjust the number of your licensed seats.
If you have any questions or need assistance, [please contact our support team.](mailto:support@emaillove.com)
# Managing Your Subscription
Source: https://help.emaillove.com/plugin/account/manage-subscription
Upgrade, change seats, or update billing: Stripe subscriptions from the plugin's Account page, Gumroad subscriptions on Gumroad
How you manage your Email Love subscription depends on how you signed up. You can subscribe through Stripe from inside the plugin, or purchase a license through Gumroad. Both paths are fully supported.
## If You Signed Up Through the Plugin (Stripe)
### Upgrading from Free to a Paid Plan
Open the Email Love plugin and click your profile name in the top left corner to open the **Account** page.
Click **Upgrade plan**.
Choose **Starter**, **Growth**, or **Professional**.
Pick **Monthly** or **Annual** billing. Professional is billed annually.
Set the number of seats you need. Starter and Growth start at 1 seat, Professional at 3 seats.
Click **Continue to checkout** and complete the payment on the secure Stripe checkout page.
Your plan activates automatically in the plugin within a few minutes. See [Email Love Subscription Plans](/plugin/account/plans) for what each plan includes.
### Changing Your Plan, Seats, or Payment Details
Open the **Account** page in the plugin.
Click **Change plan / seats** to switch plans or adjust seat count, or click **Manage Subscription** to open the Stripe billing portal.
In the Stripe portal you can update your payment method, view invoices, change your billing address, or cancel.
Only the workspace owner can manage billing. If you're a member of someone else's workspace, ask the owner to make plan changes.
### If a Payment Fails
If a renewal payment fails, Stripe retries automatically and emails you to update your payment method. If payment can't be collected, your workspace moves to the Free experience until billing is resolved. Update your card in the Stripe billing portal (**Account** page, then **Manage Subscription**) to restore your plan.
## If You Purchased Through Gumroad
Licenses are still available for purchase on our [Gumroad page](https://emaillove.gumroad.com/l/email-love-figma-plugin), and existing Gumroad subscriptions and license keys work exactly as before:
Go to your [Gumroad subscription page](https://app.gumroad.com/subscriptions) (or use the **Manage Subscription** link on the plugin's Account page).
From there you can change your plan, adjust the number of licensed seats, or update payment details.
License cost is on a per-seat basis for both Stripe and Gumroad subscriptions.
If you have any questions or need assistance, [please contact our support team.](mailto:support@emaillove.com)
# Email Love Subscription Plans
Source: https://help.emaillove.com/plugin/account/plans
The Free, Starter, Growth, Professional, and Enterprise plans, what each includes, and how to sign up from the plugin
Email Love offers five plans. New accounts sign up directly from the plugin and pay securely through Stripe. No license key is needed, and you can cancel any time.
## The Plans
1. **Free**: \$0. Includes 5 HTML exports per month, 100+ pre-built components, HTML weight optimization, 1 AI Import per month, generate 1 email from a brief, 30GB per month of image hosting, the AI Copilot, MCP access with 5 email builds per month, and access to our Discord community. Ideal if you're trying out Email Love.
2. **Starter**: $19 per user, per month, or $15.20 per user, per month billed yearly (\$182.40 per user, per year). Includes 10 HTML exports per month, 1 design system, 10 AI Imports per month, generate 10 emails from a brief, 100GB per month of image hosting, MCP access, and email and Discord support. Ideal for freelancers and SMBs.
3. **Growth**: $59 per user, per month, or $47.20 per user, per month billed yearly (\$566.40 per user, per year). Our most popular plan. Includes unlimited HTML exports, 5 shared design systems, 20 AI Imports per month, generate 20 emails from a brief, 1TB per month of image hosting, and MCP access.
4. **Professional**: \$1,788 per user, per year. Billed annually, minimum 3 users. Includes unlimited HTML exports, unlimited design systems, unlimited AI Imports per user, generate 100 emails from a brief, 2TB per month of image hosting, MCP access, and dedicated Slack support.
5. **Enterprise**: Custom pricing. Includes a custom design system with up to 100 components, QA across 90+ email clients, team training, 10 user licenses for 12 months, and a dedicated Slack channel. [Book a demo](https://calendar.notion.so/meet/matthayes/matthayes) to get started.
Paid plans are priced per user. You can choose the number of seats during checkout and change it later at any time.
## How to Sign Up
When you open the Email Love plugin in Figma for the first time, you'll see three options:
1. **Sign up for free**: Creates a free Email Love account. Your browser opens to complete the signup, and the plugin signs you in automatically once you're done. This puts you on the Free plan with 5 HTML exports per month. No credit card required.
2. **Existing user? Sign in**: Signs you into an account you've already created.
3. **Gumroad License Key**: For customers with a Gumroad license. Licenses are still available for purchase on our [Gumroad page](https://emaillove.gumroad.com/l/email-love-figma-plugin), and existing keys continue to work exactly as before.
## Upgrading to a Paid Plan
You can upgrade any time from inside the plugin:
Open the plugin and click your profile name in the top left corner to open the **Account** page.
Click **Upgrade plan**.
Choose **Starter**, **Growth**, or **Professional**, pick monthly or annual billing (Professional is annual only), and set the number of seats.
Click **Continue to checkout**. A secure Stripe checkout page opens in your browser.
Your plan activates automatically in the plugin.
Email Love payments are processed by Stripe and support all major credit cards.
## Tracking Your Usage in the Plugin
On plans with monthly limits, the plugin shows a **quota card** wherever a limit applies: on the Export screen for HTML exports, and in AI Studio for AI Imports (Import Design tab) and AI Generations (Generate from Brief tab). Each card shows:
* How many you've used this month (for example, "2/5 used") with a progress bar
* The date your quota resets (the 1st of next month)
* An **Upgrade now** link for moving to a bigger plan
The card changes as you approach the limit: on your last export it lets you know, and once you've used everything it turns red and the export button becomes an **Upgrade to export** button that takes you straight to your upgrade options. Plans with unlimited usage for a feature don't show a card for it.
## Existing Gumroad Customers
If you purchased Email Love through Gumroad, nothing changes for you. Your license key keeps working, and you continue to manage your subscription through Gumroad. See [Managing Your Subscription](/plugin/account/manage-subscription) for details.
For more information about upgrading or downgrading your subscription, see [Managing Your Subscription](/plugin/account/manage-subscription).
For help with canceling a subscription, see [Canceling your Subscription](/plugin/account/cancel).
# Get Help from Claude or Codex
Source: https://help.emaillove.com/plugin/ai/agent-help
Use the Email Love workflow to inspect a Figma file, diagnose email problems, and make careful fixes on the canvas
Claude and OpenAI Codex can do more than build a new email. They can inspect your Figma file, explain what is wrong, and help you fix it.
This is most useful when the problem lives on the canvas: broken structure, clipped text, unexpected spacing, missing components, or an email that will not export.
You need the Email Love workflow and the official remote Figma MCP. [Set up Claude or Codex first](/plugin/ai/agents-in-figma#set-up-your-agent). A write request also needs a Full Figma seat, edit access to the file, and the `use_figma` tool.
## Start with a read-only diagnosis
Let the agent inspect before it edits. Give it the Figma file link, the page and frame name, what you expected, and what happened instead.
```text theme={null}
Use the Email Love workflow and the Figma MCP to inspect this email.
Figma file: [link]
Page and frame: [name]
Problem: [what happened]
Expected: [what should have happened]
Do not change the canvas yet. Return:
1. The most likely cause
2. The evidence you found in the file
3. The smallest safe fix
4. Anything I need to verify inside the Email Love plugin
```
This separates diagnosis from repair. You can review the evidence before approving any canvas changes.
## Ask it to make the fix
Once the diagnosis looks right, continue in the same task:
```text theme={null}
Make the smallest safe fix you recommended.
Preserve the existing design system, components, variables, and page structure.
Do not detach instances or hand-build email structure. Verify the result with
a fresh screenshot and tell me exactly what changed.
```
The agent asks for approval before each Figma write. Approve the `use_figma` calls if you want the change to continue.
## Prompts for common jobs
```text theme={null}
Check whether my Claude or Codex setup can build Email Love emails in Figma.
Confirm the Email Love workflow is available and the Figma connection includes
use_figma, get_metadata, and get_screenshot. Do not change any files or canvas content.
Tell me the exact missing step if the setup is incomplete.
```
```text theme={null}
Inspect this Email Love email before export: [Figma frame link].
Do not edit it. Check the root frame, component structure, fixed-height text,
image blocks, CTA count, alt text, links I still need to verify, mobile risks,
and anything likely to flatten into an image. Return a prioritized checklist.
```
```text theme={null}
Diagnose why this Email Love email looks different in the plugin Preview.
Figma frame: [link]
Preview screenshot: [attach image]
Difference: [describe it]
Inspect the canvas without changing it. Compare structure, sizing, padding,
font fallback risk, column widths, and mobile settings. Tell me what can be
fixed in Figma and what must be checked inside the plugin.
```
```text theme={null}
Help me choose the right Email Love route for these existing emails: [describe source].
I have [number] emails and want [one converted email / reusable components / a full design system].
Compare AI Import, a manual rebuild, and the design-system migration workflow.
Recommend the smallest route that produces the result I need.
```
```text theme={null}
Turn this campaign brief into an Email Love email plan before touching Figma.
Recommend the section order, one primary CTA, copy for each section, a subject
under 45 characters, and a preheader that adds new information.
Brief: [paste brief]
```
## What the agent can inspect
With the remote Figma MCP connected, Claude or Codex can inspect:
* Pages, frames, layers, components, variables, text, fills, sizing, and auto layout
* Screenshots of the email and individual sections
* Whether the file contains a usable Email Love design system
* Visible structure problems that commonly break preview or export
With `use_figma`, it can also create or update canvas content after you approve the write.
## What you still need to show it
The agent cannot see the Email Love plugin panel or values stored only inside the plugin. Attach a screenshot or paste the exact message when the problem involves:
* An export or API error
* An account, plan, license, or quota message
* A link or mobile setting entered inside the plugin
* A mismatch visible only in Preview
* The final output inside your ESP
Never paste API keys, passwords, license keys, or other secrets into the task. Describe the error and redact sensitive values from screenshots.
## When to contact support
Contact [support@emaillove.com](mailto:support@emaillove.com) when the problem involves your account, billing, quota, a server error, or an ESP connection. Include the exact error, your Figma frame link, and a screenshot with secrets hidden.
For canvas and structure problems, a read-only agent diagnosis is usually the fastest first step.
## Related articles
* [Build Emails in Figma with Claude or Codex](/plugin/ai/agents-in-figma)
* [Troubleshooting and FAQ](/plugin/getting-started/troubleshooting)
* [Import Existing Designs with AI Import](/plugin/ai/ai-import)
* [Migrating an Existing Design System or Template](/plugin/getting-started/migrate-design-system)
* [Export Overview](/plugin/export/overview)
# Build Emails in Figma with Claude or Codex
Source: https://help.emaillove.com/plugin/ai/agents-in-figma
Connect an AI agent to Figma, give it an email brief, and build editable, export-ready Email Love emails from your components
Give Claude or OpenAI Codex a brief and a Figma file link. It builds a real Email Love email on your canvas that your team can edit, review, and export to your ESP.
**Not a screenshot. Not a mockup. A real email.**
The agent builds campaigns from your published Email Love components. If you are starting without a design system, its first job is to [build or migrate one](/plugin/getting-started/migrate-design-system) from your existing emails and designs.
## What you need
There are three pieces:
1. The **[Email Love Figma plugin](/plugin/getting-started/install)**, installed in Figma and ready to open in the file where you want to build
2. The **Email Love workflow**, installed in Claude or Codex so the agent understands export-safe email structure
3. The **[official remote Figma MCP](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/)**, which gives the agent access to your canvas
To write to the canvas, you also need a **[Full Figma seat](https://developers.figma.com/docs/figma-mcp-server/write-to-canvas/)** and edit permission for the file. The Figma connection must include `use_figma`, `get_metadata`, and `get_screenshot`. A connection without `use_figma` is read-only.
Your agent asks for approval before it writes to Figma. Approve the `use_figma` calls. Declining them stops the build, even when the connection is working.
## Set up your agent
Choose the agent you use. You only need to complete one tab.
Run these commands once:
```bash theme={null}
claude plugin marketplace add email-love/claude-skills
claude plugin install email-love@email-love
```
This installs all five workflows: the email builder, template repair, the design-system migration pair (audit and converter), and the quality-gates acceptance audit that independently verifies migration batches before approval.
For the personalization work that happens after export, the same marketplace also carries [templating skills for ten ESPs](/plugin/components/dynamic-content):
```bash theme={null}
claude plugin install emaillove-esp@email-love
```
[Figma recommends](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/) its official Claude Code plugin:
```bash theme={null}
claude plugin install figma@claude-plugins-official
```
Or connect the server manually for your user account:
```bash theme={null}
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
```
Start a new Claude Code session. Run `/mcp`, select Figma, and complete the sign-in flow. Confirm that the connection includes `use_figma` before asking it to build.
To offer the plugin automatically to everyone who works in one of your repositories, add this to the repository's `.claude/settings.json` and commit it:
```json theme={null}
{
"extraKnownMarketplaces": {
"email-love": {
"source": {
"source": "github",
"repo": "email-love/claude-skills"
}
}
},
"enabledPlugins": {
"email-love@email-love": true
}
}
```
Each teammate is prompted to install the plugin the first time they trust the folder, with no commands to run. Anyone who prefers to opt out sets `"email-love@email-love": false` in their personal `.claude/settings.local.json`.
Enable **Code execution and file creation** under **Settings → Capabilities**.
Download `emaillove-figma-builder.skill` from the [latest Email Love release](https://github.com/email-love/claude-skills/releases). Then open **Customize → Skills**, click **+ → Create skill → Upload a skill**, and upload the file. Make sure the skill is switched on.
Open **Customize → Connectors**, click **+ → Add custom connector**, and add:
```text theme={null}
https://mcp.figma.com/mcp
```
Complete the Figma sign-in flow. On Team and Enterprise plans, an organization owner must add the connector before members can connect it.
In a new conversation, click **+ → Connectors** and enable Figma. Confirm that the connection exposes `use_figma`, then share your Figma file link and brief.
If `use_figma` is missing, Claude can plan the email or prepare an AI Import handoff, but it cannot write to your Figma Design file.
In Claude, enable **Code execution and file creation** under **Settings → Capabilities**.
Download `emaillove-figma-builder.skill` from the [latest Email Love release](https://github.com/email-love/claude-skills/releases). Open **Customize → Skills**, click **+ → Create skill → Upload a skill**, and upload it. [Skills enabled in Claude are also available in Cowork](https://support.claude.com/en/articles/12512180-use-skills-in-claude).
Open **Customize → Connectors**, click **+ → Add custom connector**, and add:
```text theme={null}
https://mcp.figma.com/mcp
```
Complete the Figma sign-in flow. [Remote connectors added to your Claude account are available in Cowork too](https://support.claude.com/en/articles/11725091-when-to-use-desktop-and-web-connectors).
Open the **Cowork** tab in Claude Desktop. Start a new task, enable Figma from **+ → Connectors**, and confirm that it exposes `use_figma`. Then share your Figma file link and brief.
[Cowork uses remote connectors through Anthropic's cloud](https://support.claude.com/en/articles/11175166-get-started-with-custom-connectors-using-remote-mcp). A local Figma desktop MCP connection is not available inside Cowork.
[Open Email Love in the Codex Plugins Directory](https://chatgpt.com/plugins/plugins_6a739f43c3b48191b1281a9b2d48b409) and install it.
The plugin includes the email builder, template repair, the design-system migration pair, and a quality-gates acceptance audit, plus [templating skills for ten ESPs](/plugin/components/dynamic-content) (Salesforce Marketing Cloud AMPscript, Klaviyo, Braze, Iterable, HubSpot, and more) for the personalization work that happens after export. It also offers the Email Love connection: sign in with your Email Love account when prompted and the agent can research real campaigns and lifecycle journeys for inspiration, convert your existing designs through AI Import, and verify builds through the production exporter with desktop and mobile previews.
In the Codex app, open **Plugins**, click **+** next to Figma, then choose **Install Figma** and complete the sign-in flow.
For the Codex CLI, connect it manually instead:
```bash theme={null}
codex mcp add figma --url https://mcp.figma.com/mcp
codex mcp login figma
```
Start a new Codex task after both plugins are installed. Confirm that Figma provides `use_figma`, then share your Figma file link and brief.
To test an exact repository release instead of the reviewed public plugin:
```bash theme={null}
codex plugin marketplace add email-love/codex-agents --ref v4.11.1
codex plugin add email-love@email-love
```
Replace `v4.11.1` with `main` only when testing unreleased work.
## First, prepare your design system
Before you build a campaign email, your Figma file needs a working Email Love design system. Choose the route that matches your starting point:
If your Email Love components are already synced, the agent can inventory them and start building campaigns.
Have old Figma templates, ESP emails, or an agency library? Audit and rebuild them as a new Email Love design system before campaign work begins.
No library yet? Give the agent your best existing email or design. It builds the foundations and reusable modules first.
Building or migrating a design system sends rendered images of your source designs, plus any metadata the agent pins, to the Email Love design-converter service. Remove personal or confidential content first and review the [data-handling guidance](https://github.com/email-love/codex-agents/blob/main/SECURITY.md) before using sensitive material.
## Build your first email
Once your design system is ready and synced, copy this prompt and replace the brackets:
```text theme={null}
Using the synced Email Love design system in [Figma file link], build a
promo email.
Audience: [who will receive it]
Goal: [what you want them to do]
Offer or message: [the key facts]
CTA: [one button label and destination]
Match the voice from existing campaigns in the file. Leave missing imagery
as gray placeholders for our design team.
```
Then the workflow is simple:
It inventories the synced Email Love components and studies existing campaigns before it changes anything.
It selects your header, hero, content, CTA, and footer components based on the brief. It never detaches or redraws their internal structure.
Approve the Figma writes as they appear. A normal email takes a few minutes, and the agent reports progress by section.
Edit copy, swap imagery, and comment in Figma. Then select the finished frame and export it through the Email Love Figma plugin, the same way you export an email built by hand.
## What to expect
* **A build takes minutes, not seconds.** Most of the time is spent waiting for Figma canvas operations.
* **One primary CTA works best.** Give the agent one action for each email.
* **New imagery may stay gray.** The agent preserves image blocks so your design team can art-direct them later.
* **Links are provisional.** Verify CTA and image links in the Figma plugin before export.
* **The result stays editable.** Your team can review, comment, and make normal Figma edits.
* **Building is free.** Exports count against your Email Love plan. The Free plan includes five exports per month.
## If the build does nothing
Check these in order:
1. **Is `use_figma` available?** If not, the connection is read-only. Connect the official remote Figma MCP, not the desktop server.
2. **Do you have a Full Figma seat and edit access?** Read access is not enough for canvas writes.
3. **Did you approve the tool calls?** Declining a `use_figma` request stops the build.
4. **Did you start a new task after installation?** Skills and plugin tools load when a new Claude or Codex session starts.
5. **Is the Email Love Figma plugin current?** Older releases may not recognize agent-created email frames.
If the agent still cannot write to Figma, ask it for an email plan or use the [AI Import handoff](/plugin/ai/ai-import) instead.
## Go further
Learn how export-safe structure works, use another agent, create email roots, and prepare reusable modules.
Upload your own Email Love components so agents can reuse them in every campaign.
Audit and rebuild legacy email templates without modifying the source.
Let the agent search Email Love's library for patterns, pacing, and subject-line direction.
Use read-only diagnosis prompts for structure, preview, setup, and export problems.
## Need help?
Email [hello@emaillove.com](mailto:hello@emaillove.com) and we'll respond within a business day.
# Advanced Figma MCP Guide
Source: https://help.emaillove.com/plugin/ai/agents-in-figma-advanced
How Email Love agents preserve export structure, create root frames, and prepare reusable modules in Figma
This guide covers the mechanics behind [building emails with the Figma MCP](/plugin/ai/agents-in-figma). You do not need it for a normal campaign build.
Use it when you need to:
* Understand why an agent-built email exports correctly
* Use an agent that does not have the Email Love workflow installed
* Create a new email root when the file has no donor frame
* Save an agent-built block as a reusable design-system module
## The tools in this workflow
Each tool has a different job:
1. The **Email Love workflow for Claude or Codex** teaches the agent how to build export-safe emails. Installing it does not connect an MCP server.
2. The **official Figma MCP** lets the agent read and write your Figma canvas. Normal email builds require its `use_figma` tool.
The optional [Email Inspiration MCP](/plugin/ai/email-inspiration-mcp) is separate. It searches real marketing emails for patterns and ideas, but it does not build or export anything.
## Why these emails export
An email can look correct in Figma and still export as a flat image or lose content. Email Love structure includes plugin data that is not visible on the canvas, so an agent must not invent its own email scaffolding.
The Email Love workflow uses one of two routes:
### Route A: instance published components
When the file has a synced design system, the agent places instances of its `mj-wrapper` components. It can change text, images, properties, links, and approved mobile settings. It does not detach the instance or rearrange its internal layers.
### Route B: generate and transcribe structure
When the file has no matching component, the agent sends the customer's design to the same conversion engine as [AI Import](/plugin/ai/ai-import). It receives structured MJML and transcribes that structure into Figma nodes.
If neither route can produce a section, the agent stops and asks. It does not draw an email-shaped frame and pretend it will export.
## Use another agent
Claude and Codex should use the official Email Love workflow. If another agent has the remote Figma MCP but no Email Love workflow, give it this starter prompt:
```text theme={null}
Build emails in my Figma file using the Figma MCP.
File: [paste your Figma file link]
The file contains an Email Love design system. Start each email by
duplicating an existing Email Love email frame. Fill it with instances
of my published components and rewrite their content.
Never detach an instance. Never hand-build mj-section or mj-column
structure. If no component fits, stop and ask me instead of drawing the
section freehand.
Campaign brief:
[What emails you need, the audience, the message, and one CTA per email]
Reuse our header and footer. Match the voice in our existing campaigns.
Leave missing imagery as gray placeholders. Leave existing CTA links
unchanged for us to verify in the Email Love plugin.
```
This prompt is a fallback, not a replacement for the full workflow. It cannot carry all of the structure checks, conversion rules, and repair steps in the installed skill.
## Create an email root from scratch
Duplicating an existing Email Love email is safer because the copy carries every plugin setting. When no donor exists, an agent can create the empty root and opt it in with this public marker:
```js theme={null}
frame.setSharedPluginData('emaillove', 'nodeType', 'mainFrame')
```
It must also seed every root theme and fallback setting. Empty values are not neutral and can produce incorrect dark-mode defaults.
```js theme={null}
frame.setSharedPluginData('emaillove', 'backgroundColor', '#ffffff')
frame.setSharedPluginData('emaillove', 'contentColor', '#ffffff')
frame.setSharedPluginData('emaillove', 'textColor', '#000000')
frame.setSharedPluginData('emaillove', 'linkColor', '#000000')
frame.setSharedPluginData('emaillove', 'buttonTextColor', '#ffffff')
frame.setSharedPluginData('emaillove', 'buttonContentColor', '#000000')
frame.setSharedPluginData('emaillove', 'lightThemeBackgroundColor', '#ffffff')
frame.setSharedPluginData('emaillove', 'fallBackFontName', 'Arial')
```
The root is only an empty container. Everything inside it must come from published components or generated structure.
## Save a block for reuse
An email and a reusable module have different top nodes:
* An **email template** is a whole email with a root frame carrying the template marker.
* A **module** is one reusable `mj-wrapper` component with no template marker on it or inside it.
Ask the agent to prepare a module with a direct prompt:
```text theme={null}
Componentize the header, hero, and footer from this email as separate
mj-wrapper modules with no template marker. Name them clearly and add
properties only for content our team will change between campaigns.
```
Then upload them:
Use the dropdown in the top left.
Choose Header, Heroes, Single Column, Footer, or the closest existing category.
You can select several wrappers and upload them as one batch.
The plugin reports the success and failure count when the batch finishes.
Do not put email-level theme colors on a reusable module unless the block deliberately needs its own dark-mode treatment. See [Creating and Managing Design Systems](/plugin/components/design-systems) for the full upload and sync workflow.
## Advanced limits
* **Agents assemble better than they draw.** Published components are the strongest source of structure and brand consistency.
* **Treat generated imagery as a design-team task.** Preserve image blocks and use clear placeholders when final assets are missing.
* **Verify links before export.** Existing private link data in the Figma plugin can take precedence over values an agent writes.
* **Use a capable model for migrations.** A routine campaign is smaller than auditing and rebuilding a full design system.
* **Expect canvas round trips.** Node count predicts build time better than how visually complex an email looks.
* **Keep the Figma plugin current.** Older releases may not recognize agent-created email roots.
## Related Articles
* [Build Emails in Figma with Claude or Codex](/plugin/ai/agents-in-figma)
* [Import Existing Designs with AI Import](/plugin/ai/ai-import)
* [Creating and Managing Design Systems](/plugin/components/design-systems)
* [Migrating an Existing Design System or Template](/plugin/getting-started/migrate-design-system)
* [Element Reference: Section, Column & Wrapper](/plugin/getting-started/section-column-wrapper)
## Need help?
Email [hello@emaillove.com](mailto:hello@emaillove.com) and we'll respond within a business day.
# Import Existing Designs with AI Import
Source: https://help.emaillove.com/plugin/ai/ai-import
How to use AI Import to convert any existing email design, screenshot, or Figma component into a fully editable Email Love frame in minutes
AI Import is a feature inside AI Studio that lets you take an existing email design and convert it into a fully editable Email Love frame. You can import a screenshot of an email, a PNG image, or even an existing Figma component. AI Import will convert it into a structured, responsive email template using the MJML format that powers the plugin.
This is a huge time saver if you are getting started with the Email Love Figma plugin and don't want to spend hours rebuilding all of your components from scratch. Instead of recreating everything manually, you can import your existing designs in minutes and start customizing from there.
**Use AI Import for one email, one section, or a small batch.** If you have a full legacy library and want a reusable design system, use the [Claude or Codex migration workflow](/plugin/getting-started/migrate-design-system) instead. It audits repeated modules before converting them, so you do not rebuild the same block many times.
## Requirements
AI Import is included on **every plan**: 1 import per month on Free, 10 on Starter, 20 on Growth, and unlimited on Professional. You will find AI Import under the **AI Studio** tab in the plugin sidebar.
## How AI Import Works
The process is straightforward:
Get an image or design of the email you want to recreate into Figma. This can be a screenshot, a PNG export, or an existing Figma component.
Select that element on your Figma canvas.
Open the **AI Studio** tab in the plugin and go to the **Import Design** tab.
Click **Convert Selected Frame(s)**.
The plugin uploads an image of your selection to our AI, which converts it into the MJML format we use on the backend to create responsive, accessible email code.
After a minute or two, the generated email template appears directly on your Figma canvas as a fully editable Email Love frame.
That's it. From there, you can customize the design, save components to your design system, and export to any supported ESP.
## Converting Several Designs at Once
You can select more than one frame before you convert. The plugin works through your selection three frames at a time and puts a separate email template on your canvas for each one.
Two things to know before you start a batch:
* **Select up to 3 frames per run.** Three is how many the plugin converts in one pass, and it reads your Figma selection fresh before each pass. Once the first pass finishes, what's selected is the template it just built, not your originals, so frames past the third aren't read from the designs you picked. If you have ten designs to import, run them in rounds of three.
* **Re-select between rounds.** When a run finishes, Figma has the newly created template selected, not your originals. Click back onto your next set of source frames before you convert again.
Here is what you see while a batch runs:
* The convert button changes to **Converting...** and is disabled until the run ends.
* A progress bar and status line show the current stage: reading the design, converting your design, then building the template. With more than one frame selected, the status line also shows a running count, like `2/3 done`.
* Figma posts its own notifications as each design is read and each template is built, so you can follow along without watching the plugin panel.
* A **Cancel** button stops the run. Frames that have not started yet are skipped. A frame already handed off to the AI finishes and lands on the canvas.
* When the run ends you get a confirmation of how many templates were created, plus a warning if any frames failed.
If results don't match the frames you picked, you almost certainly selected more than three. Convert in rounds of three and re-select your source frames before each round.
## Import Options
Two toggles sit above the convert button. Both are locked while a conversion is running, so set them before you click convert.
### Recache
Conversions are cached per design. Convert the same unchanged design again and you get the same result back rather than a fresh interpretation. That is usually what you want. It is faster, and repeat imports stay consistent.
Turn **Recache** on when you want the AI to take a fresh pass and replace the stored result. Reach for it when:
* A conversion came back wrong, flat, or unusable and you want to try the same design again.
* You see the warning that the AI could not fully decompose your screenshot. That message calls the control "Force fresh result." It is this toggle.
Recache stays on while the AI Studio screen is open, so switch it back off once you have the result you want. It resets if you navigate away and come back.
### Decompose image-based design
Some designs are flat: a single exported image with no live text layers. By default AI Import keeps a rasterized section as one image, which is the right call for a photographic hero.
Turn **Decompose image-based design** on when you want the AI to pull a flat image apart into real text, buttons, and structure instead.
The plugin sets this for you when your selection is clearly a flat image, meaning a single image fill with no text layers inside it. Once you flip the toggle yourself, the plugin stops adjusting it for you while the screen stays open.
## How Imports Are Counted
Each frame you convert uses one AI import from your monthly allowance. A run of three frames uses three. The quota card at the top of the **Import Design** tab shows what you have left and updates as the run goes. For allowances by plan, see [Email Love Subscription Plans](/plugin/account/plans).
If a frame fails, or you cancel it before its template is built, that import goes back to your allowance. The rest of the batch keeps going, so one bad frame does not take down the others. At the end you'll see how many templates were created and, if anything went wrong, how many frames failed. Re-select the frames that failed and run them again.
If you have used up your monthly imports, the conversion stops with a message telling you your allowance resets next month. Nothing is deducted for the attempt. If AI Import is not part of your plan at all, the run stops right away rather than working through the rest of your selection.
## Where to Find Email Designs to Import
If you are looking for email inspiration to import, [emaillove.com](http://emaillove.com) is a great place to start. We have hundreds of thousands of emails on the site. Browse around, find a design you like, and click the **camera icon** on the left side of any email to get a full PNG image. You can drag that image directly into Figma and use it with AI Import.
## What to Expect from the Output
AI Import will get you about **90% of the way there**. The generated template is real HTML, not just an image slice. It creates proper wrappers, rows, and columns in the MJML structure. But there are a few things to keep in mind:
* **It won't be pixel perfect.** Fonts, button styles, and spacing may look slightly different from the original. That's expected.
* **Images are replaced with placeholders.** The AI does not import the original images. You will need to swap in your own.
* **Mobile stacking may need adjustments.** Content won't automatically reverse stack. You will need to apply those settings in the plugin after import.
* **Complex layouts may need some cleanup.** If something looks off, you can easily adjust it using the plugin's standard editing tools.
The point is not perfection on the first pass. The point is speed. You are getting a fully structured, editable email template in minutes instead of hours.
## Tips for Better Results
### Break Long Emails into Sections
If you are importing a very long or complex email, consider breaking it into smaller chunks. Instead of importing the entire email at once, you could slice just the hero section, import that, then do the product grid, then the footer, and so on. This tends to produce faster, more accurate results.
### Start with Clean Source Images
The cleaner and sharper your source image, the better the AI can interpret the layout. A high-resolution PNG will produce better results than a blurry screenshot.
### Use It to Bootstrap Your Design System
After importing a design, you can take each Wrapper of the generated email (the header band, the hero, the product block, the footer) and save it as a component in your design system. Every top-level block of an imported template is a Wrapper, which is exactly what Upload accepts. This is a fast way to build out a complete component library without starting from zero. Just rename each Wrapper, go into the relevant category in the plugin, and click **Upload**.
### Components Stay Connected
Once you save imported components to your design system, they stay connected. If you update a component (say, change a hero background to red), that update is reflected inside the plugin as well. This makes it easy to manage and iterate on your components in one place.
## After Import
Once AI Import finishes generating your email:
* The template is placed on your Figma canvas as a standard Email Love frame, near the center of your current view. If you converted several frames in one run, the results can land close together or on top of each other, so drag them apart before you start editing.
* Every result arrives with the same generic name, `EmailLove_clone`. Rename the frame, and any Wrappers you plan to keep, before you save components to your design system. Otherwise your library fills up with entries you can't tell apart later.
* The newest template is what Figma has selected when the run ends. That is why you re-select your source frames before converting the next batch.
* You can edit the template using all the standard Email Love tools:
* Modify text, images, buttons, and links
* Adjust component properties in the plugin
* Apply mobile-specific styles and reverse stacking
* Export to any supported ESP (Klaviyo, Braze, Iterable, OneSignal, etc.)
* Sync to the [Email Love Builder](https://emaillove.com/builder) for team editing
* You can save individual Wrappers as components in your design system for reuse across future emails.
## Troubleshooting
**Generation takes a while:** Longer, more complex emails take more time to process. A typical import takes 1 to 2 minutes, but very long emails may take longer. If you want to speed things up, break the email into smaller sections and import them one at a time.
**Output looks incomplete or disorganized:** Try importing a shorter section of the email rather than the full thing. Also make sure your source image is high quality and not cropped awkwardly.
**You get the same result every time you re-run:** Conversions are cached per design. If the source hasn't changed, turn on **Recache** before converting again to force a fresh pass.
**A flat design came back as one big image:** Turn on **Decompose image-based design** and convert again. If it still comes back flat, turn on **Recache** too so the AI isn't handed the cached result.
**Some frames in a batch didn't convert:** Failed frames give their import back to your allowance, so just re-select those frames and run them again. If more than three frames were selected, convert in rounds of three instead.
**Fonts don't match the original:** The AI does its best to match fonts, but it may not always get them right. You can easily update fonts after import using the plugin's text editing tools.
**Mobile layout needs work:** AI Import focuses on getting the desktop layout right. After import, use the plugin's mobile settings to apply stacking, adjust padding, and fine-tune the responsive behavior.
## Need Help?
If you have questions about AI Import, reach out to us at [support@emaillove.com](mailto:support@emaillove.com). We're happy to help you get set up.
## Related Articles
* [Convert or Rebuild an Existing Email Design](/plugin/quickstart/existing-design): Choose AI Import, migration, or a manual rebuild
* [Get Help from Claude or Codex](/plugin/ai/agent-help): Diagnose an import or inspect the result without changing it
* [Generate Emails with AI Studio](/plugin/ai/generate): How to generate emails from campaign briefs using file uploads
* [How to Get the Best Results from Generate from Brief](/plugin/ai/brief-best-practices): Best practices for design systems and brief writing
* [Sample Campaign Brief](/plugin/ai/sample-brief): A complete example brief you can use as a starting point
* [Creating and Managing Design Systems](/plugin/components/design-systems): How to set up and manage the design systems that power AI Studio
* [Email Love Subscription Plans](/plugin/account/plans): AI Import allowances by plan and how quota cards work
* [Saving Components](/plugin/components/save-components): Turn imported Wrappers into reusable design system components
# How to Get the Best Results from Generate from Brief
Source: https://help.emaillove.com/plugin/ai/brief-best-practices
A deep-dive guide on setting up your design system and writing effective campaign briefs to get consistent, high-quality results from AI Studio's Generate from Brief feature
Generate from Brief uses AI to read your campaign brief, match each section to a component in your saved design system, and build a complete email template in Figma, automatically. The quality of the output depends on two things: how well your design system is set up and how clearly your brief is written.
This guide walks you through both. For the basics of how AI Studio works, see [Generate Emails with AI Studio](/plugin/ai/generate).
***
## Setting Up Your Design System
Your design system is the library of components the AI draws from. A well-organized library leads to accurate, consistent results.
### Create Focused Design Systems
* **Build one design system per newsletter type or brand**, not one massive library for everything. For example, keep your weekly product newsletter system separate from your transactional email system.
* A focused library means fewer choices for the AI, which means more predictable output.
* If you run multiple newsletter formats, create a dedicated design system for each one.
### Save One Strong Component Per Category
* For each category you plan to use (Header, Hero, Single Column, Two Column, etc.), save **one well-designed component**.
* Avoid saving multiple variations of the same category. If the AI sees three different Hero components, it has to guess which one you want.
* If you need variations for different campaigns, swap components in and out of your design system between runs rather than loading them all at once.
### Name Components Descriptively
* Give each component a clear, specific name that reflects its purpose (e.g., "Summer Sale Hero Banner" or "Product Feature Two Column").
* Avoid generic names like "Block 1" or "Layout A." Descriptive names help the AI make better matches and help you stay organized.
### Supported Categories
The plugin organizes components into these categories:
* **Pre-Header**: Preview text bar above the header
* **Header**: Logo and navigation area
* **Hero**: Large banner or featured image section
* **Single Column**: Full-width text or content block
* **Two Column**: Side-by-side content layout
* **Three Column**: Three items in a row (e.g., product grid)
* **Four Column**: Four items in a row
* **Buttons**: Standalone call-to-action buttons
* **Footer**: Legal text, unsubscribe links, social icons
You only need to save components for the categories your email actually uses.
***
## Writing an Effective Campaign Brief
The brief is what tells the AI what to build. The more specific and structured it is, the better the result.
### Structure Your Brief with Clear Sections
* Organize your brief so each section maps directly to one of your saved component categories.
* Use headings or labels that match the category names: "Hero," "Single Column," "Two Column," etc.
* Present sections in the order you want them to appear in the final email, top to bottom.
### Include Specific Content
For each section, provide:
* **Headline or title text**: The exact words you want displayed, or a clear direction for them.
* **Body copy**: The supporting text for that section. Even a rough draft is better than nothing.
* **Call-to-action text**: Button labels like "Shop Now," "Learn More," or "Get 20% Off."
* **Image direction** (if applicable): What the image should convey, even if you plan to swap it later.
### Set the Overall Context
At the top of your brief, include:
* **Campaign goal**: What is this email trying to achieve? (Drive sales, announce a launch, re-engage lapsed customers, etc.)
* **Target audience**: Who is receiving this email? (New subscribers, VIP customers, general list, etc.)
* **Tone and voice**: How should it feel? (Casual, premium, urgent, playful, etc.)
* **Brand name**: The brand or sender the email is from.
### Reference the Section Types You Want
Be explicit about which sections your email needs. For example:
> "This email should include: Pre-Header, Header, Hero, Single Column for the main message, Two Column for product highlights, Single Column for the closing CTA, and Footer."
This removes ambiguity and tells the AI exactly which components to pull from your library.
***
## Matching Brief Sections to Components
The AI works by reading each section of your brief and assigning it to the best-matching component in your design system. Here is how to make that matching as accurate as possible.
* **Match sections 1:1 to saved components.** Each section in your brief should correspond to exactly one component category in your design system. If your brief has a "Hero" section, your design system should have a Hero component ready.
* **Use the standard category names in your brief.** When you label a section "Hero" or "Two Column," the AI can match it directly. Creative section names like "The Big Moment" are harder to match reliably.
* **Keep it focused.** Fewer components in your design system means fewer opportunities for mismatches. An email with 5–7 well-defined sections will generate more cleanly than one with 12 loosely defined blocks.
* **Order matters.** List your sections in the order they should appear in the final email. The AI respects the sequence of your brief.
***
## Common Issues and How to Fix Them
### "Could not build jobs" Error
**What it means:** The AI could not find a way to match your brief sections to the components in your design system.
**How to fix it:**
* Check that every section mentioned in your brief has a corresponding component category saved in your design system.
* Make sure your brief uses standard category names (Header, Hero, Single Column, etc.).
* Verify that components have actually synced. Components now sync automatically when you upload them, but if you see this error, try re-uploading the component.
### Wrong Components Being Selected
**What it means:** The AI matched a brief section to the wrong component.
**How to fix it:**
* Remove competing components. If you have multiple components in the same category, the AI may pick the wrong one.
* Rename components to be more specific so the AI has clearer signals.
* Simplify your design system to one component per category for that campaign.
### Missing Sections in the Output
**What it means:** A section from your brief did not appear in the generated email.
**How to fix it:**
* Make sure the missing section is clearly labeled with a recognized category name.
* Confirm that a matching component exists in your design system for that category.
* Check your brief for ambiguous or merged sections. Each section should be distinct and self-contained.
### Output Looks Disorganized or Inconsistent
**How to fix it:**
* Use a single, dedicated design system rather than pulling from a large mixed library.
* Keep your brief concise. Long, complex briefs with overlapping instructions can confuse the matching process.
* Review your component designs. If the source components have inconsistent spacing or sizing, the output will reflect that.
***
## Quick Checklist Before You Generate
* [ ] Design system has one component per category you need
* [ ] Components are named clearly and descriptively
* [ ] Brief sections are labeled with standard category names
* [ ] Brief includes specific content (headlines, body copy, CTAs)
* [ ] Campaign goal, audience, and tone are stated at the top
* [ ] Brief sections are listed in the intended email order
* [ ] Design system is synced and up to date in the plugin
***
## Related Articles
* [Import Existing Designs with AI Import](/plugin/ai/ai-import): Convert screenshots and existing designs into editable Email Love frames
* [Generate Emails with AI Studio](/plugin/ai/generate): How to use AI Studio to generate emails from file uploads
* [Sample Campaign Brief](/plugin/ai/sample-brief): A complete example brief you can use as a starting point
* [Creating and Managing Design Systems](/plugin/components/design-systems): How to set up and manage the design systems that power AI Studio
# Send with confidence using Copilot
Source: https://help.emaillove.com/plugin/ai/copilot
Catch and fix email structure issues before export
The Copilot feature scans your Figma designs and identifies structural issues that would cause problems when exporting to email. It catches broken MJML hierarchies, invalid nesting, accessibility gaps, and layout mismatches before they become headaches in your inbox.
Think of Copilot as your pre-flight checklist. It spots the issues that would otherwise surface as rendering bugs across email clients, saving you from the dreaded "it looked fine in Figma" moment.
### What Copilot catches
* **Structure problems**: Components nested in the wrong containers, missing required wrappers, invalid parent-child relationships
* **Layout mismatches**: Figma layouts that don't translate correctly to email structure
* **Content issues**: Invalid tag names, broken template variables, leaf components with children they shouldn't have
* **Image problems**: Missing alt text, images outside proper containers, oversized dimensions
* **Component gaps**: Empty carousels, accordions without content, heroes missing required attributes
***
## Getting Started
### Accessing Copilot
Open the Email Love Figma plugin and navigate to the Copilot tab. You'll see it on the left hand panel.
![Copilot tab shown in the left hand panel of the Email Love plugin]()
### Before you scan
Select the template frame that you want to check. Copilot scans all of the components inside of the frame. You cannot scan individual components outside of a frame.
### Running your first scan
Copilot automatically analyzes your selection and returns a list of issues organized by severity. Each issue includes the problem description, where it occurs in your design, and whether an automatic fix is available.
Copilot looks at your actual design (the rendered layout, structure, and colors of the selected frame), not just the layer names, so it catches issues that only show up in the real output.
### Jumping to an issue
Many issues include a **clickable link to the element** they refer to. Click it and Copilot selects the offending node (or nodes) directly on your Figma canvas, so you can see exactly what it's flagging without hunting through your layers.
### Fixes that touch multiple elements
Some fixes apply across **several nodes at once**. When a single issue affects multiple elements, Copilot's fix selects and resolves all of them together rather than making you repeat the fix one element at a time.
### Canceling a scan
Diagnostics run in the background and can be **canceled** at any time, useful on large or complex frames. Cancel, adjust your selection, and run again whenever you like.
***
## Understanding Issues
### How issues appear
Each issue shows up as a card with several pieces of information:
* **Issue type**: A short name describing the problem (like "missing-required-ancestors" or "image-missing-alt-text")
* **Severity**: Error, warning, or informational
* **Path**: Where in your design the issue occurs
* **Details**: What Copilot expected versus what it found
* **Fix status**: Whether Copilot can fix this automatically
### Severity levels
**Errors** will cause export failures or major rendering problems. Fix these before exporting.
**Warnings** may cause inconsistent rendering across email clients. You should address these, but your email will still export.
**Informational** issues are suggestions for improvement. Your email will work fine, but addressing these makes it better.
### Reading issue details
Most issues include "expected" and "found" information. For example, a vertical layout mismatch might show:
* **Expected**: 1 column (vertical stacking)
* **Found**: 3 columns (horizontal layout)
This tells you exactly what Copilot thinks should change.
***
## Issue Types & Fixes
### Structure Issues
### Missing required ancestors
**What it means**: A component isn't nested inside the containers MJML requires. For example, text content needs to live inside a column, which needs to live inside a section.
**How Copilot fixes it**: Wraps the component in the required containers, preserving your content and maintaining the node order.
**Example**: `mj-text` floating directly in a section gets wrapped in `mj-column`. If both column and section are missing, Copilot creates both.
**Special case**: Content inside `mj-hero` (text, buttons, images) doesn't need column wrappers. Copilot knows this and won't add unnecessary containers.
***
### Invalid parent-child relationships
**What it means**: A component is inside a parent that doesn't allow it. MJML has specific rules about what can go where.
**How Copilot fixes it**: Wraps the component in the correct container while keeping everything in the same location.
**Example**: `mj-text` directly inside `mj-section` gets wrapped in `mj-column`. The text stays in the same section, just properly contained.
***
### Invalid strict parent
**What it means**: Some components have very limited options for valid parents. This issue appears when a component is under a parent that's explicitly forbidden.
**How Copilot fixes it**: Moves the component up to the nearest allowed parent level, preserving sibling order.
**Example**: `mj-column` inside `mj-body` (skipping the required section) gets moved into the nearest `mj-section`.
***
### Nested structural components
**What it means**: Structural components like sections, wrappers, and groups are incorrectly nested inside content containers or each other.
**How Copilot fixes it**: Promotes the structural component to the correct hierarchy level, keeping all its children intact.
**Example**: An `mj-section` accidentally nested inside `mj-column` gets promoted to sit alongside that column's parent section.
***
### Container mismatch
**What it means**: Your Figma layout is set to horizontal (side-by-side), but the MJML structure doesn't use columns to achieve that layout.
**How Copilot fixes it**: Wraps non-column children in `mj-column` containers. For true side-by-side layouts, it uses `mj-group` inside `mj-section`.
***
### Vertical layout mismatch
**What it means**: Your Figma frame uses vertical (stacked) layout, but the MJML output has multiple columns creating an unintended horizontal arrangement.
**How Copilot fixes it**: Merges all columns into a single full-width column, stacking the content vertically as your Figma design intended.
**Example**: A section with vertical layout in Figma but 3 columns in MJML becomes 1 column with all content stacked in order.
***
### Content Issues
### Component has children
**What it means**: Components like images and buttons shouldn't contain other MJML elements. They're "leaf" nodes, the end of the branch.
**How Copilot fixes it**: Unwraps the children and moves them to a valid container, or replaces the leaf node with an appropriate container.
**Example**: `mj-image` somehow containing `mj-text` gets unwrapped, with the text moved to the parent column.
***
### Invalid tag name
**What it means**: Your design contains tag names that aren't part of the MJML specification, usually Figma-specific names that didn't convert properly.
**How Copilot fixes it**: Replaces invalid tags with the appropriate MJML component based on context.
**Common replacements**:
| **What you might see in your export** | **What Copilot converts it to** |
| ------------------------------------------------ | ------------------------------------------------ |
| A layer named "Text" or similar Figma text layer | `mj-text` (the MJML text component) |
| A layer that's clearly an image frame | `mj-image` (the MJML image component) |
| Generic container frames | `mj-section` or `mj-column` depending on context |
### Broken template variable
**What it means**: Template syntax like `{{ first_name }}` isn't closed properly, which will break when your ESP tries to render it.
**What Copilot does**: Surfaces the issue clearly but doesn't auto-fix. Template variables involve your business logic, and Copilot won't guess at what you intended.
**What you should do**: Check your template syntax manually and close any unclosed brackets.
***
### Image Issues
### Image outside proper container
**What it means**: An image isn't inside `mj-column` or `mj-hero`, which are the only valid containers for responsive images in MJML.
**How Copilot fixes it**: Wraps the image in `mj-column` and ensures it's nested inside a valid section or hero.
***
### Image missing alt text
**What it means**: The image doesn't have meaningful alt text, which hurts accessibility and causes problems when images don't load.
**What Copilot does**: Adds descriptive alt text only when the image intent is obvious from context. Otherwise, it flags the issue for you to address.
**Why this matters**: Many email clients block images by default. Alt text ensures your message still communicates even without visuals.
***
### Oversized image dimensions
**What it means**: Image dimensions exceed recommended email-safe limits, which can cause slow loading or display problems.
**What Copilot does**: Warns you but doesn't resize automatically. Image optimization involves quality tradeoffs that should be intentional choices.
**Recommendation**: Keep images under 600px wide for most email layouts. Compress images before uploading.
***
### Component-Specific Issues
### Hero missing background height
**What it means**: `mj-hero` components need a background-height attribute to render correctly across email clients.
**What Copilot does**: Flags the issue but doesn't auto-insert a height. Guessing dimensions often creates worse problems than leaving them blank.
**What you should do**: Add an appropriate background-height value based on your design. Common values range from 300px to 600px depending on content.
***
### Group with insufficient columns
**What it means**: `mj-group` contains fewer than two columns. Groups exist specifically to hold multiple columns side-by-side.
**What Copilot does**: Treats this as informational. It won't add artificial columns.
**When to act**: If you need side-by-side columns, add another column. If you only need one column, you probably don't need the group wrapper.
***
### Nested wrappers
**What it means**: Wrappers are nested inside other wrappers, creating unnecessary complexity.
**How Copilot fixes it**: Unwraps the inner wrapper while preserving child order.
***
## Working with Fixes
### Auto-fix vs manual review
Some issues have clear, safe fixes that Copilot applies automatically when you click **Fix**. Others require your judgment.
**Copilot auto-fixes**:
* Wrapping components in required containers
* Promoting misplaced structural components
* Merging columns for vertical layouts
* Replacing invalid tag names
* Unwrapping unnecessary nesting
**Copilot flags but won't auto-fix**:
* Template variable syntax
* Missing hero heights
* Empty interactive components
* Image dimension warnings
* Alt text (unless intent is obvious)
### Reviewing suggested fixes
Before clicking **Fix All**, review what Copilot plans to change. Each fix card shows what will happen. If something looks off, fix issues individually instead.
### Issues requiring manual intervention
When you see "No auto-fix available," Copilot needs your input. These typically involve:
* Business logic (template variables)
* Design decisions (image dimensions, hero heights)
* Content creation (alt text, accordion content)
* Ambiguous intent (when Copilot can't tell what you meant)
***
## Best Practices
### Run Copilot before every export
Make it part of your workflow. Scan → Fix → Export. It takes seconds and catches issues that would otherwise surface in QA or, worse, in your subscribers' inboxes.
### Design patterns that avoid issues
**Use Auto Layout intentionally**: Horizontal auto layout in Figma should map to multi-column MJML layouts. Vertical auto layout should map to single-column stacked content.
**Keep your hierarchy clean**: Sections contain columns. Columns contain content. Don't skip levels.
**Name your layers**: Descriptive layer names help Copilot (and you) understand intent when converting to MJML.
**Set alt text in Figma**: Add alt text to images before export rather than fixing it later.
### Setting up files for clean exports
Start with Email Love's component library. These components are pre-structured for valid MJML output.
When building custom layouts, think in email terms: sections as rows, columns as... columns, and content as what goes inside columns.
***
## Troubleshooting
### Fixes don't resolve the issue
Sometimes a fix reveals another underlying issue. Run Copilot again after applying fixes. You may have a chain of problems that need addressing in sequence.
If the same issue keeps appearing after fixing, your Figma structure might have deeper problems. Try rebuilding that section using Email Love components as a base.
### Unexpected behavior
If Copilot suggests a fix that seems wrong, don't apply it. Instead:
1. Note the issue type and path
2. Check your Figma structure manually
3. Contact support with details
### Getting help
Reach out to our team via:
* **Slack**: If you're on an Enterprise plan, use your dedicated channel
* **Email**: [support@emaillove.com](mailto:support@emaillove.com)
* **In-app**: Use the feedback button in the plugin
**When reporting issues, include:**
* The issue type Copilot flagged
* A screenshot of the affected Figma layers
* What you expected versus what happened
***
## Quick Reference
| **Issue** | **Auto-fix?** | **Action** |
| -------------------------------- | ------------- | ----------------------------- |
| **Missing required ancestors** | Yes | Wraps in required containers |
| **Invalid parent-child** | Yes | Wraps in correct container |
| **Invalid strict parent** | Yes | Promotes to valid level |
| **Nested structural components** | Yes | Promotes to correct hierarchy |
| **Container mismatch** | Yes | Wraps in columns |
| **Vertical layout mismatch** | Yes | Merges to single column |
| **Self-contained component** | Yes | Unwraps children |
| **Invalid tag name** | Yes | Replaces with valid MJML |
| **Broken template variable** | Yes | Manual syntax fix needed |
| **Image outside container** | Yes | Wraps in column |
| **Missing alt text** | Sometimes | Add descriptive text |
| **Oversized image** | No | Warning only |
| **Hero missing height** | No | Manual attribute needed |
| **Empty accordion/carousel** | No | Add content or remove |
| **Insufficient group columns** | No | Informational only |
| **Nested wrappers** | Yes | Unwraps inner wrapper |
Need help with something not covered here? Email us at [support@emaillove.com](mailto:support@emaillove.com) or reach out in [Discord](https://discord.com/invite/ANv9PjVdzP).
# Email Inspiration MCP
Source: https://help.emaillove.com/plugin/ai/email-inspiration-mcp
Search 500,000+ curated marketing emails from AI tools, free, no license required
The Email Library MCP gives any AI agent access to Email Love's curated library of 500,000+ marketing emails from real brands like Patagonia, Anthropic, REI, MeUndies, and thousands more, without needing an Email Love subscription.
Connect it once with a free Email Love sign-in, and your AI agent can search emails, browse brands, walk through lifecycle journeys, and pull brand insights. Everything is read-only. It's perfect for inspiration, competitive research, or design exploration.
**Looking to generate on-brand emails from your own design system?** See [Build with the Figma MCP](/plugin/ai/agents-in-figma), where Claude or Codex builds from the components you have already synced.
## What it does
Once connected, your AI agent can:
* **Search the curated library** by keyword, brand, or category, across 500,000+ emails captured from real brand sends.
* **Walk lifecycle journeys** to see how a brand sequences its welcome flow, post-purchase, win-back, etc.
* **Browse brands** with insights on send cadence, top-performing campaigns, and category breakdown.
* **Save & retrieve** your own collections and liked emails (synced from [emaillove.com](http://emaillove.com)).
* **Render emails inline** as visual cards, so you see the actual email previews, not just titles.
## Before you start
You just need:
* A free **Email Love account** (sign up at [emaillove.com](http://emaillove.com), no credit card needed).
* An **MCP-capable AI client**. Today the easiest options are ChatGPT (with Apps/Connectors), Claude Desktop, [claude.ai](http://claude.ai), Claude Code, Cursor (web or desktop), and Cowork. Any client supporting MCP over HTTP with OAuth will work.
## Connect your AI client
ChatGPT connects to custom MCP servers through **Apps & Connectors**, available on Plus, Pro, Business, Enterprise, and Edu plans.
1. Open **Settings → Apps & Connectors** and click **Create** (or **Add custom connector**).
2. **Name**: `Email Love Library` · **MCP Server URL**: `https://chat.emaillove.com/mcp`
3. Set **Authentication** to **OAuth**, acknowledge the custom-connector notice, and click **Connect**.
4. A browser opens to [emaillove.com](http://emaillove.com). Sign in (or create a free account), then approve the connection on the consent screen.
5. In any chat, open the apps menu (**Use apps**) and toggle **Email Love Library** on.
The carousel of email cards appears inline when you search.
1. Open Claude Desktop or [claude.ai](http://claude.ai), then go to **Settings → Connectors → Add custom connector**.
2. **Name**: `Email Love Library`
3. **URL**: `https://chat.emaillove.com/mcp`
4. Leave the OAuth Client ID and Secret blank. The connector handles authentication automatically.
5. Click **Add**, then **Connect** on the new card.
6. A browser opens to [emaillove.com](http://emaillove.com). Sign in (or create a free account) and approve the connection.
Done. The Email Love Library tools appear in your tool list. Works in Claude Desktop, [claude.ai](http://claude.ai), and **Claude Code** (the CLI). Claude Code uses a local loopback callback, which is supported automatically.
1. Open Cursor, then go to **Settings → Cursor Settings → MCP → Add new MCP server**.
2. **Type**: HTTP (Streamable)
3. **URL**: `https://chat.emaillove.com/mcp`
4. Save. Cursor will open the auth page when you first invoke a tool. Sign in to your Email Love account and approve.
Cursor desktop uses a custom URI scheme (`cursor://anysphere.cursor-mcp/...`) for the OAuth callback, which is fully supported.
Any MCP client that supports HTTP transport with OAuth will work the same way: paste `https://chat.emaillove.com/mcp` as the server URL, sign in to Email Love, and you're connected. This includes Cowork, Continue, Zed, Goose, Cline, Windsurf, 5ire, and others.
For older clients that only support stdio, you can bridge via `mcp-remote`:
```bash theme={null}
npx mcp-remote https://chat.emaillove.com/mcp
```
## Try your first prompt
A few starter prompts to get a feel for it:
* *"Search Email Love for welcome emails from outdoor brands."*
* *"Show me Patagonia's full welcome journey on Email Love."*
* *"Use Email Love to find Black Friday emails from the last 12 months. Show me 5 of the most interesting."*
* *"Show me my Email Love collections."*
* *"What are Anthropic's most recent emails?"*
The agent figures out which tools to call. Email cards render inline as a carousel. Preview the actual emails, click through to the full page on [emaillove.com](http://emaillove.com), or ask the agent to fetch a specific one for more detail.
## What each tool does
You usually don't need to call these by name. Your AI agent figures out the sequence from your natural-language request. But if you want to see what's available:
| Tool | What it does |
| -------------------------- | --------------------------------------------------------------------------------------------------- |
| `search` / `search_emails` | Search the library by keyword, brand, or category. Returns a carousel of email cards. |
| `fetch` / `fetch_email` | Fetch the full details (subject, brand, captured-at date, preview URL) of one email by ID. |
| `search_brands` | List or filter brands available in the library. |
| `list_journeys` | List the lifecycle journeys (welcome, post-purchase, win-back, etc.) available for a brand. |
| `get_journey` | Get all emails in a specific journey for a brand, grouped by stage. |
| `get_brand_insights` | Send cadence, top campaigns, and category breakdown for one brand. |
| `list_collections` | Lists the collections you've saved on [emaillove.com](http://emaillove.com) (signed-in users only). |
| `get_collection` | Fetches a specific collection's emails. |
| `list_liked_emails` | The emails you've favorited on [emaillove.com](http://emaillove.com). |
| `get_trend_report` | Surfaces the latest Email Love trend report when available. |
## Privacy & access
* Sign-in uses your standard Email Love account, the same one you use to like and save on [emaillove.com](http://emaillove.com).
* The MCP is **read-only**: it can search, browse, and fetch. It never modifies your account or sends anything.
* Per-user tools (`list_collections`, `list_liked_emails`) only ever see **your own** data.
* The Email Love library itself is public. What you see in the MCP is the same set browsable on [emaillove.com](http://emaillove.com).
* To **rotate access**: delete the connector in your AI client and re-connect. To **fully revoke**: delete the connector.
## Troubleshooting
**"Authorization request blocked"**
The AI client sent a callback URL we don't recognize. As of June 2026 we support all major hosted clients (Claude, ChatGPT, Cursor, Lovable, v0), all desktop tools using loopback callbacks (Claude Code, Cowork, Cursor desktop in loopback mode), and reverse-DNS-style custom URI schemes (Cursor desktop's `cursor://anysphere.cursor-mcp/`). If you hit this with a client we should add, email [hello@emaillove.com](mailto:hello@emaillove.com) with a screenshot of the block page.
**Carousel doesn't render visually (just shows JSON or plain text)**
Some MCP clients don't support the MCP Apps UI yet. Ask the agent to "show me the first 3 emails as a list". It'll fall back to plain text with links.
**Sign-in loops back to the sign-in page**
Your browser may be blocking third-party cookies for [emaillove.com](http://emaillove.com). Allow cookies for [emaillove.com](http://emaillove.com) and try again.
**Tools don't appear after connecting**
Quit your AI client completely and reopen. On macOS, use ⌘+Q rather than just closing the window.
**Empty results when searching**
The library is large but not infinite. Try broader keywords, or browse by brand instead (`list brands`, then `show me emails from X`).
## What's coming
* **Saved searches sync.** Pull your saved searches from [emaillove.com](http://emaillove.com) directly into the AI agent.
* **Smart trend reports.** Automatic weekly trend summaries surfaced inline.
* **Brand subscriptions.** Pin favorite brands so the agent surfaces their new emails first.
## Related Articles
* [Build with the Figma MCP](/plugin/ai/agents-in-figma): build on-brand emails from your own Figma-synced design system with Claude or Codex.
## Need help?
Email [hello@emaillove.com](mailto:hello@emaillove.com) and we'll respond within a business day.
# Generate Emails with AI Studio
Source: https://help.emaillove.com/plugin/ai/generate
How to use AI Studio to automatically generate complete, editable email templates from campaign briefs using your design system
AI Studio is a tab within the Email Love Figma plugin that uses AI to automatically generate complete email templates from campaign briefs. You upload a brief and AI Studio assembles a full, editable email template on your Figma canvas using your brand's design system components.
The result is a production-ready Email Love frame that you can edit, customize, and export using all the standard plugin tools.
## Requirements
AI Studio is included on **every Email Love plan**, with a monthly allowance of AI generations: 1 on Free, 10 on Starter, 20 on Growth, and 100 on Professional. **Email Love Builder** accounts can use it too. When you hit your monthly allowance, you'll see a prompt to upgrade in the AI Studio tab. For the full breakdown of allowances and how metering works, see [Email Love Subscription Plans](/plugin/account/plans).
Before generating your first email, you'll also need a **synced design system** with components uploaded. See the [Creating and Managing Design Systems](/plugin/components/design-systems) article for setup instructions.
## How AI Studio Works
The generation process follows three steps:
Save your brand's customized email components into the plugin's predefined component categories (Header, Heroes, Single Column, Two Column, Three Column, Four Column, Buttons, Reviews, Images, Lists, Order Tables, Footer, and Code).
Process and index your components so AI Studio can use them. You only need to sync once, unless you add or update components, in which case you should re-sync before generating.
Upload a file and AI Studio generates a complete email template.
AI Studio intelligently selects and combines the right components from your design system based on the content and structure described in your brief.
AI Studio **only** uses the components you've saved to your design system. It will not pull in any out-of-the-box Email Love components. This means every generated email will be on-brand from the start, but it also means you need to have enough components saved to cover the sections described in your brief.
## Generating an Email from a File Upload
### Supported File Formats
AI Studio accepts campaign briefs in the following formats:
* `.csv`
* `.xlsx` (Excel)
* `.doc` / `.docx` (Word)
* `.pdf`
### Steps
Open the **AI Studio** tab in the plugin sidebar.
Select a **synced design system** from the dropdown.
Click the upload box and select your campaign brief file.
Click **Generate Template**. A confirmation modal will show your selected design system and file name. Confirm to proceed.
A progress bar will display real-time status updates as the email is generated (e.g., "Pulling in your copy", "Uploading images"). Generation typically takes **5–10 minutes** depending on the complexity of the brief. You can **cancel** the generation at any time if needed.
On success, the generated email template appears directly on your Figma canvas.
The generated template is a fully editable Email Love frame. You can modify text, swap images, adjust properties, apply mobile styles, and export it to any supported ESP.
## After Generation
Once AI Studio finishes generating your email:
* A **success screen** confirms the email has been created
* The template is placed directly on your Figma canvas as a standard Email Love frame
* You can edit the template using all the standard Email Love tools:
* Modify text, images, buttons, and links
* Adjust component properties in the plugin
* Apply mobile-specific styles
* Export to any supported ESP (Klaviyo, Braze, Iterable, OneSignal, etc.)
* Sync to the [Email Love Builder](https://emaillove.com/builder) for team editing
The generated email is yours to customize. AI Studio gives you a head start, not a locked template.
## Tips for Better Results
* **Create separate design systems for each email type.** This is the single biggest factor in getting consistent results. If your design system has too many component options, AI Studio has more to choose from and results become less predictable. Keep your newsletter system separate from your promotional system, etc.
* **You don't need to fill every category.** AI Studio will only use the components you've saved. Empty categories are simply skipped. Save only what's relevant for that email type.
* **Be specific in your campaign brief.** Label each piece of content clearly. Specify headline text, body copy, button text, and button URLs as distinct items. Break your brief into sections that map to components in your design system.
* **Align your brief with the predefined categories.** Use category names like Header, Hero, Single Column, Two Column, etc. in your brief so the AI can match sections directly.
* **Results can vary between generations.** AI Studio may produce slightly different results each time. If the first result doesn't match what you expected, try generating again or refine your brief.
* **Keep your design system current.** If you've updated component designs in Figma, re-upload and re-sync before generating.
* **Use the generated email as a starting point.** AI Studio gets you to about 70% done. Review the output and fine-tune as needed.
For a deep dive on design system setup, brief writing best practices, section-to-component matching, and detailed troubleshooting, see [How to Get the Best Results from Generate from Brief](/plugin/ai/brief-best-practices).
For a complete example of a well-structured campaign brief you can use as a template, see [Sample Campaign Brief](/plugin/ai/sample-brief).
## Troubleshooting
**"No synced design system" error:** Make sure you've uploaded components to your design system and synced it before attempting to generate. See the [Creating and Managing Design Systems](/plugin/components/design-systems) article.
**Generation takes longer than expected:** Complex briefs with many sections or images can take up to 10 minutes. The progress bar shows real-time updates so you know it's still working. You can cancel and retry if needed.
**Generated email doesn't match expectations:** Try providing a more detailed campaign brief with specific section descriptions, content, and structure. Also check that your design system has enough variety of components for AI Studio to work with.
**File upload rejected:** Check that your file is one of the supported formats: `.csv`, `.xlsx`, `.doc`, `.docx`, or `.pdf`. Corrupted or password-protected files may not upload successfully.
**Template appears on canvas but looks incomplete:** The generation may have encountered issues with certain sections. Review the output and manually add any missing components from your design system.
## Need Help?
If you have questions about AI Studio, reach out to us at [support@emaillove.com](mailto:support@emaillove.com). We're happy to walk you through the setup or troubleshoot any issues.
## Related Articles
* [Import Existing Designs with AI Import](/plugin/ai/ai-import): Convert screenshots and existing designs into editable Email Love frames
* [How to Get the Best Results from Generate from Brief](/plugin/ai/brief-best-practices): Best practices for design systems, brief writing, and troubleshooting
* [Sample Campaign Brief](/plugin/ai/sample-brief): A complete example brief you can use as a starting point
* [Creating and Managing Design Systems](/plugin/components/design-systems): How to set up and manage the design systems that power AI Studio
* [Pre-Built Email Components](/plugin/components/pre-built): Browse available components to include in your design system
* [Export Overview](/plugin/export/overview): Export your AI-generated emails to any supported ESP
# Sample Campaign Brief
Source: https://help.emaillove.com/plugin/ai/sample-brief
A complete example campaign brief showing how to structure content for AI Studio's Generate from Brief feature, using a fictional brand called Greenleaf Organics
This is a complete example of a well-structured campaign brief for use with AI Studio's Generate from Brief feature. You can use it as a template for your own briefs.
For tips on writing effective briefs and setting up your design system, see [How to Get the Best Results from Generate from Brief](/plugin/ai/brief-best-practices).
***
## Campaign Overview
* **Brand:** Greenleaf Organics
* **Campaign Name:** Summer Refresh Sale
* **Campaign Goal:** Drive sales during the summer promotion by offering 25% off sitewide and highlighting seasonal bestsellers.
* **Target Audience:** Existing subscribers and past customers. Mix of health-conscious millennials and Gen X parents.
* **Tone and Voice:** Warm, fresh, and inviting. Friendly but not overly casual. Emphasize natural ingredients and feel-good summer energy.
* **Promo Code:** SUMMER25
* **Sale Dates:** June 15 – June 30, 2026
* **Landing Page URL:** [https://greenleaforganics.com/summer-sale](https://greenleaforganics.com/summer-sale)
***
## Email Sections
This email uses 7 sections: Pre-Header, Header, Hero, Single Column, Two Column, Single Column, Footer. Please ensure the corresponding design system has one component saved for each of these categories before generating.
***
### Pre-Header
**Preview text:** Fresh savings are here: 25% off everything at Greenleaf Organics. Use code SUMMER25.
***
### Header
Display the Greenleaf Organics logo centered at the top. Include navigation links to: Shop All, Bestsellers, New Arrivals, Our Story.
***
### Hero
**Headline:** Summer Just Got Fresher
**Subheadline:** 25% off sitewide. Clean ingredients, feel-good prices.
**CTA Button Text:** Shop the Sale
**CTA Button Link:** [https://greenleaforganics.com/summer-sale](https://greenleaforganics.com/summer-sale)
**Image Direction:** Bright, sun-drenched flat lay of summer skincare products arranged on a light wood surface with fresh greenery and sliced citrus. Natural light, airy feel.
***
### Single Column: Main Message
**Headline:** Your Summer Refresh Starts Here
**Body Copy:**
Summer is the perfect time to reset your routine. Whether you are stocking up on daily essentials or trying something new, our entire collection is 25% off through June 30. Every product is made with certified organic ingredients, never tested on animals, and packaged in recyclable materials.
Use code **SUMMER25** at checkout. No minimum purchase required.
***
### Two Column: Product Features
**Left Column:**
* **Product Name:** Citrus Glow Daily Moisturizer
* **Short Description:** Lightweight hydration with vitamin C and organic aloe. Perfect for warm-weather skin.
* **Price:** \~\~$38~~ $28.50
* **CTA Button Text:** Shop Now
* **CTA Button Link:** [https://greenleaforganics.com/products/citrus-glow-moisturizer](https://greenleaforganics.com/products/citrus-glow-moisturizer)
**Right Column:**
* **Product Name:** Lavender Calm Body Oil
* **Short Description:** Soothing body oil made with organic lavender and jojoba. Great after a day in the sun.
* **Price:** \~\~$32~~ $24.00
* **CTA Button Text:** Shop Now
* **CTA Button Link:** [https://greenleaforganics.com/products/lavender-calm-body-oil](https://greenleaforganics.com/products/lavender-calm-body-oil)
**Image Direction:** Clean product photography on a white background for each item. Consistent framing and lighting across both columns.
***
### Single Column: CTA Section
**Headline:** Don't Wait. Summer Won't Last Forever
**Body Copy:**
This sale ends June 30. Grab your favorites (and discover a few new ones) while everything is 25% off.
**CTA Button Text:** Browse the Full Collection
**CTA Button Link:** [https://greenleaforganics.com/summer-sale](https://greenleaforganics.com/summer-sale)
***
### Footer
**Includes:**
* Greenleaf Organics logo (small)
* Mailing address: 412 Verdant Lane, Portland, OR 97201
* Unsubscribe link
* Social media icons: Instagram, Facebook, Pinterest
* Legal line: "You are receiving this email because you signed up at [greenleaforganics.com](http://greenleaforganics.com). If you no longer wish to receive promotional emails, you may unsubscribe at any time."
***
## Additional Notes
* Brand color palette: forest green (#2D5F2D), warm cream (#FDF6EC), charcoal (#333333)
* All product links should open in a new tab
***
## Why This Brief Works
This brief follows all the best practices outlined in the [How to Get the Best Results from Generate from Brief](/plugin/ai/brief-best-practices) guide:
* **Campaign context is set at the top.** Brand, goal, audience, and tone are all clearly stated before the email sections begin.
* **Sections use standard category names.** Pre-Header, Header, Hero, Single Column, Two Column, and Footer all map directly to the plugin's predefined component categories.
* **Each section includes specific content.** Headlines, body copy, CTA button text, CTA links, and image direction are all provided as distinct items.
* **The section list is explicit.** The brief states upfront that the email uses 7 sections and names them, so there's no ambiguity about what to generate.
* **Sections are in email order.** The brief flows top-to-bottom exactly as the final email should appear.
***
## Related Articles
* [Import Existing Designs with AI Import](/plugin/ai/ai-import): Convert screenshots and existing designs into editable Email Love frames
* [How to Get the Best Results from Generate from Brief](/plugin/ai/brief-best-practices): Best practices for design systems and brief writing
* [Generate Emails with AI Studio](/plugin/ai/generate): How to use AI Studio to generate emails from file uploads
* [Creating and Managing Design Systems](/plugin/components/design-systems): How to set up and manage the design systems that power AI Studio
# Email Love vs Beefree: Which Email Design Tool is Right for Your Team?
Source: https://help.emaillove.com/plugin/comparisons/beefree
How Email Love compares to Beefree for design teams using Figma vs drag-and-drop email builders
**Beefree is a drag-and-drop email builder for teams who don't code. Email Love is a Figma plugin for design teams who want professional control, ESP integrations, and AI features.**
Here's an honest breakdown of how they compare.
***
**The Quick Comparison**
| | **Email Love** | **Beefree** |
| -------------------- | --------------------------------------------- | ----------------------------------------- |
| **Platform** | Figma plugin | Freelance designers & solo creators |
| **Best For** | Design and marketing teams using Figma | Marketing teams who don't design in Figma |
| **Starting Price** | Free plan, then \$19/user/month | \$30/month (team of 2-3) |
| **Design Approach** | Professional design tool (Figma) | Drag-and-drop builder |
| **ESP Integrations** | Deep (Iterable templates, Braze localization) | 26+ native integrations |
| **AI Features** | ✅ AI Studio | ✅ AI Writing Assistant and import |
## Understanding the Fundamental Difference
Before we compare features, let's be clear about what these tools actually are:
**Beefree** is a standalone drag-and-drop email builder. You log into their web app, drag content blocks around, and export HTML. It's built for marketing teams who need to create emails quickly without touching code or design tools.
**Email Love** is a Figma plugin. You design emails in Figma (a professional design tool), then use our plugin to export production-ready HTML with ESP-specific features. It's built for design teams who want full creative control.
**This isn't a "which is better" comparison. It's a "which workflow fits your team" comparison.**
***
## Why Design Teams Choose Email Love
### You Already Work in Figma
If your team designs in Figma, you don't want to recreate everything in a separate email builder.
With Email Love, you design emails in the same tool you use for websites, apps, and marketing materials. Your email designs live alongside your other design work. Your design system is already in Figma. Your components are already built.
Beefree requires you to rebuild everything in their drag-and-drop interface. Separate tool, separate workflow, separate design system.
**Bottom line:** If your design team lives in Figma, Email Love fits your existing workflow. Beefree adds another tool to your stack.
***
### You Need Professional Design Control
Beefree's drag-and-drop builder is powerful for what it does. But it's constrained by pre-built content blocks and layouts.
Email Love gives you the full power of Figma: custom layouts, precise typography, complete design freedom. You're not limited to what content blocks a builder offers. You design exactly what you want.
**For design teams:** This matters. Your brand demands pixel-perfect execution. Your designers want creative control.
**For marketing teams without designers:** Beefree's constraints are actually helpful. Pre-built blocks ensure emails render correctly.
***
### ESP Integrations Go Deeper
**Our Iterable integration** exports directly to templates and snippets. Not just HTML. Actual Iterable templates your team deploys immediately.
**Our Braze integration** auto-generates localization tags with unique IDs. Translating into 20+ languages? This saves 10+ hours per campaign.
**Beefree offers 26+ native integrations** with ESPs and CRMs. You can export to platforms like Mailchimp, HubSpot, Salesforce, and more. They also offer a Custom Connector using webhooks to connect with virtually any ESP.
**The difference:** We go deep with specific platforms (templates, snippets, localization). Beefree goes broad with more platform connections but standard HTML export.
***
### AI Features Focus on Different Problems
**Email Love AI Studio:** Reads campaign briefs and generates email designs using your Figma design system. Gets you to 70% done before you start designing.
**Beefree AI Writing Assistant:** Generates or refines email copy, translates content, creates bulk alt text, and offers text-to-image generation.
**The difference:** Our AI helps with design creation. Beefree's AI helps with content writing. Both are useful, just for different parts of the process.
***
## The Full Feature Breakdown
| **Feature Category** | **Email Love** | **Beefree** |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
| **Platform Type** | Figma plugin | Standalone web app |
| **Pricing** | Free: $0, Starter: $19/user/mo, Growth: $59/user/mo, Professional: $1,788/user/yr (annual only, 3+ users), Enterprise: Custom | Professional: $30/mo (2-3 users), Business: $160/mo, Enterprise: Custom |
| **Free Plan** | ✅ 5 HTML exports/month | ✅ 6 exports/month |
| **Design Approach** | Professional design in Figma | Drag-and-drop builder |
| **Learning Curve** | Requires Figma knowledge | Beginner-friendly |
| **ESP Integrations** | HubSpot, Klaviyo, Iterable (templates + snippets), Braze (localization + content blocks), [Customer.io](http://Customer.io), SFMC, Loops, MoEngage, Blueshift, OneSignal | 26+ native integrations + Custom Connector via webhooks |
| **Integration Depth** | ✅ Deep (templates, snippets, content blocks, localization) | Standard HTML export to most platforms |
| **Design System** | ✅ Shared library in plugin, organized by type | Advanced Style Kit (workspace-level brand controls) |
| **Templates** | Hundreds of templates and components | 2,000+ email and landing page templates |
| **Landing Pages** | ❌ Email only | ✅ Email and landing pages |
| **AI Features** | ✅ AI Studio (brief to email) | ✅ AI Writing Assistant (copy generation, translation, alt text) |
| **Collaboration** | Figma's native collaboration | Real-time co-editing, approval workflows, design comments |
| **Mobile Optimization** | ✅ Responsive overrides | ✅ Responsive design |
| **Dark Mode** | ✅ Preview & optimize | ✅ Support |
| **Custom Code** | ✅ Raw code component | ✅ Custom HTML blocks |
| **Localization** | ✅ Auto-tags for Braze, integrates with Smartling/Lokalise/Crowdin | Translation via AI Writing Assistant |
| **HTML Import** | ❌ Not offered | ✅ Drop existing HTML into builder |
| **Team Features** | Shared design system across team | User roles, permissions, approval workflows, commenting |
| **Support** | Expert support at all tiers | Dedicated onboarding for Enterprise, Beefree Academy |
## When to Choose Each Tool
### Choose Email Love if you:
✅ **Design in Figma** and want to keep your email workflow in the same tool
✅ **Have a design team** that wants full creative control
✅ **Use Braze or Iterable** and need templates, snippets, or auto-localization
✅ **Want your email design system** to live alongside your web/app design system
✅ **Need AI to generate designs** from campaign briefs
✅ **Value pixel-perfect design** over drag-and-drop convenience
✅ **Your designers lead** email production (vs. marketers building emails themselves)
**Bottom line:** If design quality and Figma workflows matter more than ease of use, choose Email Love.
***
### Choose Beefree if you:
✅ **Don't use Figma** or don't have a design team
✅ **Need marketers to build emails** without designer involvement
✅ **Want drag-and-drop simplicity** over design tool complexity
✅ **Need to create landing pages** in addition to emails
✅ **Want 2,000+ templates** to start from
✅ **Need HTML import** for migrating existing emails
✅ **Want built-in approval workflows** in the email builder itself
✅ **Your marketers lead** email production (vs. designers building emails)
**Bottom line:** If ease of use and marketing team independence matter more than design tool integration, choose Beefree.
***
## Pricing Comparison
### For Small Teams (2-3 People)
**Email Love:** $38-177/month ($19 Starter x 2 or \$59 Growth x 3)
**Beefree Professional:** \$30/month (2-3 users included)
**Winner:** Beefree is cheaper for small teams who don't need Figma integration.
***
### For Mid-Size Teams (5-10 People)
**Email Love Growth:** $295-590/month ($59 x 5-10)
**Beefree Business:** \$160/month (scales with team size)
**Winner:** Beefree's sticker price is lower here. Email Love charges per user, and that buys deeper ESP integrations and AI design generation. Decide based on workflow (Figma vs. drag-and-drop).
***
### For Enterprise Teams
**Email Love Enterprise:** Custom pricing
**Beefree Enterprise:** Custom pricing
Both offer custom design systems, training, and dedicated support. Decision comes down to: Does your team work in Figma or not?
***
## The Honest Truth About These Tools
We're not going to pretend Email Love is better for everyone. Here's the reality:
**If you don't use Figma,** Email Love doesn't make sense. You'd have to learn a professional design tool just to make emails. That's backwards. Use Beefree.
**If your marketers build emails without designers,** Beefree's drag-and-drop builder is perfect. They can create on-brand emails without waiting for design resources. Email Love requires design skills.
**If you need landing pages,** Beefree builds both emails and landing pages with consistent branding. Email Love only does emails.
**But if your design team works in Figma,** rebuilding everything in Beefree's drag-and-drop interface is inefficient. Your design system is already in Figma. Your components are already built. Email Love lets you use what you already have.
**And if you use Braze or Iterable,** our deep integrations (templates, snippets, auto-localization) save hours every week. Beefree exports HTML that you manually rebuild in your ESP.
***
## Different Tools for Different Workflows
This isn't a competition. It's a workflow question.
**The Beefree workflow:**
Marketer logs into Beefree → Drags content blocks → Writes copy → Exports to ESP → Done.
**Best for:** Marketing teams who need email independence without designer involvement.
***
**The Email Love workflow:**
Designer creates email in Figma → Uses Email Love plugin → Exports to Iterable/Braze with templates/snippets/localization → Email ops team deploys → Done.
**Best for:** Design teams who want emails in the same tool as their other design work.
***
Neither workflow is better. They serve different team structures.
***
## Common Questions
**Can we use both tools?**
Sure. Some teams use Beefree for quick marketing emails and Email Love for designed campaigns. Not the most efficient, but it works.
***
**We use Figma for design but our marketers build emails. Which should we choose?**
Probably Beefree. If designers aren't involved in day-to-day email production, giving marketers a drag-and-drop tool makes more sense than teaching them Figma.
***
**We don't use Figma. Should we learn it just for Email Love?**
No. If you're not already a Figma team, stick with Beefree. Learning a professional design tool just for emails isn't worth it.
***
**Which has better ESP integrations?**
Email Love goes deeper with specific platforms (Iterable templates, Braze localization). Beefree connects to more platforms (26+ native integrations) but exports standard HTML. Depends if you need depth or breadth.
***
**Which is easier to learn?**
Beefree, by far. It's built for non-designers. Email Love requires Figma knowledge, which has a real learning curve.
***
**Do you compete with Beefree?**
Not really. We serve different workflows. Teams who work in Figma choose Email Love. Teams who don't choose Beefree or other drag-and-drop builders.
***
## Ready to See If Email Love Fits Your Workflow?
**Built for design teams. Lives in Figma. Exports to your ESP.**
If your team designs in Figma and needs deep ESP integrations, Email Love might be the right fit.
[**Get Started with Email Love**](https://www.figma.com/community/plugin/1387891288648822744/email-love-html-email-builder)
[**Schedule a Demo**](https://calendar.notion.so/meet/matthayes/matthayes)
✓ 5 free HTML exports per month
✓ No credit card required
✓ See how Email Love works with your Figma workflow
✓ Test ESP integrations with your actual platform
***
**Not sure if Figma is right for your email workflow?**
Email us at [support@emaillove.com](mailto:support@emaillove.com). We'll be honest about whether Email Love makes sense for your team (or if you should stick with Beefree).
# Email Love, a powerful Designmodo Postcards alternative
Source: https://help.emaillove.com/plugin/comparisons/designmodo-postcards
How Email Love compares to Designmodo Postcards on design control, ESP integrations, AI features, and enterprise scalability
**Designmodo Postcards is a drag-and-drop email builder (available as a standalone web app and a Figma plugin) that's fast and beginner-friendly. Email Love is a Figma plugin built for design teams who want pixel-perfect control and deep ESP integrations. Here's where each one shines.**
***
## The Quick Comparison
| | **Email Love** | **Designmodo Postcards** |
| ------------------------- | ---------------------------------------------- | ------------------------------------------- |
| **Platform Type** | Figma plugin | Standalone web app + Figma plugin |
| **Starting Price** | $0 (free plan) / $19/user/month (Starter) | $0 (free) / $16/month (Plus) |
| **Design Control** | ✅ Full Figma design environment | Drag-and-drop modules (no code editor) |
| **ESP Integration Depth** | Deep (templates, snippets, localization) | 4 direct integrations + generic HTML export |
| **AI Features** | ✅ AI Studio | Minimal |
| **Design System Storage** | ✅ Built into plugin | ❌ None |
| **Enterprise Support** | ✅ Custom design system + training + Slack/Zoom | Limited (max 5 users) |
## Two Very Different Approaches
Designmodo Postcards is built for speed and simplicity. Available as both a standalone web app and a Figma plugin, you drag pre-built modules onto a canvas, customize the text and images, and export. It's beginner-friendly with an average design time of 47 minutes per email.
Email Love takes a different approach entirely. It lives inside Figma, giving you the full power of a professional design tool for email creation. Your email components exist alongside your web and mobile designs in one unified system. It requires Figma knowledge, but gives you pixel-perfect design control that a drag-and-drop builder can't match.
The question isn't which is "better". It's which fits your team's workflow.
***
## Why Teams Choose Email Love Over Postcards
### Full Design Control, Not Module Rearranging
Postcards gives you 100+ pre-built modules you can drag, drop, and customize. It's fast, but you're working within the constraints of those modules. You can change colors, fonts, and content, but you can't design freely.
Email Love gives you Figma's full design environment. Create any layout you can imagine, use your existing design system components, and the plugin converts it all to production-ready HTML. If you can design it in Figma, you can email it.
For teams that take email design seriously, where brand identity matters down to the pixel, Email Love gives you control that Postcards can't.
***
### ESP Integrations That Go Beyond HTML Export
Postcards has direct integrations with HubSpot, Mailchimp, Klaviyo, and Braze. Everything else requires exporting generic HTML and uploading manually.
Email Love integrates with HubSpot, Klaviyo, Braze, Iterable, [Customer.io](http://Customer.io), Loops, and MoEngage, and our integrations go deeper. Our **Iterable integration** exports directly to templates AND snippets. Our **Braze integration** auto-generates localization tags and supports content blocks.
If you're using [Customer.io](http://Customer.io), SFMC, Loops, MoEngage, Blueshift, OneSignal, or Iterable, Postcards doesn't have direct integrations at all. Email Love does.
***
### AI That Generates Complete Emails
Postcards has minimal AI features.
Email Love's **AI Studio** generates full email designs from campaign briefs using your design system, so you start at 70% done instead of staring at a blank canvas. It's a fundamentally different approach to email creation that saves hours per campaign.
***
### Built for Teams, Not Just Individuals
Postcards caps at 5 user seats on its highest plan (\$39/month). There's no enterprise tier, no custom design system service, and no hands-on support.
Email Love scales from individual designers to enterprise teams. Our Enterprise plan includes a custom design system (50 branded components), team training, and ongoing Slack/Zoom support from a team with 15+ years of email expertise.
***
## The Full Feature Breakdown
| **Feature** | **Email Love** | **Designmodo Postcards** |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| **Platform** | Figma plugin | Standalone web app + Figma plugin |
| **Pricing** | Free: $0, Starter: $19/user/mo, Growth: $59/user/mo, Professional: $1,788/user/yr (annual only, 3+ users), Enterprise: Custom | Free: $0, Plus: $16/mo (1 user), Pro: $24/mo (3 users), Agency: $39/mo (5 users) |
| **Export Limits** | Free: 5/mo, Starter: 10/mo, Growth: Unlimited | Free: 5/mo, Plus: 20/mo, Pro+: Unlimited |
| **ESP Integrations** | HubSpot, Klaviyo, Iterable, Braze, [Customer.io](http://Customer.io), SFMC, Loops, MoEngage, Blueshift, OneSignal | HubSpot, Mailchimp, Klaviyo, Braze (direct), generic HTML for others |
| **Integration Depth** | ✅ Deep (Iterable templates/snippets, Braze content blocks/localization) | One-click export (basic HTML) |
| **Design Control** | ✅ Full Figma design environment | Module-based drag-and-drop (no code editor) |
| **Design System** | ✅ Built into Figma (shared with web/mobile) | ❌ No design system storage |
| **AI Features** | ✅ AI Studio (brief-to-email) | Minimal AI features |
| **Code Editor** | ✅ Raw code component + MJML framework | ❌ No in-editor code editing |
| **Templates/Components** | Hundreds of templates and components | 100+ drag-and-drop modules + hundreds of templates |
| **Collaboration** | Via Figma's collaboration tools | ✅ Real-time editing with avatar presence + comments |
| **Mobile Optimization** | ✅ Mobile Styles tab with responsive overrides | ✅ Built-in responsive design + mobile controllers |
| **Dark Mode** | ✅ Preview with custom overrides | ✅ Full dark mode support |
| **Image Hosting** | ✅ Email Love CDN | ✅ Designmodo CDN (Pro+ plans) |
| **Max Users** | Unlimited (Enterprise) | 5 users (Agency plan) |
| **Enterprise** | ✅ Custom design system + training + ongoing support | ❌ No enterprise tier |
## When Email Love Makes Sense
### Your Team Designs in Figma
If your designers already use Figma for web, mobile, and brand work, Email Love means email is just another output from the same design system. No learning a new tool, no managing brand assets in two places.
### You Need Deep ESP Integrations
If you're using Iterable, Braze, [Customer.io](http://Customer.io), SFMC, Loops, MoEngage, Blueshift, or OneSignal, Email Love has direct integrations that Postcards doesn't offer. And our Braze and Iterable integrations go deeper than basic HTML export.
### You're Growing Past 5 Users
Postcards maxes out at 5 users. If your team is larger or heading that way, Email Love scales to enterprise with custom design systems, training, and dedicated support.
### Design Quality Is a Priority
If your brand demands pixel-perfect email design that matches your web and mobile experience, Figma's full design environment gives you control that a module-based builder can't.
***
## When Postcards Might Be a Better Fit
Postcards might work better if you:
* **Want flexibility in design tools.** Postcards works both as a standalone web app and as a Figma plugin, giving teams the choice of workflow
* **Need the fastest possible email creation.** 47-minute average design time. Drag modules, swap content, export. Hard to beat for speed.
* **Have a small team on a tight budget.** The Plus plan at $16/month is cheaper than Email Love's $19/user/month Starter (both tools have free tiers)
* **Want pre-built templates, not design system components.** Hundreds of ready-to-use templates vs. our design-system approach
* **Don't need deep ESP features.** If basic HTML export to HubSpot or Mailchimp is all you need, Postcards handles that well
* **Prefer a simpler tool.** Postcards has a shorter learning curve than Figma + Email Love
But you'd give up: full design control in Figma, deep ESP integrations, AI-powered design creation, design system storage, enterprise scalability, and access to a team with 15+ years of email expertise.
***
## Questions People Ask
**What's the main difference?**
Postcards is a drag-and-drop email builder for quick, module-based email creation. Email Love is a Figma plugin for design teams who want full creative control and deep ESP integrations. Different tools for different workflows.
***
**Which is cheaper?**
Both tools have free tiers. Postcards' paid plans start at $16/month, and Email Love's start at $19/user/month. For solo users, Postcards is cheaper. For teams that need design system storage, AI features, and enterprise ESP integrations, Email Love offers more value per dollar.
***
**Can I edit HTML in Postcards?**
No. Postcards is a visual-only editor. You can export HTML and edit it outside the tool, but there's no in-editor code access. Email Love offers a Raw Code Component for custom HTML and exports clean MJML that developers can modify.
***
**Does Postcards support [Customer.io](http://Customer.io) or Iterable?**
Not with direct integrations. You'd need to export generic HTML and upload manually. Email Love has direct integrations with both, including Iterable template/snippet support.
***
## Ready to Try Email Love?
**Full design control. Deep integrations. AI-powered design.**
Join design teams who chose Figma-native email creation over drag-and-drop builders.
**\[Get Started Free]**
**\[Talk to Our Team About Enterprise]**
✓ No credit card required
✓ 5 free HTML exports per month
✓ AI Studio included
✓ Expert support at every tier
***
**Questions? We're here to help.**
Email us at [support@emaillove.com](mailto:support@emaillove.com) or schedule a demo to see Email Love in action.
# Email Love, a powerful Dyspatch alternative
Source: https://help.emaillove.com/plugin/comparisons/dyspatch
Compare Email Love and Dyspatch for email production: Figma-native design vs enterprise email platform with AMP email support, modular architecture, and localization
**If your team needs AMP email support, enterprise-grade localization across 300+ locales, and a modular email production system, Dyspatch is purpose-built for that. But if your team designs in Figma and wants pixel-perfect emails with transparent pricing, modern ESP integrations, and AI-powered email generation, Email Love is the better choice.**
## Quick Comparison
| | Email Love | Dyspatch |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- |
| **Approach** | Figma plugin: design and export from your existing tool | Standalone platform: browser-based modular email production |
| **Best For** | Design-forward teams using Figma | Enterprise teams needing AMP emails and modular production at scale |
| **ESP Integrations** | Deep integrations with Braze, Iterable, Klaviyo, [Customer.io](http://Customer.io), HubSpot, SFMC, Loops, MoEngage, Blueshift, OneSignal + HTML export | SFMC, Braze, Iterable, Mailchimp, Sendgrid, and others |
| **AI Features** | AI Studio (generates emails from briefs) | Scribe AI (code generation from descriptions) |
| **AMP Email** | Not supported | Core feature: pre-coded interactive components |
| **Pricing** | Free plan, then from \$19/user/mo (transparent) | $149–$499/mo (published tiers) |
| **Markup Language** | MJML (open-source standard) | DML, the Dyspatch Markup Language (proprietary) |
| **Learning Curve** | If you know Figma, you know Email Love | Requires learning DML and platform workflows |
***
## Two Different Philosophies
Dyspatch and Email Love approach email creation from fundamentally different angles.
Dyspatch is an enterprise email production platform built around modular architecture. It uses its own proprietary markup language (DML, the Dyspatch Markup Language) and a system of Themes, Blocks, and Variants to create reusable, standardized email modules. Its standout feature is AMP email support: pre-coded interactive components like carousels, forms, surveys, and accordions that work within the email itself (in supported clients). Dyspatch also supports localization across 300+ locales and 185+ languages.
Email Love takes the opposite approach: instead of building a new platform with a new language, it works inside Figma, the tool your design team already uses every day. Designers create emails visually using Figma's native tools, and the plugin handles the conversion to production-ready MJML code. No new platform to learn, no proprietary language to master.
***
## Why Teams Choose Email Love Over Dyspatch
### No Proprietary Language Required
Dyspatch requires teams to learn DML (Dyspatch Markup Language), a proprietary system for building email modules. While DML is powerful, it creates vendor lock-in. Your email templates, modules, and workflows are all built in a format that only works inside Dyspatch.
Email Love uses MJML, an open-source email framework maintained by Mailjet. Your underlying code is portable, well-documented, and backed by a large community. If you ever need to move to a different tool, your knowledge transfers.
### Design Freedom vs. Modular Constraints
Dyspatch's modular system (Themes → Blocks → Variants) enforces structure, which is great for consistency at scale but limits creative flexibility. Every email must be assembled from pre-defined blocks within the platform's constraints.
With Email Love, Figma is your canvas. Designers have complete creative control (custom layouts, unique visual treatments, complex hierarchies) while the plugin ensures everything exports as responsive, cross-client compatible code.
### Transparent Per-User Pricing
Dyspatch's published pricing ranges from $149 to $499 per month, with enterprise pricing above that. Even the base tier represents a significant monthly investment, and it covers a maximum of 3 users.
Email Love starts free with 5 HTML exports per month, and paid plans start at $19 per user per month. Pricing scales with your team instead of forcing you into a platform tier: a solo designer pays $19, and a team of five on the Growth plan ($59/user/month) pays $295 per month with unlimited exports included. No sales call, and you can cancel any time.
### AI That Designs, Not Just Codes
Dyspatch's Scribe AI generates email code from natural language descriptions, useful for developers who need to build email templates quickly.
Email Love's AI Studio takes a different approach: it generates complete email designs from campaign briefs using your own design system components. Not generic templates, but emails that already match your brand.
### Modern ESP Depth
Both tools integrate with major ESPs, but the depth differs. Email Love's Braze integration automatically creates localization variants and syncs content blocks. Its Iterable integration manages templates and snippets natively. These aren't surface-level connections. They understand each platform's specific features.
***
## Full Feature Breakdown
| Feature | Email Love | Dyspatch |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| **Design Environment** | Figma (your existing tool) | Proprietary browser-based builder |
| **Markup Language** | MJML (open-source) | DML (proprietary) |
| **Template Library** | Hundreds of templates and components | Blueprints library + custom modules |
| **AMP Email Support** | No | Yes, pre-coded interactive components (carousels, forms, surveys) |
| **Modular Architecture** | Figma components + plugin components | Themes → Blocks → Variants system |
| **AI Features** | AI Studio | Scribe AI (code generation) |
| **Responsive Email** | Automatic (MJML-powered) | Automatic (DML-powered) |
| **Dark Mode Preview** | Yes, built into preview | Yes, built into preview |
| **Localization** | Via Braze integration (automatic variants) | Native: 300+ locales, 185+ languages |
| **Email Testing** | Preview | Integrated Litmus testing |
| **ESP Integrations** | Braze, Iterable, Klaviyo, [Customer.io](http://Customer.io), HubSpot, SFMC, Loops, MoEngage, Blueshift, OneSignal | SFMC, Braze, Iterable, Mailchimp, Sendgrid, others |
| **Approval Workflows** | Figma's collaboration features | Built-in with role-based permissions |
| **Collaboration** | Figma's real-time collaboration | Built-in team workflows |
| **Custom Code Access** | Full HTML/MJML access + Raw Code component | Via DML and HTML blocks |
| **Landing Pages** | No, email-focused | No, email-focused |
***
## Pricing Comparison
### Email Love
* **Free**: \$0. 5 HTML exports per month, 100+ pre-built components, 1 AI Import per month
* **Starter**: \$19/user/month. 10 HTML exports per month, 1 design system, 10 AI Imports per month
* **Growth**: \$59/user/month. Unlimited HTML exports, 5 shared design systems, 20 AI Imports per month
* **Professional**: \$1,788/user/year (annual only, minimum 3 users). Unlimited HTML exports, unlimited design systems, unlimited AI Imports
* **Enterprise**: Custom pricing. Custom design system (up to 100 components), team training, dedicated Slack support
### Dyspatch
* **Starter**: \$149/month. Up to 3 users, 3 locales, community support
* **Growth**: \$299/month. Up to 10 users, 10 locales, priority support
* **Enterprise**: \$499+/month. Unlimited users and locales, SSO, dedicated support
***
## When Email Love Makes Sense
* **Your design team uses Figma** and you want email creation inside your existing design workflow
* **You use modern ESPs** like Braze, Iterable, Klaviyo, [Customer.io](http://Customer.io), or Loops and want deep integrations
* **You want transparent per-user pricing** that starts free instead of committing to a \$149+/month minimum
* **You prefer open standards** (MJML) over proprietary markup languages
## When Dyspatch Might Be Better
* **You need AMP email support.** Dyspatch is one of the few platforms with pre-coded interactive AMP components (carousels, forms, surveys, accordions)
* **Localization at massive scale.** Dyspatch supports 300+ locales and 185+ languages natively, far beyond what most tools offer
* **You want integrated email testing.** Dyspatch includes built-in Litmus testing without a separate subscription
* **Your team doesn't use Figma.** Dyspatch's standalone builder doesn't require any external design tool
* **Enterprise governance is critical.** Dyspatch offers formal approval workflows and role-based permissions built into the platform
* **You need modular email production at scale.** Dyspatch's Themes/Blocks/Variants system enforces consistency across very large teams
***
## Frequently Asked Questions
**Can Email Love create AMP emails?**
No. AMP email is a specialized format that requires specific markup and is only supported in a few email clients (primarily Gmail). If AMP interactivity is a core requirement, Dyspatch is one of the best options available. Email Love focuses on creating beautiful, responsive HTML emails that work across all email clients.
**Is DML hard to learn?**
Dyspatch Markup Language has a learning curve, particularly for teams used to working with standard HTML or visual design tools. It's well-documented, but it's a proprietary system. Your knowledge only applies inside Dyspatch. Email Love uses MJML, which is open-source and widely adopted.
**How does Email Love handle localization compared to Dyspatch?**
Email Love supports localization through its Braze integration, which automatically creates localized variants of your emails. Dyspatch handles localization natively across 300+ locales with built-in translation management. For teams localizing into dozens of languages, Dyspatch's approach is more comprehensive.
**Can I migrate from Dyspatch to Email Love?**
Since Dyspatch uses proprietary DML, templates don't directly transfer. However, your email designs can be rebuilt in Figma and exported through Email Love. The Email Love team offers migration support for enterprise customers transitioning from other platforms.
**Which tool is better for small teams?**
Email Love is significantly more accessible for small teams, both in pricing (a free plan or $19/user/month Starter vs a $149/month minimum) and learning curve (Figma familiarity vs learning a new platform and DML). Dyspatch is optimized for larger enterprise teams.
***
## Ready to Try Email Love?
Install the Email Love Figma plugin and see how Figma-native email design compares to standalone platforms. Start with the free plan and export your first email in minutes.
→ [Get the Email Love Figma Plugin](https://www.figma.com/community/plugin/1387891288648822744/email-love-html-email-builder)
# Email Love, a powerful Emailify alternative
Source: https://help.emaillove.com/plugin/comparisons/emailify
How Email Love compares to Emailify on pricing, ESP integrations, AI features, and team collaboration
**Both plugins help you design emails in Figma and export production-ready HTML. But one starts free, integrates deeper with your ESP, and includes AI features that save you hours every week.**
Here's an honest breakdown of how they compare.
***
**The Quick Comparison**
| | **Email Love** | **Emailify** |
| ------------------------- | ---------------------------------------------- | ---------------------- |
| **Starting Price** | Free plan, then \$19/user/month | \$49/user/month |
| **ESP Integration Depth** | Deep (templates, snippets, localization) | Basic HTML export |
| **Design System Storage** | ✅ Built into plugin | ❌ Separate Figma files |
| **AI Features** | ✅ AI Studio | ❌ None |
| **Enterprise Support** | ✅ Custom design system + training + Slack/Zoom | Self-service |
| **Templates/Components** | Hundreds of templates and components | 100+ templates |
## Why Teams Choose Email Love
### Deeper ESP Integrations That Actually Work
Here's the thing: most Figma email plugins (including Emailify) export HTML that works fine for basic email campaigns. Emailify does the basics well. But if you're using advanced ESP features like templates, snippets, or content blocks, you're stuck rebuilding everything manually in your ESP editor.
We go deeper.
**Our Iterable integration** doesn't just export HTML. We also export directly to Iterable templates AND snippets. Design a reusable header once, export it as a snippet, and your team can drop it into any campaign without touching Figma again.
**Our Braze integration** auto-generates localization tags with unique IDs and supports content blocks. If you're translating emails into 20+ languages, this saves you 10+ hours per campaign. No more manually wrapping every piece of copy in translation tags.
The bottom line? We built Email Love for teams who actually use their ESP's advanced features (not just the basic editor). Emailify gives you solid HTML. We give you HTML plus all the platform-specific features that save you time.
***
### Your Design System Lives in the Plugin
Quick question: how many times this week have you Slacked someone "Hey, which file has the latest button design?"
Yeah, that's what we thought.
**The old way** (Emailify and pretty much everyone else): Your components live in separate Figma files. Team members hunt for the "right version." Nobody's sure if they're using the latest header or last month's.
**The Email Love way**: Your entire design system lives inside the plugin. Buttons, headers, footers, spacing rules, typography (all of it) in one place. Every team member sees the same components. Update once, everyone gets it immediately.
No more version control chaos. No more "which file are we using?" Your design system is always one click away.
***
### AI Features That Actually Save You Time
**AI Studio** turns campaign briefs into emails. Upload a brief and AI reads the requirements and generates a first draft using YOUR design system (so it's already on-brand). You get to 70-80% done before you even start tweaking. A 3-hour project becomes a 45-minute polish session.
What does Emailify offer? Nothing. You're on your own.
***
### Enterprise Support That Actually Sets You Up
We don't just sell you a plugin and wish you luck.
Our Enterprise customers get a custom design system built specifically for their brand (50 components), hands-on training for their team, and ongoing Slack and Zoom support. We've been doing email marketing for 15+ years. We've shipped 10,000+ emails for brands like Hatch, Eargo, Bilt, and CNN.
When you work with us, you're not just getting software. You're getting a team that knows how to make you successful.
***
## The Full Feature Breakdown
| **Feature Category** | **Email Love** | **Emailify** |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| **Pricing** | Free: $0
Starter: $19/user/mo
Growth: $59/user/mo
Professional: $1,788/user/yr (annual only, 3+ users)
Enterprise: Custom | Pro: $49/user/mo
Pro Bundle: $99/user/mo (12 plugins) |
| **Free Trial** | ✅ Free plan: 5 HTML exports/month | ✅ 10 trials (then limited features) |
| **Export Limits** | Free: 5/mo
Starter: 10/mo
Growth: Unlimited | Unlimited HTML exports |
| **ESP Integrations** | HubSpot, Klaviyo, Iterable (templates + snippets), Braze (localization + content blocks), [Customer.io](http://customer.io/), SFMC, Loops, MoEngage, Blueshift, OneSignal | ✅ Emailify offers more integrations including Campaign Monitor, Constant Contact, Intercom, Mailmodo, and MailJet. |
| **Integration Depth** | ✅ Deep integrations with advanced features (templates, snippets, content blocks, localization) | ❌ Basic HTML export to all platforms |
| **Design System Storage** | ✅ Built-in design system library inside of the Email Love plugin (save & share across your team) | ❌ Components stored in Figma file |
| **Templates Included** | Hundreds of templates and components | 100+ free templates |
| **AI Features** | ✅ AI Studio (brief to email) | ❌ None |
| **Mobile Optimization** | ✅ Responsive overrides | ✅ Responsive overrides |
| **Dark Mode** | ✅ Preview with custom overrides | ✅ Preview with custom overrides |
| **Custom Code** | ✅ Raw code component | ✅ Raw code component |
| **Localization** | ✅ Auto-tags for Braze, Smartling, Lokalise, Crowdin integration | ✅ Translations via Google Sheets and integrations with Lokalise and Crowdin |
| **Image Hosting** | ✅ Included | ✅ Included |
| **Team Collaboration** | ✅ Shared design system library | Standard Figma collaboration |
| **Enterprise Onboarding** | ✅ Custom design system
✅ Team training
✅ Slack/Zoom support | Self-service (Help Docs) |
| **Support Level** | Expert support at all tiers | Customer support included |
| **Custom Design System Service** | ✅ Services to help your build a custom email design system. | ❌ Not offered |
## How the Pricing Actually Compares
Let's talk about money for a second.
### For Individual Users or Small Teams
**Email Love Starter**: \$19/month
* 10 HTML exports per month
* 10 AI Imports per month
* 1 design system
* Email and Discord support
**Emailify Pro**: \$49/month
* Unlimited exports
* Basic HTML export to all platforms
* No AI features
* No design system storage
* Customer support
**You can start free (5 HTML exports per month), and Starter at $19/month is $30/month less than Emailify Pro. Need unlimited exports? Email Love Growth is \$59/month.**
***
### For a Team of 5 Designers
**Email Love Growth**: $295/month ($59 x 5)
**Emailify Pro**: $245/month ($49 x 5)
Emailify is \$50/month less on the sticker price. But the Email Love side includes AI-powered email creation, enterprise-grade ESP integrations, and a shared design system library that keeps five designers in sync. Emailify's price buys basic HTML export.
***
### For a Team of 10 Designers
**Email Love Growth**: $590/month ($59 x 10)
**Emailify Pro**: $490/month ($49 x 10)
Same trade at scale: Emailify is \$100/month less, and you give up AI features, deep ESP integrations, and the shared design system to save it.
***
## When Email Love Makes Sense for Your Team
### You're Using Braze or Iterable
If you're using Braze for multilingual campaigns, our auto-localization feature saves 10+ hours per campaign. You design in English, check one box during export, and we automatically wrap every piece of copy in translation tags with unique IDs.
If you're using Iterable, we export directly to templates and snippets (not just HTML you have to rebuild in their editor).
Emailify exports basic HTML to both platforms. You're on your own for the rest.
**Cost comparison**: Email Love Growth is $59/month vs $49/month for Emailify Pro. The extra \$10 buys the integration depth that saves your team hours per campaign.
***
### You're Managing Multiple Designers
Your team needs a single source of truth. With Email Love's built-in design system library, everyone accesses the same components. Update your button style once, it changes everywhere. No more "which file has the latest version?"
With Emailify, your components live in separate Figma files. Good luck keeping everyone in sync.
**For a team of 5**: One shared design system keeps everyone aligned. No more version chaos.
***
### You Want AI to Do the Boring Stuff
AI Studio reads your campaign brief and generates the first draft using your design system. You start at 70% done instead of staring at a blank canvas.
**Cost**: Included in every plan, with monthly allowances by tier. Growth (\$59/month) includes 20 AI Imports and 20 generated emails per month.
**Emailify's AI features**: None.
***
### You're an Enterprise Team That Needs Real Support
We build you a custom design system (50 components), train your team how to use it, and give you ongoing Slack and Zoom access to our team. We've been doing email marketing for 15+ years. We know this stuff.
Emailify gives you help documentation and customer support.
We're not just selling software. We're making sure you succeed.
***
## When Emailify Might Be a Better Fit
Look, I'm going to be honest with you (because that's how I'd want someone to treat me).
Emailify might work better if you:
* Want a huge library of pre-built templates (they have 100+, we have hundreds of templates and components)
* Need their Pro Bundle with access to 12 different Figma plugins for \$99/month
* Don't need AI features or advanced ESP functionality
* Prefer unlimited platform integrations (even if they're just basic HTML export)
But here's what you'd be giving up:
* A free plan and a $19/month Starter tier (Emailify starts at $49/user/month)
* Enterprise-grade ESP integrations (Iterable templates, Braze content blocks)
* Built-in design system library that keeps your team in sync
* AI-powered email creation
* Expert support and custom design system service
* Access to a team with 15+ years of email marketing experience
***
## What Our Customers Say
**100+ designers and marketers trust Email Love**
![Marquee of customer logos from teams that use Email Love]()
***
## Questions People Ask
**What's the main difference between Email Love and Emailify?**
Emailify offers unlimited HTML export to all platforms with 100+ templates for $49/month per user. Email Love goes deeper with enterprise-grade ESP integrations (like Iterable templates and Braze content blocks), a built-in design system library, and AI-powered features for $59/month on the Growth plan. You can also start free with 5 HTML exports per month, or pay \$19/month for Starter.
***
**Which plugin is cheaper?**
It depends on what you need. Email Love starts free (5 HTML exports per month), and Starter is $19/month vs Emailify Pro at $49/month. If you need unlimited exports, Email Love Growth is $59/month, $10 more than Emailify Pro, and it includes AI Studio, deep ESP integrations, and a shared design system library.
***
**Does Email Love support as many platforms as Emailify?**
We support fewer platforms (HubSpot, Klaviyo, Iterable, Braze, [Customer.io](http://Customer.io), SFMC, Loops, MoEngage, Blueshift, OneSignal) but our integrations go much deeper. For example, our Iterable integration includes template and snippet support, not just HTML export. Our Braze integration auto-generates localization tags. Emailify gives you unlimited platform integrations but only exports basic HTML.
***
**Can I migrate from Emailify to Email Love?**
Yep. Your Figma designs will work fine. You get deeper ESP integrations, AI features, and our built-in design system library.
***
**What are the AI features?**
AI Studio generates email designs from campaign briefs using your design system. Upload a brief and get a first draft that's already on-brand.
Emailify doesn't offer AI features.
***
**Which plugin is better for teams using Braze or Iterable?**
Email Love, hands down. We built specific features for these platforms (auto-localization for Braze, template/snippet support for Iterable) that Emailify doesn't offer.
***
**Do I need the Enterprise plan to get good support?**
Nope. We offer expert support at every tier. Enterprise customers get Slack/Zoom access, custom design systems, and hands-on training. But everyone gets help when they need it
***
**What if I need more than just an email plugin?**
Emailify offers a Pro Bundle at \$99/month that includes 12 different Figma plugins. If you need multiple plugins beyond just email, that might make sense for you. We focus specifically on making the best email design and production tool possible.
***
## Ready to Try Email Love?
**Better features. Smarter emails.**
Join 100+ teams who chose enterprise-grade integrations and AI-powered design.
**\[Get Started Free]**
**\[Talk to Our Team About Enterprise]**
✓ 5 free HTML exports per month
✓ No credit card required
✓ No sales call, cancel any time
✓ AI Studio included
✓ Expert support at every tier
***
**Questions? We're here to help.**
Email us at [support@emaillove.com](mailto:support@emaillove.com) or schedule a demo to see Email Love in action.
# Email Love, a powerful Knak alternative
Source: https://help.emaillove.com/plugin/comparisons/knak
Compare Email Love and Knak for enterprise email creation: Figma-native design vs marketing automation platform integration, with pricing, features, and team workflow differences
**If your team lives in Marketo, Eloqua, or Salesforce Marketing Cloud and needs enterprise governance for email production at scale, Knak is built for that world. But if your team designs in Figma and wants pixel-perfect emails with modern ESP integrations, AI-powered email generation, and transparent pricing, Email Love is the better fit.**
## Quick Comparison
| | Email Love | Knak |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
| **Approach** | Figma plugin: design and export from your existing tool | Standalone platform: browser-based email and landing page builder |
| **Best For** | Design-forward teams using Figma | Enterprise marketing ops teams on Marketo/Eloqua/SFMC |
| **ESP Integrations** | Deep integrations with Braze, Iterable, Klaviyo, [Customer.io](http://Customer.io), HubSpot, SFMC, Loops, MoEngage, Blueshift, OneSignal + HTML export | Deep integrations with Marketo, Eloqua, SFMC, Pardot, HubSpot, Acoustic |
| **AI Features** | AI Studio (generates emails from briefs) | AI translation (75+ languages), AI subject line generation |
| **Pricing** | Free plan, then from \$19/user/mo (transparent) | Enterprise-only, starts \~\$10,000+/year (no public pricing) |
| **Team Size** | Pay per user | Built for 50–500+ users |
| **Learning Curve** | If you know Figma, you know Email Love | Platform-specific training required |
***
## Two Very Different Worlds
Knak and Email Love serve different types of marketing organizations, and the right choice depends on where your team's workflow centers.
Knak was built for enterprise marketing operations teams, the kind that run Marketo, Oracle Eloqua, or Salesforce Marketing Cloud as their core platform. It solves the problem of getting emails and landing pages created and approved within those ecosystems without needing a developer. Knak integrates deeply with marketing automation platforms (MAPs), offering native sync that pushes finished emails directly into your MAP's asset library.
Email Love takes a fundamentally different approach. Instead of building another standalone platform, it meets design teams where they already work: Figma. Your designers use their existing tools, component libraries, and design systems to create emails, then export production-ready code to modern ESPs. There's no new platform to learn, no separate login, and no workflow disruption.
***
## Why Teams Choose Email Love Over Knak
### Design Without Limits
Knak provides a drag-and-drop builder with brand-locked templates. While this works well for ensuring consistency across large teams, it constrains what designers can create. Every email must fit within the builder's component system.
With Email Love, your Figma canvas is your email canvas. Designers have complete creative control (custom layouts, unique components, complex visual hierarchies), all while the plugin handles the underlying MJML code that ensures everything renders correctly across email clients.
### Transparent, Accessible Pricing
Knak's enterprise-only model means no public pricing and minimum contracts typically starting around \$10,000 per year. That's a significant commitment before you've sent a single email.
Email Love starts free with 5 HTML exports per month. Paid plans run $19 per user per month for Starter (10 HTML exports per month) or $59 per user per month for Growth (unlimited exports). There are no seat minimums on those plans, no annual commitments required, and no sales calls needed to get started. Cancel any time.
### Modern ESP Integrations
Knak's strength is legacy MAP integration: Marketo, Eloqua, SFMC, Pardot. If your tech stack centers on those platforms, that's valuable. But if your team uses modern ESPs like Braze, Iterable, Klaviyo, [Customer.io](http://Customer.io), SFMC, Loops, MoEngage, Blueshift, or OneSignal, Knak's integration story is thinner.
Email Love offers deep integrations with the ESPs that modern lifecycle marketing teams actually use. For Braze, that means automatic localization variant creation and content block sync. For Iterable, it means template and snippet management. These aren't just "export HTML" connections. They understand each platform's native features.
### AI That Speeds Up Email Production
Knak's AI focuses on translation and subject line generation, useful for global teams.
Email Love's AI Studio will generate complete email designs from campaign briefs using your design system components. Not generic templates, but emails that look like your brand from the first draft.
### No New Platform to Learn
Knak requires your team to learn a new interface, new workflows, and new collaboration patterns. That's training time, onboarding costs, and the inevitable friction of context-switching between your design tools and your email tool.
Email Love lives inside Figma. If your team already uses Figma (and most modern design teams do), the learning curve is minimal. Your existing Figma skills, shortcuts, and workflows all apply.
***
## Full Feature Breakdown
| Feature | Email Love | Knak |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| **Design Environment** | Figma (your existing tool) | Proprietary browser-based builder |
| **Template Library** | Hundreds of templates and components | 21,000+ templates and modules |
| **Drag-and-Drop Builder** | No, uses Figma's native tools | Yes, core interface |
| **Landing Page Builder** | No, email-focused | Yes, included |
| **Brand Governance** | Figma design systems + component locking | Brand-locked templates, approval workflows |
| **Approval Workflows** | Via Figma's native collaboration | Multi-stage with audit trails |
| **AI Features** | AI Studio | Translation (75+ languages), subject lines |
| **Responsive Email** | Automatic (MJML-powered) | Automatic (built-in responsive) |
| **Dark Mode Preview** | Yes, built into preview | Yes, built into preview |
| **MAP Integration** | Limited, modern ESPs focus | Deep: Marketo, Eloqua, SFMC, Pardot |
| **Modern ESP Integration** | Deep: Braze, Iterable, Klaviyo, [Customer.io](http://Customer.io), HubSpot, SFMC, Loops, MoEngage, Blueshift, OneSignal | Limited |
| **Localization** | Via Braze integration (automatic variants) | AI-powered (75+ languages) |
| **Collaboration** | Figma's real-time collaboration | Built-in with role-based access |
| **Analytics** | N/A, design and export tool | Campaign-level performance dashboards |
| **Custom Code Access** | Full HTML/MJML access + Raw Code component | Limited, primarily no-code |
***
## Pricing Comparison
### Email Love
* **Free**: \$0. 5 HTML exports per month, 100+ pre-built components, 1 AI Import per month
* **Starter**: \$19/user/month. 10 HTML exports per month, 1 design system, 10 AI Imports per month
* **Growth**: \$59/user/month. Unlimited HTML exports, 5 shared design systems, 20 AI Imports per month
* **Professional**: \$1,788/user/year (annual only, minimum 3 users). Unlimited HTML exports, unlimited design systems, unlimited AI Imports
* **Enterprise**: Custom pricing. Custom design system (up to 100 components), team training, dedicated Slack support
### Knak
* **No public pricing**: enterprise sales process required
* **Estimated starting point**: \~\$10,000+/year
* **Typical contracts**: Annual, multi-year available
* **Implementation**: Onboarding and training included
***
## When Email Love Makes Sense
* **Your design team uses Figma** and you want email creation to live in the same tool as your other design work
* **You use modern ESPs** like Braze, Iterable, Klaviyo, [Customer.io](http://Customer.io), SFMC, Loops, MoEngage, Blueshift, or OneSignal
* **You want transparent pricing** without enterprise sales cycles
* **You value design freedom** over template-locked governance
## When Knak Might Be Better
* **Your tech stack centers on Marketo, Eloqua, or SFMC.** Knak's MAP integrations are best-in-class for those platforms
* **You need landing pages too.** Knak includes a landing page builder, Email Love is email-focused
* **You have 50+ marketers creating emails** and need enterprise governance with multi-stage approvals and audit trails
* **Translation at scale is critical.** Knak's AI translation supports 75+ languages natively
* **Your team doesn't use Figma.** Knak's standalone builder doesn't require any design tool
* **You need campaign analytics.** Knak includes performance dashboards, Email Love is a design and export tool
***
## Frequently Asked Questions
**Can Email Love integrate with Marketo or Eloqua?**
Email Love exports clean HTML that can be pasted into any ESP or MAP, including Marketo and Eloqua. However, it doesn't offer the native sync that Knak provides for those platforms. If native MAP integration is a requirement, Knak may be the better fit.
**Does Knak work with Figma?**
No. Knak is a standalone browser-based platform with its own design interface. Teams that want to design in Figma would need to recreate their designs inside Knak's builder.
**Can Email Love handle enterprise approval workflows?**
Email Love leverages Figma's built-in collaboration features: comments, version history, and sharing permissions. For teams that need formal multi-stage approval workflows with audit trails, Knak's governance features are more robust.
**How does localization work in Email Love vs Knak?**
Email Love supports localization through its Braze integration, which automatically creates localized variants. Knak handles localization natively with AI-powered translation across 75+ languages. For teams with heavy localization needs across many markets, Knak's approach is more comprehensive.
**Is Email Love too small for enterprise teams?**
No. Email Love offers enterprise plans with custom onboarding, training, and design system creation. The difference is that Email Love's enterprise offering focuses on design excellence and ESP integration, while Knak's focuses on governance and MAP integration.
**What if we currently use Knak but want to switch?**
Email Love's team offers migration support for enterprise customers. Since your existing email designs can be rebuilt in Figma and exported through the plugin, there's a clear path. The main consideration is whether your ESP integrations are supported. Check Email Love's integration list to confirm.
***
## Ready to Try Email Love?
Install the Email Love Figma plugin and see how Figma-native email design compares to standalone platforms. Start with the free plan and export your first email in minutes.
→ [Get the Email Love Figma Plugin](https://www.figma.com/community/plugin/1387891288648822744/email-love-html-email-builder)
# Email Love vs Marka: Which Figma Plugin is Right for Your Team?
Source: https://help.emaillove.com/plugin/comparisons/marka
How Email Love compares to Marka on team collaboration, ESP integrations, AI features, and pricing for teams
**Marka is a solid choice for freelance designers who want beautiful templates. Email Love is built for marketing teams who need shared design systems, deep ESP integrations, and AI features that scale across multiple designers.**
Here's an honest breakdown of how they compare.
***
**The Quick Comparison**
| | **Email Love** | **Marka** |
| ------------------------- | ---------------------------------------------- | ----------------------------------- |
| **Built For** | Marketing teams & agencies | Freelance designers & solo creators |
| **Starting Price** | Free (Starter: \$19/user/month) | Free (Pro: \$36/month) |
| **ESP Integration Depth** | Deep (templates, snippets, localization) | Basic HTML export |
| **Design System Storage** | ✅ Shared across team, organized by type | ❌ Local per user, can't share |
| **AI Features** | ✅ AI Studio | ❌ None |
| **Enterprise Support** | ✅ Custom design system + training + Slack/Zoom | ❌ Only basic template services |
| **Templates/Components** | Hundreds of templates and components | 100+ templates |
## Why Marketing Teams Choose Email Love
### Teams Need Shared Design Systems (Not Local Libraries)
Here's where Marka falls apart for marketing teams:
Each designer saves components to their own local library. Designer A creates a button on Monday. Designer B creates a slightly different button on Tuesday. Designer C has no idea which one to use on Wednesday. By the end of the month, you have three versions of "the button" with no way to share or organize them.
**Email Love is different.** Your design system lives in one place inside the plugin, organized by component type. Every designer sees the same library. Update a button once, everyone gets it automatically.
No more "which file has the latest components?" No version control chaos. No duplicate work.
***
### Marketing Teams Need ESP Integrations (Not Just HTML)
**For Iterable users:** We export directly to templates and snippets. Not HTML your email ops team rebuilds manually. Actual Iterable templates they deploy immediately.
**For Braze users:** We auto-generate localization tags with unique IDs. Translating into 20+ languages? This saves 10+ hours per campaign. No more manually wrapping copy in translation tags at 11pm before launch.
**Marka exports clean HTML.** Great if you're a freelancer handing off to clients. Not enough if you're a team scaling production in Braze or Iterable.
***
### High-Volume Teams Need AI
Shipping 2-3 emails per month? You don't need AI.
Shipping 20-30 emails per month across campaigns, launches, and segments? AI becomes essential.
**AI Studio** reads campaign briefs from Monday, Asana, or Notion and generates first drafts using your design system. Your designer starts at 70% done. A 3-hour project becomes 45 minutes.
Marka doesn't have AI features.
***
### Enterprise Teams Need More Than Documentation
**Email Love Enterprise includes:**
* Custom design system built for your brand (50 components)
* Hands-on training for your entire team
* Ongoing Slack and Zoom support
* 15+ years of email marketing expertise
**Marka offers:** Custom template services and documentation. No enterprise plan, no team training, no dedicated support.
We've onboarded teams at Hatch, CNN, Eargo, and Bilt. We know what marketing teams need.
***
## The Full Feature Breakdown
| **Feature Category** | **Email Love** | **Marka** |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| **Pricing** | Free: $0
Starter: $19/user/mo
Growth: $59/user/mo
Professional: $1,788/user/yr (annual only, 3+ users)
Enterprise: Custom | Free (limited exports)
Pro: \$36/mo (unlimited exports, image hosting) |
| **Best For** | Marketing teams & agencies | Freelance designers |
| **Export Limits** | Free: 5/mo
Starter: 10/mo
Growth: Unlimited | Starter: 10/mo
Pro: Unlimited |
| **ESP Integrations** | HubSpot, Klaviyo, Iterable (templates + snippets), Braze (localization + content blocks), [Customer.io](http://customer.io/), SFMC, Loops, MoEngage, Blueshift, OneSignal | Klaviyo, Mailchimp, HubSpot (basic HTML) |
| **Integration Depth** | ✅ Deep integrations with advanced features (templates, snippets, content blocks, localization) | ❌ Basic HTML export to all platforms |
| **Design System Storage** | ✅ Shared across team, organized by type, works in all files | ❌ Local per user, can't share, no organization |
| **Templates Included** | Hundreds of templates and components | 100+ free templates |
| **AI Features** | ✅ AI Studio (brief to email) | ❌ None |
| **Mobile Optimization** | ✅ Responsive overrides | ✅ Responsive overrides |
| **Dark Mode** | ✅ Preview with custom overrides | ✅ Preview with custom overrides |
| **Custom Code** | ✅ Raw code component | ✅ Raw code component |
| **Localization** | ✅ Auto-tags for Braze, Smartling, Lokalise, Crowdin integration | ❌ None |
| **Image Hosting** | ✅ Included | ✅ Included |
| **Team Collaboration** | ✅ Shared design system library | Standard Figma collaboration |
| **Enterprise Onboarding** | ✅ Custom design system
✅ Team training
✅ Slack/Zoom support | Marka does offer some light weight template building services, but no in-depth training or support. |
| **Support Level** | Expert support at all tiers | Customer support included |
| **Custom Design System Service** | ✅ Services to help your build a custom email design system. | ❌ Not offered |
## When to Choose Each Plugin
### Choose Email Love if you're:
✅ **A marketing team** with multiple designers who need to share components
✅ **An agency** managing email production for multiple clients
✅ **Using Braze or Iterable** and need templates, snippets, or localization
✅ **Shipping high volume** (20+ emails per month) and need AI to speed up production
✅ **Managing brand consistency** across designers, campaigns, and time zones
✅ **An enterprise team** that needs training, onboarding, and dedicated support
✅ **Scaling email production** beyond what one designer can handle
**Bottom line**: If "team collaboration" or "brand consistency" matters to you, Email Love is built for this. Marka isn't.
***
### Choose Marka if you're:
✅ **A freelance designer** working solo on client projects
✅ **Sending 1-10 emails per month** (their free tier is hard to beat for basic needs)
✅ **A design purist** who loves Auto Layout and wants Responsive + Breakpoints control
✅ **Looking for beautiful template inspiration** from their custom studio
✅ **Focused on Gmail optimization** (their minify HTML feature is useful)
✅ **Don't need team collaboration** or ESP integrations
✅ **Comfortable with self-service** (documentation vs hands-on support)
**Bottom line**: If you're a solo freelancer shipping low volume to various clients, Marka's approach and pricing make sense.
***
## Pricing: What Makes Sense for Teams
### Solo Designer or Freelancer
**Email Love Starter**: \$19/month (10 exports per month, team features you won't use)
**Marka Pro**: \$36/month (unlimited exports, image hosting)
**Winner**: Email Love. \$17/month cheaper with deeper ESP integrations and AI features.
***
### Marketing Team of 3 Designers
**Email Love Growth**: $177/month ($59 x 3)
* Unlimited exports for everyone
* One shared design system
* AI features for all
* Deep ESP integrations
**Marka Pro**: $108/month ($36 x 3)
* Unlimited exports per person
* Three separate, disconnected libraries
* No AI features
* Basic HTML export
**Winner**: Email Love, if collaboration matters. Marka Pro is \$69/month less, but it buys three disconnected libraries. Email Love gives the team one shared design system, AI features, and deep ESP integrations, so you actually function as a team instead of three solo designers working in silos.
***
### Marketing Team of 8 Designers
**Email Love Growth**: $472/month ($59 x 8)
**Marka Pro**: $288/month ($36 x 8)
Marka Pro is \$184/month less at this size, but with Email Love you get:
* One design system vs eight disconnected libraries
* Unlimited exports
* AI features that save hours per designer per week
* ESP integrations that save your email ops team 10+ hours per campaign
**Winner**: Email Love. At team scale, the collaboration features aren't nice-to-have. They're essential.
***
## Real Talk: Why Teams Need Different Tools Than Freelancers
I've been in email marketing for 15+ years. I've seen what happens when teams try to scale using tools built for solo designers.
**Here's the problem with Marka for teams:**
Both Email Love and Marka let you save components inside the plugin. But there's a critical difference:
**With Marka:** Components are saved locally to each designer's plugin. Designer A saves a button to their plugin on Monday. Designer B can't see it. They save their own slightly different button on Tuesday. Designer C joins on Wednesday and has no idea either version exists. They create a third button.
Plus, there's no way to organize components by type. When you have 50+ components saved, finding the right one becomes a mess.
**With Email Love:** Components are saved to a shared library inside the plugin. Every team member sees the same components, organized by type (buttons, headers, footers, CTAs). Designer A saves a button on Monday. Designer B and Designer C both see it immediately in their plugin. One button. One source of truth.
**The result?**
After 3 months with Marka, a 3-person team has:
* 3 separate component libraries nobody else can access
* Multiple versions of the same component floating around
* No way to organize or find components efficiently
* Spent $324 ($36 x 3 people x 3 months) on a tool that doesn't enable collaboration
After 3 months with Email Love, that same team has:
* 1 shared design system everyone accesses
* Components organized by type
* Brand consistency across all designers
* Spent $531 ($59 x 3 people x 3 months) on a tool built for team collaboration
Email Love costs $207 more over those three months ($531 vs \$324). What that buys is one shared design system, AI features, and deep ESP integrations instead of three silos.
**This isn't a failure of the team. It's using the wrong tool.**
Marka is great at what it does. It's a well-designed plugin for Auto Layout-focused freelancers working solo.
But marketing teams aren't solo designers. They're 3-10 people who need to share components, maintain brand consistency, integrate with ESPs, and ship volume efficiently.
That's why we built Email Love.
***
## What Our Customers Say
![Marquee of customer logos from teams that use Email Love]()
***
## Common Questions
**Can freelancers use Email Love?**
Absolutely. If you need ESP integrations (Iterable templates, Braze localization) or AI features, Email Love makes sense even as a solo designer. If you're shipping low volume and just need basic HTML, both tools have free tiers: Marka's free plan or Email Love's free plan with 5 HTML exports per month.
***
**Why can't Marka's components be shared across a team?**
Each user's component library is saved locally in their version of the plugin. This works great for freelancers. It breaks down for teams who need one shared source of truth that everyone can access.
***
**What if our team is only 2 people right now?**
If you plan to grow (or already struggle with version control between 2 people), start with Email Love. The shared design system works from day one. If you're staying at 2 people forever and don't need ESP integrations, Marka might work.
***
**Does Marka have team features we're missing?**
No. Their component library can't be shared across users and can't be organized by type. They don't have an enterprise plan. Their HTML import feature doesn't work well. They're built for solo designers, and that's okay.
***
**Can we migrate from Marka to Email Love?**
Not directly. Email Love uses MJML and Marka has its own layer structure, so the two plugins aren't compatible. If you want to switch from Marka to Email Love, you'll need to rebuild your templates. The good news: once you rebuild them in Email Love, you get a shared design system, ESP integrations, and AI features.
***
**What if we don't use Braze or Iterable?**
We also support HubSpot, Klaviyo, [Customer.io](http://Customer.io), SFMC, Loops, MoEngage, Blueshift, and OneSignal with deeper integrations. Even if you're just using basic platforms, the shared design system and AI features still make Email Love valuable for teams.
***
**Is Marka a bad plugin?**
Not at all. It's a good plugin built for freelance designers. We're just being honest that it's not built for team collaboration. That's not a criticism. It's just a different use case.
***
## Ready to See the Difference?
**Built for teams. Scales with growth. Actually works for collaboration.**
Join 100+ marketing teams who chose shared design systems over local component libraries.
[**Get Started**](https://www.figma.com/community/plugin/1387891288648822744/email-love-html-email-builder)
[**Schedule a Demo**](https://calendar.notion.so/meet/matthayes/matthayes)
✓ 5 free HTML exports per month
✓ No credit card required
✓ See the shared design system in action
✓ Test AI Studio with your team
✓ Export to your actual ESP
***
**Questions about team collaboration features?**
Email us at [support@emaillove.com](mailto:support@emaillove.com) or schedule a demo. We'll show you exactly how the shared design system works and why it matters for teams.
# Email Love, a powerful Stripo alternative
Source: https://help.emaillove.com/plugin/comparisons/stripo
How Email Love compares to Stripo on design workflow, ESP integrations, AI features, and pricing
**Both tools help you create production-ready email HTML. But Email Love keeps designers in Figma with deeper ESP integrations, while Stripo is a standalone browser-based builder with a massive template library. Here's how they actually compare.**
***
## The Quick Comparison
| | **Email Love** | **Stripo** |
| ------------------------- | ---------------------------------------------- | ----------------------------------- |
| **Platform Type** | Figma plugin | Standalone web app |
| **Starting Price** | $0 (free plan) / $19/user/month (Starter) | $0 (free tier) / $20/month (Basic) |
| **Template Library** | Hundreds of templates and components | 1,600+ pre-built templates |
| **ESP Integration Depth** | Deep (templates, snippets, localization) | 80+ ESPs, one-click export |
| **AI Features** | ✅ AI Studio | ✅ AI Hub (content + subject lines) |
| **Design System Storage** | ✅ Built into plugin | Brand Kit (colors, fonts, paddings) |
| **Enterprise Support** | ✅ Custom design system + training + Slack/Zoom | Self-hosted enterprise option |
## The Fundamental Difference
Stripo is a standalone email builder you open in your browser. Email Love is a plugin that lives inside Figma.
This isn't a small distinction. It shapes everything about how your team works.
If your designers already work in Figma for web, mobile, and brand design, Email Love means they never leave their primary tool. Email design lives alongside your web components, brand assets, and design tokens. One design system, one tool, one source of truth.
Stripo requires your team to context-switch to a separate platform. Your email design system lives in Stripo's Brand Kit, disconnected from the Figma files where the rest of your brand lives. Every time you update a brand color or font in Figma, you need to manually update Stripo too.
***
## Why Teams Choose Email Love Over Stripo
### Your Design System Stays in One Place
With Email Love, your email components are Figma components. They sit alongside your web components, your mobile components, and your brand guidelines. Update a button style in Figma, and it flows into your email designs automatically.
Stripo's Brand Kit stores fonts, colors, paddings, and button styles separately from your design tool. It's a parallel system you have to keep in sync manually. For teams that take design systems seriously, that's a dealbreaker.
***
### Deeper ESP Integrations Where It Matters
Stripo integrates with 80+ platforms, more than Email Love's focused list. But breadth isn't depth.
Stripo's integrations are one-click HTML exports. You get clean code pushed to your ESP, and that's it.
Email Love's integrations go further. Our **Iterable integration** exports directly to templates AND snippets. Design a reusable header, export it as a snippet, and your team can drop it into any Iterable campaign without touching Figma again.
Our **Braze integration** auto-generates localization tags with unique IDs and supports content blocks. If you're translating emails into 20+ languages, this saves 10+ hours per campaign.
If you just need basic HTML export to dozens of platforms, Stripo's breadth wins. If you're using Braze, Iterable, Klaviyo, HubSpot, [Customer.io](http://Customer.io), Loops, or MoEngage and want integrations that actually leverage their advanced features, Email Love wins.
***
### AI That Designs Emails, Not Just Writes Copy
Both platforms have AI features, but they solve different problems.
Stripo's AI Hub generates subject lines, writes email copy, and helps outline email structures. It's useful for content creation.
Email Love's **AI Studio** turns campaign briefs into full email designs using YOUR design system. Upload a brief and AI reads the requirements and generates a first draft that's already on-brand.
Stripo helps you write email content. Email Love generates complete email designs from your design system, a fundamentally different approach.
***
### Enterprise Support That Actually Sets You Up
Stripo's Enterprise plan offers self-hosting, white-labeling, and custom block creation. It's designed for companies that want to run Stripo on their own servers.
Email Love's Enterprise offering is different. We build you a custom design system (50 components) tailored to your brand, train your team, and provide ongoing Slack and Zoom support. We've been doing email marketing for 15+ years and have shipped 10,000+ emails for brands like Hatch, Eargo, Bilt, and CNN.
Stripo gives you infrastructure. We give you expertise.
***
## The Full Feature Breakdown
| **Feature** | **Email Love** | **Stripo** |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| **Platform** | Figma plugin | Standalone web app |
| **Pricing** | Free: $0, Starter: $19/user/mo, Growth: $59/user/mo, Professional: $1,788/user/yr (annual only, 3+ users), Enterprise: Custom | Free: $0, Basic: $20/mo, Medium: $45/mo (3 users), Pro: $95/mo (10 users), Enterprise: Custom |
| **Export Limits** | Free: 5/mo, Starter: 10/mo, Growth: Unlimited | Free: Limited, Basic: 50/mo, Medium: 300/mo, Pro: 900/mo |
| **ESP Integrations** | HubSpot, Klaviyo, Iterable, Braze, [Customer.io](http://Customer.io), SFMC, Loops, MoEngage, Blueshift, OneSignal | 80+ ESPs including Braze, Iterable, Klaviyo, HubSpot, Mailchimp, SendGrid, Campaign Monitor, and more |
| **Integration Depth** | ✅ Deep (Iterable templates/snippets, Braze content blocks/localization) | One-click HTML export to all platforms |
| **Templates** | Hundreds of templates and components | 1,600+ pre-built templates |
| **Design System** | ✅ Built into Figma (shared with web/mobile) | Brand Kit (separate from design tools) |
| **AI Features** | ✅ AI Studio (brief-to-email) | ✅ AI Hub (content generation, subject lines, structure) |
| **AMP Email** | ❌ Not supported | ✅ AMP carousel, accordion, forms |
| **Code Editor** | ✅ Raw code component for custom HTML | ✅ Full HTML/CSS editor alongside visual builder |
| **Real-time Collaboration** | Via Figma's collaboration tools | ✅ Built-in Google Docs-style editing |
| **Synchronized Modules** | Via Figma component instances | ✅ Update one module, all emails using it update automatically |
| **Mobile Optimization** | ✅ Responsive overrides via Mobile Styles tab | ✅ Mobile-responsive by default with mobile preview |
| **Dark Mode** | ✅ Preview with custom overrides | ✅ Dark mode toggle with custom CSS |
| **Localization** | ✅ Auto-tags for Braze, Smartling, Lokalise, Crowdin | Google Translate integration, custom translations |
| **Image Hosting** | ✅ Included (Email Love CDN) | ✅ Included (AWS, Azure, Cloudinary options) |
| **Email Testing** | Built-in preview (desktop, mobile, dark mode) | ✅ 90+ device testing built-in |
| **Enterprise** | Custom design system + training + Slack/Zoom support | Self-hosted deployment + white-labeling + custom blocks |
## When Email Love Makes Sense
### Your Designers Live in Figma
If your team designs in Figma for web, mobile, and email, Email Love means email is just another output from the same design system. No context-switching, no parallel brand management, no "which tool has the latest button style?" One source of truth.
### You're Using Braze, Iterable, or [Customer.io](http://Customer.io)
Our integrations with these platforms go beyond HTML export. Iterable templates and snippets, Braze content blocks and localization tags, [Customer.io](http://Customer.io) direct push. These features save hours per campaign that Stripo's one-click export can't match.
### You Want AI That Generates Complete Emails
AI Studio turns campaign briefs into full email designs using your design system, a fundamentally different approach than Stripo's content generation. While Stripo's AI Hub helps write copy and subject lines, Email Love's AI creates the actual email design, getting you to 70% done before you start tweaking.
### You're an Enterprise Team That Needs Hands-On Support
We build you a custom design system, train your team, and provide ongoing support. 15+ years of email expertise, not just software.
***
## When Stripo Might Be a Better Fit
Let's be honest about where Stripo wins.
Stripo might work better if you:
* **Don't use Figma.** If your team doesn't design in Figma, Stripo's standalone editor eliminates the need for a design tool entirely
* **Need a massive template library.** 1,600+ templates vs. our hundreds of templates and components. If you want to start from pre-built designs rather than building from a design system, Stripo has more options
* **Want AMP email support.** Stripo offers interactive AMP elements (carousels, accordions, forms) that we don't currently support
* **Need 80+ ESP integrations.** If you use niche ESPs like Mailmodo, MailJet, or Constant Contact, Stripo covers more platforms
* **Want built-in email testing across 90+ devices.** Stripo's testing is more comprehensive than our preview feature
* **Prefer per-account pricing.** Stripo's Medium plan gives you 3 users for \$45/month. Email Love charges per user.
But here's what you'd give up: a unified design system in Figma, deep ESP integrations that leverage platform-specific features, AI-powered design creation, and access to a team with 15+ years of email marketing expertise.
***
## Questions People Ask
**What's the main difference between Email Love and Stripo?**
Email Love is a Figma plugin. Your email design lives alongside your web and mobile design in one tool. Stripo is a standalone web app with its own editor. The core question is whether your team wants to stay in Figma or use a separate tool for email.
***
**Which has more templates?**
Stripo has 1,600+ pre-built templates. Email Love has hundreds of templates and components you combine to create emails. Our approach is more design-system-oriented: fewer starting templates, but each component is structured for reuse and customization.
***
**Which is cheaper?**
Both tools have free tiers. Stripo's paid plans start at $20/month for one user, and Email Love's start at $19/user/month. For a single user, they're comparable. For small teams, Stripo's Medium plan (\$45/month for 3 users) can be cheaper than Email Love's per-user pricing. For larger teams, it depends on the plan.
***
**Does Email Love support AMP emails?**
Not currently. If AMP email (interactive forms, carousels, accordions inside the email) is critical to your strategy, Stripo is the stronger choice for that feature.
***
**Can I migrate from Stripo to Email Love?**
Yes. Your email designs will need to be recreated in Figma, but your brand assets and design system can be set up in the plugin. If you're already using Figma for other design work, the transition is straightforward.
***
**Which has better AI features?**
Both have AI, but they solve different problems. Stripo's AI Hub focuses on content generation (subject lines, copy, structure). Email Love's AI Studio generates full email designs from campaign briefs using your design system.
***
## Ready to Try Email Love?
**Stay in Figma. Ship better emails.**
Join teams who chose deep ESP integrations, AI-powered quality assurance, and a unified design system over a separate email tool.
**\[Get Started Free]**
**\[Talk to Our Team About Enterprise]**
✓ No credit card required
✓ 5 free HTML exports per month
✓ AI Studio included
✓ Expert support at every tier
✓ Deep Braze, Iterable, Klaviyo integrations
***
**Questions? We're here to help.**
Email us at [support@emaillove.com](mailto:support@emaillove.com) or schedule a demo to see Email Love in action.
# Email Love, a powerful Taxi for Email alternative
Source: https://help.emaillove.com/plugin/comparisons/taxi-for-email
Compare Email Love and Taxi for Email for enterprise email production: Figma-native design vs modular platform with guardrails for non-designers, localization, and enterprise governance
**If your organization needs a platform where non-designers can safely create on-brand emails within strict guardrails, Taxi for Email was built for exactly that. But if your team designs in Figma and wants complete creative control, modern ESP integrations, AI-powered email generation, and transparent pricing, Email Love is the stronger choice.**
## Quick Comparison
| | Email Love | Taxi for Email |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
| **Approach** | Figma plugin: design and export from your existing tool | Standalone platform: modular email builder with guardrails |
| **Best For** | Design-forward teams using Figma | Enterprise teams enabling non-designers to create on-brand emails |
| **ESP Integrations** | Deep integrations with Braze, Iterable, Klaviyo, [Customer.io](http://Customer.io), HubSpot, SFMC, Loops, MoEngage, Blueshift, OneSignal + HTML export | 20+ connectors: Braze, Klaviyo, Iterable, Mailchimp, SFMC, Marketo, and others |
| **AI Features** | AI Studio (generates emails from briefs) | None currently |
| **Pricing** | Free plan, then from \$19/user/mo (transparent) | Enterprise-only (no public pricing) |
| **Markup System** | MJML (open-source standard) | Taxi Syntax (proprietary) |
| **Learning Curve** | If you know Figma, you know Email Love | Requires learning Taxi Syntax for template builders |
***
## Different Problems, Different Solutions
Taxi for Email and Email Love solve fundamentally different organizational challenges.
Taxi for Email (now part of Bird, following SparkPost's acquisition) is an enterprise modular email platform designed to empower non-designers. The core idea: developers and designers build master templates with strict guardrails using Taxi Syntax (a proprietary markup language), then marketers and content creators populate those templates without the ability to break the design. It's a governance-first approach: control who can change what, where, and how.
Email Love takes a different angle entirely. It's a Figma plugin that gives design teams full creative control over email creation. Instead of building guardrails to limit what non-designers can do, Email Love gives designers the power to create exactly what they envision, then exports production-ready code. The assumption is different: skilled designers should drive email design, using the professional tool they already know.
***
## Why Teams Choose Email Love Over Taxi for Email
### AI-Powered Email Generation
This is perhaps the biggest gap between the two tools. Taxi for Email has no AI features. Email creation relies entirely on manual template building and content population.
Email Love's AI Studio will generate complete email designs from campaign briefs using your design system components, a capability Taxi simply doesn't offer.
### No Proprietary Markup Language
Taxi for Email requires template builders to learn Taxi Syntax, a proprietary markup system for creating modular templates with editable regions. It's powerful for defining guardrails, but it locks your templates into Taxi's ecosystem. If you ever want to switch tools, your templates don't come with you.
Email Love uses MJML, an open-source email framework. Your code is portable, well-documented, and backed by a large developer community.
### Transparent Pricing
Taxi for Email follows an enterprise-only sales model with no public pricing. Based on the market, enterprise email platforms in this category typically start at \$10,000+ per year.
Email Love starts free with 5 HTML exports per month, and paid plans start at \$19 per user per month. Your team can start building emails today without a sales call, procurement process, or annual commitment, and you can cancel any time.
### Design-First vs. Governance-First
Taxi's guardrail system is its core value proposition: lock down what non-designers can change, ensuring brand consistency even when dozens of marketers are creating emails independently. That's genuine value for organizations where the primary challenge is preventing off-brand emails.
But for teams where skilled designers drive email creation, those guardrails become constraints. Email Love gives designers complete creative freedom in Figma, the professional design tool they already master, while handling the technical complexity of responsive email code automatically.
### Deeper Modern ESP Integrations
Both tools connect to major ESPs, and Taxi has breadth with 20+ connectors. But Email Love's integrations go deeper where it matters. The Braze integration automatically creates localization variants and syncs content blocks. The Iterable integration manages templates and snippets natively. These platform-specific features go beyond basic HTML export.
***
## Full Feature Breakdown
| Feature | Email Love | Taxi for Email |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| **Design Environment** | Figma (your existing tool) | Proprietary browser-based builder |
| **Markup System** | MJML (open-source) | Taxi Syntax (proprietary) |
| **Template Library** | Hundreds of templates and components | Custom templates built by developers |
| **Guardrails for Non-Designers** | Not a core feature: designed for designers | Core feature: lock editable regions, restrict changes |
| **AI Features** | AI Studio | None |
| **Responsive Email** | Automatic (MJML-powered) | Automatic (built into templates) |
| **Dark Mode Preview** | Yes, built into preview | Yes, built into preview |
| **Localization** | Via Braze integration (automatic variants) | 35+ languages, memoQ integration |
| **Email Testing** | Preview | Integrated Litmus testing |
| **ESP Integrations** | Deep: Braze, Iterable, Klaviyo, [Customer.io](http://Customer.io), HubSpot, SFMC, Loops, MoEngage, Blueshift, OneSignal | Broad: 20+ connectors including Braze, Klaviyo, SFMC, Marketo |
| **Approval Workflows** | Figma's collaboration features | Built-in with role-based permissions |
| **Collaboration** | Figma's real-time collaboration | Built-in team workflows with permissions |
| **Custom Code Access** | Full HTML/MJML access + Raw Code component | Via Taxi Syntax and HTML modules |
| **Version Control** | Figma's version history | Built-in version management |
| **Landing Pages** | No, email-focused | No, email-focused |
***
## Pricing Comparison
### Email Love
* **Free**: \$0. 5 HTML exports per month, 100+ pre-built components, 1 AI Import per month
* **Starter**: \$19/user/month. 10 HTML exports per month, 1 design system, 10 AI Imports per month
* **Growth**: \$59/user/month. Unlimited HTML exports, 5 shared design systems, 20 AI Imports per month
* **Professional**: \$1,788/user/year (annual only, minimum 3 users). Unlimited HTML exports, unlimited design systems, unlimited AI Imports
* **Enterprise**: Custom pricing. Custom design system (up to 100 components), team training, dedicated Slack support
### Taxi for Email
* **No public pricing**: enterprise sales process required
* **Sales-led model**: demo and quote required
* **Typical contracts**: Annual enterprise agreements
* **Implementation**: Onboarding and Taxi Syntax training included
***
## When Email Love Makes Sense
* **Your design team uses Figma** and you want email creation in the same tool as your other design work
* **Designers drive your email creation** rather than marketers independently assembling emails from templates
* **You want AI-powered email generation** from campaign briefs using your design system
* **You want transparent pricing** and the ability to start without an enterprise sales process
## When Taxi for Email Might Be Better
* **Non-designers create most of your emails.** Taxi's guardrail system ensures they can't break the design, which is exactly what large distributed teams need
* **Enterprise governance is non-negotiable.** Taxi offers formal role-based permissions, approval workflows, and strict template locking
* **Translation and localization at scale.** Taxi supports 35+ languages with memoQ integration for professional translation workflows
* **You need integrated email testing.** Taxi includes built-in Litmus testing without a separate subscription
* **Your team doesn't use Figma.** Taxi's standalone platform works independently of any design tool
* **You have 20+ different ESPs or MAPs.** Taxi's breadth of 20+ connectors covers more platforms than Email Love's deeper but more focused integration list
***
## Frequently Asked Questions
**Can Email Love provide guardrails for non-designers like Taxi does?**
Email Love is designed for design teams working in Figma, not for non-designers assembling emails independently. If your primary need is enabling marketers to create emails without design support, Taxi's guardrail system is specifically built for that use case. If designers create your emails and you want them to have full creative control, Email Love is the better fit.
**Does Taxi for Email have any AI features?**
As of early 2026, Taxi for Email does not offer AI features for email creation or quality assurance. Email Love's AI Studio will generate complete email designs from campaign briefs using your design system.
**How does localization compare between the two tools?**
Taxi for Email supports 35+ languages with memoQ integration for professional translation management. Email Love handles localization through its Braze integration, which automatically creates localized email variants. For teams with complex, multi-market translation workflows, Taxi's approach with memoQ is more mature.
**Can I migrate from Taxi for Email to Email Love?**
Taxi Syntax templates don't directly transfer since it's a proprietary format. However, your email designs can be rebuilt in Figma and exported through Email Love. The Email Love team offers migration support for enterprise customers.
**What happened with Taxi for Email's acquisition?**
Taxi for Email was acquired by SparkPost (now Bird). The platform continues to operate, but some users have noted concerns about Bird's focus on the email builder product within their broader messaging platform. Email Love is focused exclusively on email design as a core business.
**Which tool is better for agencies?**
Email Love is more practical for agencies: transparent per-user pricing makes it easy to scale across client work, Figma is already the industry-standard design tool, and there's no proprietary language to train new team members on. Taxi's enterprise pricing model and Taxi Syntax learning curve make it less suited for agency workflows.
***
## Ready to Try Email Love?
Install the Email Love Figma plugin and see how Figma-native email design compares to standalone platforms. Start with the free plan and export your first email in minutes.
→ [Get the Email Love Figma Plugin](https://www.figma.com/community/plugin/1387891288648822744/email-love-html-email-builder)
# Add wrappers, sections, and content
Source: https://help.emaillove.com/plugin/components/build-structure
Use the Build Your Own section to add empty wrappers, sections, and columns.
Use the **Build Your Own** tab to drop in a flexible, empty section anywhere in your email layout. Choose from common layouts like single, two, or three columns, then customize the padding and add your own content: text, images, buttons, and more.
You can add an empty section at any time to build out your design from scratch.
**Building with Claude or Codex?** Let the agent choose from your published Email Love components. It should not draw its own Wrapper, Section, or Column structure. If no component fits, ask it to stop and show you the gap. See [Build Emails in Figma with Claude or Codex](/plugin/ai/agents-in-figma).
## Steps to Add an Empty Section
Select it in Figma to activate the plugin's layout options.
Find it in the Email Love plugin sidebar.
* **Single Column**
* **Two Column**
* **Three Column**
* **Four Column**
* or a **Hero Section with a background image**
Once selected, you'll be prompted to customize the **padding** around the new section using simple visual controls.
This inserts your empty section into the design.
This creates a new mj-wrapper containing an mj-section and the appropriate number of mj-columns based on the layout you chose.
## Adding More Layers
* **To add a new Section**: Select the Wrapper, then choose another layout from the plugin.
* **To add a Column**: Select the Section and insert a new Column to adjust your layout structure.
* **To add content**: Select a Column and insert elements like:
* Text
* Images
* Buttons
* Dividers
* Spacers
* Tables
* Navigation
* Social Icons
This modular structure lets you build custom email layouts with total flexibility. Great for both quick iterations and fully tailored designs.
## Diagnose a Structure Problem with an Agent
Claude or Codex can inspect the hierarchy without changing your file:
```text theme={null}
Inspect the Email Love structure in this Figma frame: [frame link].
Do not edit the canvas. Find incorrect nesting, unrecognized helper frames,
fixed-height text containers, detached instances, and content that may flatten
into an image on export. Return the layer names and the smallest safe fix.
```
Use the [Email Love agent setup](/plugin/ai/agents-in-figma) first, or see [Get Help from Claude or Codex](/plugin/ai/agent-help) for a complete diagnosis workflow.
# Create a scalable set of Button components for your Email Design System
Source: https://help.emaillove.com/plugin/components/button-system
Build reusable button components with variants that update globally across your email design system
Learn how to build reusable button components that maintain consistency across your entire email design system and update globally when you make changes.
## Why Turn Your Button into a Component?
Button components let you:
* Update button styles in one place and see changes across all templates
* Maintain brand consistency across your email program
* Create multiple button variants (colors, sizes, styles) within a single component
* Speed up email production by reusing pre-built buttons
1. Open the Email Love Figma Plugin in your design system file
2. Create a new frame in Figma
3. In the plugin, navigate to the **Buttons** section
4. Select the default button option to generate a basic button
**Understanding Button Structure:**
* The outer frame is the button wrapper (you can add padding around it)
* The button itself is set to "hug" by default, meaning it scales based on text length
* Padding inside the button stays consistent regardless of text length
1. Remove the button from the Email Love frame so you have it as a standalone element
2. Customize the styling:
* **Corner radius**: Adjust for rounded or square corners
* **Fill color**: Change the button background
* **Padding**: Increase or decrease width/height spacing
* **Text properties**: Update font, size, and color
3. Give your button a descriptive name (e.g., "Purple Button")
1. Select your customized button
2. Click the **Create Component** icon in the toolbar (or use `Cmd/Ctrl + Option/Alt + K`)
3. Your button now appears with a purple diamond icon, indicating it's a component
Variants let you maintain multiple button styles within one component:
1. With your button component selected, click the **diamond icon** in the properties panel
2. Click the **+ icon** to add a variant
3. Customize each variant:
* **Red Button**: Change fill to red
* **White Button**: Change fill to white, add colored stroke
* **Black Button**: Change fill to black, update text color to white
4. Name each variant clearly in the properties panel
You can create as many variants as needed for your brand (outlined buttons, different sizes, secondary styles, etc.)
Once your button component with variants is created:
1. Open the **Assets panel** on the left sidebar
2. Find your button component (it will show the number of variants in the corner)
3. Click on the component to see all available variants
4. Drag any variant into your design
1. Navigate to your email design system templates
2. Locate existing buttons in your component library
3. Drag your new button component into the button frame
4. **Verify structure**: Make sure your button sits inside the correct frame
5. Delete the old placeholder button
6. Repeat for all templates and components in your design system
You can nest Figma components inside each other. Your email templates can contain button components, and any changes to the parent button will cascade to all instances.
To make buttons easily accessible when building emails:
1. Create a new frame in Figma
2. Generate a button using the plugin
3. Replace it with your custom button component
4. Move your button into the frame
5. Select the wrapper frame
6. Click **Add Custom Component** in the Email Love plugin
7. Your button now appears at the top of the plugin component list
## Making Global Updates
The power of button components is in global updates:
1. Navigate to your master button component
2. Make any styling changes (color, padding, corner radius, etc.)
3. All instances of that button across your design system update automatically
**Example:** If you change the button color from purple to gray in the master component, every template using that button will reflect the change immediately.
## Best Practices
* **Name variants clearly**: Use descriptive names like "Primary Red," "Secondary White," "Outline Purple"
* **Maintain consistent padding**: Keep internal padding the same across variants for visual consistency
* **Test responsiveness**: Ensure buttons scale properly with different text lengths
* **Document your variants**: Keep a reference guide showing when to use each button style
* **Regular audits**: Periodically review your button usage across templates
## Troubleshooting
**Button isn't updating across templates:**
* Verify you're editing the master component (purple diamond icon), not an instance
* Check that instances aren't detached from the component
**Button won't scale with text:**
* Ensure width and height are set to "hug contents"
* Verify auto layout is enabled on the button
**Can't find button in Assets:**
* Make sure the button is converted to a component
* Check that you're looking in the correct Figma file
## Need Help?
* Join our [Discord community](https://discord.com/invite/ANv9PjVdzP) for live support
* Email us at [support@emaillove.com](mailto:support@emaillove.com)
# The Customs tab & Community templates
Source: https://help.emaillove.com/plugin/components/customs-tab
Browse and insert your team's saved Custom templates in the redesigned Customs tab, organize them by category and brand, and start from curated Figma Community files
The plugin's assets sidebar gives you two libraries of ready-made designs to start from: **Customs** (your own team's saved templates and components) and **Community** (a curated set of Email Love templates built in Figma's Community). This article covers the redesigned Customs tab and the Community grid.
For how to *save* a template into Customs in the first place, see [Saving Customized Components & Templates Inside of the Plugin](/plugin/components/save-components).
## The Customs tab
Customs is where your workspace's own saved templates and branded components live. The tab shows them as a clean **3-column card grid** so you can scan everything at a glance instead of scrolling sideways through rows.
### Browsing and inserting
* Use the **category dropdown** at the top to filter. "All Templates" shows everything, or pick a specific category to narrow down.
* **Hover a card** and click **Create** to insert that template onto your canvas. The design is built into a fresh Email Love frame, ready to edit and export.
* Each card shows a thumbnail preview; if a preview can't load, the card falls back gracefully so the grid stays usable.
### Organizing with categories and brands
Customs are scoped **per brand** and grouped into **categories** you control:
* Use the **"+"** button to **Add New Template** or **Create Category**.
* Remove a template with the **×** on its card.
* Empty categories stay in place until you explicitly delete them, so a category doesn't disappear just because you cleared it out. Use **Delete Category** to remove one for good.
### Shared across your team
Customs are tied to your **license**, so **everyone on the same license sees the same Customs library**, aggregated across all members and organized per brand. When a teammate saves a template, it shows up for the whole workspace. No manual sharing or re-uploading.
## Community templates
The **Community** tab is a browsable grid of curated, ready-to-use Email Love templates published in Figma's Community. It's a fast way to grab a professionally built starting point when you don't have a relevant Custom saved yet.
* Templates are organized into **category tabs** (for example Retail, Tech, SaaS, Food, Travel).
* **Clicking a card opens the template's Figma Community file in a new tab**, where you can duplicate it into your own Figma and start editing with the plugin. (Community templates open in Figma rather than importing directly into your current file.)
* The Community catalog is curated by Email Love and refreshed over time, so new templates can appear without you needing to update the plugin.
## Customs vs. Community: which do I use?
| | **Customs** | **Community** |
| ---------- | ------------------------------------------------- | ----------------------------------------------- |
| What it is | Your team's own saved templates & components | Curated Email Love templates in Figma Community |
| Scope | Shared across everyone on your license, per brand | Public, same for everyone |
| Inserting | **Create** builds it into your current canvas | Opens the file in Figma to duplicate |
| Best for | Reusing your brand's approved designs | Starting from a polished, generic template |
## Troubleshooting
**A teammate's saved template isn't showing in my Customs:** Customs are shared by license. Confirm you're both on the same license/workspace. Reopen the plugin to refresh the list.
**A card's thumbnail is blank:** The preview image failed to load; the template itself is fine. Hover and **Create** to insert it, or reopen the tab to retry the thumbnail.
**I deleted everything in a category but it's still there:** That's intentional. Empty categories persist so they're not lost by accident. Use **Delete Category** to remove it.
**A Community template opened in a new tab instead of importing:** That's expected. Community templates live in Figma Community. Duplicate the file into your Figma, then build and export with the plugin.
**Need help?** Reach out at [support@emaillove.com](mailto:support@emaillove.com) or join our [Discord community](https://discord.com/invite/ANv9PjVdzP).
## Related Articles
* [Saving Customized Components & Templates Inside of the Plugin](/plugin/components/save-components): How to save your own designs into Customs
* [Pre-Built Components](/plugin/components/pre-built): The built-in component library you can start from
# Creating and Managing Design Systems
Source: https://help.emaillove.com/plugin/components/design-systems
How to create email design systems in the plugin, upload components from Figma, organize them into asset folders, and sync them for use with AI Studio
A **design system** is your brand's reusable library of email building blocks (headers, heroes, CTA buttons, content blocks, footers) saved inside the Email Love Figma plugin. Set one up once and you (and your team) can build emails faster, keep every send on-brand, and hand the same library to AI Studio or Builder to generate complete email templates from your components.
This guide walks you through setting one up from scratch.
**Already have a library of emails or components?** Use the [Claude or Codex migration workflow](/plugin/getting-started/migrate-design-system) before uploading modules one by one. It audits repeated blocks, builds the foundations first, and keeps the source read-only.
## How it works in 4 steps
1. **Create** a design system inside the plugin and give it a name.
2. **Upload** your Figma components into the predefined sections (Header, Hero, Single Column, etc.).
3. **Sync** the design system so AI Studio and Builder can use it.
4. **Use** it: build emails by hand in Figma, generate from a campaign brief, or hand it to your team via the Builder.
The rest of this article walks through each step.
## Before you start
Make sure you have:
* The Email Love Figma plugin installed and you're signed in with your license
* A Figma file with your email components on the canvas, named clearly
* An idea of which brand or email type this design system is for. Each brand usually deserves its own.
## Step 1: Create your design system
In the plugin, click the design system dropdown in the **top left**. It shows **Default** out of the box.
Then click **Create a Design System**.
Give it a descriptive name like *Acme Brand Emails* or *Transactional Emails*.
Your new design system now appears in the top-left dropdown with empty predefined sections, ready to populate.
![The plugin's design system manager showing the Create a Design System form]()
The **Default** design system is available out of the box. You can use it as-is to get started quickly, or skip it and create your own.
## Step 2: Upload your components
Now you fill the design system by uploading components from your Figma canvas into the matching predefined sections.
Uploading components to a design system is available on a paid plan. On a free account the Upload control does not appear in the Assets panel, so this step is where a free account stops. Everything up to it, including building and previewing, works on any plan.
### Prep your components in Figma first
* Each component should be a clearly defined element: a header, footer, hero, content block, CTA, etc.
* **Select the Wrapper, not what's inside it.** A design system component is one Wrapper (an `mj-wrapper`). You can also upload several Wrappers at once, or a whole email frame. Anything below Wrapper level, like a Section or a Column, leaves the Upload button greyed out. See [modules vs. email templates](/plugin/components/save-components) for the full picture.
* Name your Figma layers descriptively. Those names carry over into the design system.
### Then upload them
Pick it from the **top-left dropdown** in the plugin.
For example Header, Single Column, or Footer. It'll be empty if this is a new design system.
Select the component(s) you want to save.
The plugin will show an upload summary with success and failure counts.
![Uploading selected Figma components into a design system section]()
Repeat for each section that matters for your email type. You don't need to populate every section.
**Why this is useful:** saved components stay linked to the parent component in Figma. Update the parent later (change a color, swap an image, adjust spacing) and the saved component updates automatically. You only need to re-upload if you've made structural changes.
## Step 3: Sync for AI
After uploading, sync your design system so it's available to **Generate from Brief** and **Builder**.
In the plugin, go to **AI Studio**, then **Generate from Brief**.
Pick the one you want to sync from the dropdown.
Wait for the loading indicator to finish.
![The Sync Template Design button in AI Studio's Generate from Brief screen]()
Once synced, your design system is ready for AI generation.
## Step 4: Use your design system
There are three ways to put it to work:
* **Build by hand in Figma**: open any section, pick a component, and drop it into your email frame.
* **Generate from Brief**: write a campaign brief in AI Studio and let it assemble the email using your synced components.
* **Email Love Builder**: sync your design system to the Builder for non-designers to build emails with a drag-and-drop interface.
## The 13 predefined sections
You can't create custom sections. Pick whichever predefined section best matches each component:
* **Header**: Email headers and navigation bars
* **Heroes**: Hero banners and featured image sections
* **Single Column**: Single-column text and content blocks
* **Two Column**: Two-column layouts
* **Three Column**: Three-column layouts
* **Four Column**: Four-column layouts
* **Buttons**: CTA buttons and button groups
* **Reviews**: Testimonials, quotes, and review sections
* **Images**: Image-focused sections and galleries
* **Lists**: List-style content blocks
* **Order Tables**: Order summaries and table layouts
* **Footer**: Email footers
* **Code**: Raw code/HTML sections
## Managing & editing
### View what's in a design system
* See all your design systems listed with their sections.
* Each section shows a file count so you know how many components are stored.
* Click into any design system to browse its sections and components.
### Remove a component from a section
1. Navigate to the section within your design system.
2. Select the component you want to remove.
3. Click **Delete**.
4. Confirm in the modal.
Deleting a component can't be undone. You'd need to re-upload from Figma.
### Delete a design system
1. Navigate to the design system you want to delete.
2. Click **Delete Design System**.
3. Confirm in the modal.
This permanently removes the design system and every component saved inside its sections.
## FAQ
**Do I have to upload components into every section?**
No. AI Studio only uses sections that have components saved. Empty sections are skipped during generation. Only fill the sections that matter for your email type.
**What happens to my saved component if I edit the parent in Figma?**
The saved component updates automatically. Components stay linked to their Figma parent, so visual tweaks (color, image, spacing) flow through without a re-upload. Only structural changes need a re-upload.
**Can my teammates use the design systems I create?**
Yes. Design systems are shared across everyone on the same license key, so anyone on your team using the same license sees the same design systems.
**What's the difference between using a design system with the Builder vs. AI Studio?**
Email Love Builder is for humans: your team picks and arranges components in a drag-and-drop builder. AI Studio is for automation: you give it a campaign brief and it assembles the email from your components. Same design system, two different ways to use it.
**Can I have more than one design system? Should I?**
Yes, and usually you should. Create one per brand, sub-brand, or distinct email type (e.g. marketing vs. transactional). It keeps your components clean and helps AI Studio pick the right look for each email.
**Why is the Upload button greyed out?**
Your selection isn't a shape Upload accepts. It takes a Wrapper, a whole email frame, or several of those at once. A Section inside a Wrapper, a Column, a hero frame, a button or a text layer will leave it disabled. Click the parent Wrapper and it becomes clickable. More on the two shapes in [modules vs. email templates](/plugin/components/save-components).
**Should I put a single Wrapper in the design system, or save it to Customs as a template?**
The design system, every time. Customs is for whole finished emails. A Wrapper saved as a one-block email won't appear in any design system section, won't sync to AI Studio or Builder, and will overwrite the theme colours of whatever email someone inserts it into. [Full explanation here](/plugin/components/save-components).
**Can I create my own custom sections beyond the 13 predefined?**
No. The 13 predefined sections are fixed. They're how the plugin and AI Studio know which component goes where. Pick the section that best matches each component's purpose.
**Do I need to re-sync every time I add or update a component?**
For AI Studio and Builder: yes. Re-sync after you upload new components or change existing ones, so the latest state is available for generation. For human-driven use inside the Figma plugin, no re-sync is needed.
**What's the "Default" design system? Should I use it or create my own?**
**Default** is a starter design system that's available out of the box. It's fine for getting a feel for the plugin, but for real work most people create one per brand so each system reflects their own visual identity.
**How do I move a component from one section to another?**
There's no direct move action. Delete it from the current section, then re-upload it to the right one from the Figma canvas.
**What happens if I delete a design system by mistake?**
Deletion is permanent. The design system and all its components are gone. You'd need to recreate the design system and re-upload your components from Figma. Be sure before you confirm.
## Best practices
* **Name things clearly.** Descriptive names on design systems and components help your team find the right pieces and help AI Studio match them to the right sections of a brief.
* **Keep components modular.** Each component should work on its own. That gives AI Studio and the Builder maximum flexibility when assembling emails.
* **Re-sync when you change components.** Update designs in Figma, then re-upload and re-sync so the latest state is available for AI generation.
* **One design system per brand.** Managing multiple brands? Give each its own design system to keep the look consistent.
## Troubleshooting
**Upload fails for a component:** Make sure the component is properly selected on the Figma canvas before clicking Upload. Try selecting it again and re-uploading.
**Upload is disabled and clicking does nothing:** That's a selection problem, not a failure. Upload accepts a Wrapper, a whole email frame, or several of those at once. Select the parent Wrapper of whatever you're trying to save.
**Sync stalls or fails:** Refresh the plugin and try again. Empty sections are fine (they're skipped during generation), but a fully empty design system can't be synced. Make sure at least one section has components saved.
**Components look different after syncing:** The design system captures the current state of components at the time of upload. If you've made structural changes in Figma since uploading, re-upload the updated components and sync again.
**Team members can't see the design system:** Design systems are shared across the same license key. Make sure your team members are logged in with a license under the same account.
## Related Articles
* [Pre-Built Components](/plugin/components/pre-built): Browse the available pre-built components in the plugin
* [Saving Custom Components in the Plugin](/plugin/components/save-components): How to save individual custom components
* [Sync your emails to Email Love Builder](/plugin/export/builder): Use your design system with the Builder's drag-and-drop interface
# Personalize your email content with dynamic content
Source: https://help.emaillove.com/plugin/components/dynamic-content
How to use merge tags, conditional content, dynamic images, and looping content in your email designs
The Email Love Figma plugin supports four types of dynamic content that you can design in Figma and export to your ESP. This guide walks through each type, from basic merge tags to advanced looping content.
Every ESP has slightly different syntax for personalization. The examples in this guide use MailerLite and handlebars syntax, but the concepts apply to all major platforms including Salesforce, Hubspot, Klaviyo, Braze, Iterable, and many more. Always reference your ESP's documentation for specific merge tag syntax.
## 1. Merge Tags
Merge tags are the simplest form of personalization. They pull in data you store in your ESP (like first name, product details, preferences, or purchase history) and insert it directly into your email.
### How to Add Merge Tags
In your Figma design, locate the text field where you want to add personalization.
Get it from your platform's documentation.
The plugin will preserve this code when you export.
### Example Syntax by ESP
```text theme={null}
Hello {$name|default('kind email peeps')}
```
```liquid theme={null}
Hello {{ person.first_name|default:"there" }}
```
```text theme={null}
Hello *|FNAME:there|*
```
```liquid theme={null}
Hello {{ ${first_name} | default: 'there' }}
```
```handlebars theme={null}
Hello {{#if firstName}}{{firstName}}{{else}}there{{/if}}
```
```text theme={null}
Hello %%=IIF(NOT EMPTY(@firstName), @firstName, "there")=%%
```
```liquid theme={null}
Hello {{ customer.first_name | default: 'there' }}
```
All of these will:
* Display the subscriber's first name if available
* Fall back to a default value if the name field is empty
Always include a default value in your merge tags. This ensures your email looks good even if you don't have that data for every subscriber. Get creative with your defaults instead of using boring phrases like "Hello there."
### What You Can Merge
You can merge any data stored in your ESP:
* First name, last name, full name
* Product names or prices from abandoned carts
* Subscriber preferences
* Birth dates or anniversaries
* Custom fields specific to your business
## 2. If/Else Statements (Conditional Content)
If/else statements let you show different content blocks to different subscribers based on data you store about them. This is more advanced than merge tags because you're controlling entire sections of your email, not just individual text strings.
### How to Add If/Else Statements
It's at the bottom of the Email Love plugin panel.
Use your ESP's templating language (handlebars, Liquid, Jinja, etc.).
Drag the code component to wrap around the content you want to conditionally display.
Add an "else" code component for the alternative content.
Finish with a final code component.
### Two Ways to Use Code Components
**Option 1: Wrap Entire Sections**
Place code components above and below entire content sections to show/hide them based on conditions.
```handlebars theme={null}
{{#if customer == 'pro_member'}}
[Content Section: Golden Gate Bridge]
{{else}}
[Content Section: Hot Air Balloon]
{{/if}}
```
**Option 2: Wrap Individual Elements**
Place code components inside a section to conditionally show/hide specific elements like images, text blocks, or buttons.
### Example Use Cases
* Show premium content to paid subscribers
* Display different CTAs based on subscription tier
* Personalize product recommendations by location
* Show different messaging to new vs. returning customers
## 3. Dynamic Images
Dynamic images let you swap image URLs based on merge tags or external personalization services. The image displayed will change based on subscriber data or real-time content from your website.
### How to Add Dynamic Images
Click the image you want to make dynamic.
Open it in the Email Love plugin.
Paste your dynamic image URL or merge tag.
### Example: Nifty Images Integration
Nifty Images is an image personalization tool that works great with Email Love. Here's how it works:
1. Set up your dynamic image in Nifty Images (or similar tool)
2. Copy the dynamic image URL
3. Paste it into the Override Image Source field in Figma
4. The plugin will use this URL in your exported HTML
The image will update automatically based on:
* Latest content from your website
* Subscriber location or preferences
* Real-time data like countdown timers
* Weather or stock availability
### Use Cases for Dynamic Images
* Pull the latest blog post featured image
* Show location-specific store images
* Display personalized product recommendations
* Add countdown timers for sales
* Show real-time inventory or pricing
## 4. Looping Content (Catalog Data)
Looping content is the most advanced personalization type. It's commonly used with platforms like Iterable, Braze, and Salesforce Marketing Cloud to pull catalog data and repeat content blocks multiple times based on subscriber-specific information.
### How Looping Works
Looping content pulls data from a catalog in your ESP and repeats a content block for each item assigned to that subscriber. For example:
* If a subscriber has 3 items in their cart, the content block repeats 3 times
* If they have 5 upcoming classes, it shows all 5
* If they have 10 recommended products, all 10 appear
### How to Add Looping Content
Add a **Code Component** at the start of your loop.
Use handlebars or your ESP's syntax.
Text, images, buttons: whatever should repeat for each item.
Add a closing **Code Component** to end the loop.
Wrap this entire structure in a table or column.
### Example (Iterable/Handlebars Syntax)
```handlebars theme={null}
{{#each catalogCollection}}
{{title}}
{{details}}
{{/each}}
```
This will pull all items from the specified catalog collection and display each one using your designed template.
### Common Use Cases
* Order confirmation receipts showing all purchased items
* Abandoned cart emails with each cart item
* Personalized product recommendations from catalogs
* Event registrations showing all upcoming sessions
* Course enrollments listing all assigned classes
The content inside the loop can include text, images, or buttons. The plugin treats it as a repeatable block that your ESP will populate with actual data at send time.
## ESP-Specific Notes
### Syntax Varies by Platform
Each ESP uses different templating languages. Reference the documentation below for your specific platform:
| **ESP** | **Templating Language** | **Documentation Link** |
| -------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ActiveCampaign | Custom syntax | [ActiveCampaign Personalization Tags](https://help.activecampaign.com/hc/en-us/articles/220358207-Use-Conditional-Content#01J80MQZ65S9CFHQE3AHR398MF) |
| Blueshift | Liquid | [Blueshift Liquid templating language](https://help.blueshift.com/hc/en-us/articles/13828972008211-Using-Liquid-for-Personalization) |
| Braze | Liquid | [Braze Liquid templating documentation](https://www.braze.com/docs/user_guide/personalization_and_dynamic_content/liquid) |
| Customer.io | Liquid | [Customer.io Liquid syntax list](https://docs.customer.io/journeys/liquid-tag-list/?version=latest) |
| Dotdigital | Liquid | [DotDigital Liquid templating guide](https://support.dotdigital.com/en/articles/8199120-loop-decision-and-liquid-markup-building-blocks) |
| Emarsys | Emarsys Scripting Language (ESL) | [Emarsys guide to ESL](https://esl.emarsys.com/hc/en-us/articles/9333248175249-What-is-ESL) |
| HubSpot | HubL (HubSpot Markup Language) | [HubSpot Hubl documentation](https://developers.hubspot.com/docs/cms/reference/hubl/overview) |
| Iterable | Handlebars | [Iterable Handlebars documentation](https://support.iterable.com/hc/en-us/articles/205480365) |
| Klaviyo | Django/Liquid | [Klaviyo conditional content guide](https://help.klaviyo.com/hc/en-us/articles/7655926841499) |
| Loops | Custom syntax | [Loops dynamic content guide](https://loops.so/docs/creating-emails/personalizing-emails#dynamic-tag-syntax) |
| Mailchimp | Custom syntax | [MailChimp merge tag guide](https://mailchimp.com/help/all-the-merge-tags-cheat-sheet/) |
| MailerLite | Custom syntax | [How to use Mailerlite variables](https://www.mailerlite.com/help/how-to-use-variables-in-mailerlite) |
| Marketo | Tokens & Velocity | [How to use Marketo Tokens](https://experienceleague.adobe.com/docs/marketo/using/product-docs/demand-generation/landing-pages/personalizing-landing-pages/tokens-overview.html) |
| MoEngage | Custom syntax | [MoEngage Jinga template guide](https://help.moengage.com/hc/en-us/articles/115002757783-Jinja-Templating-Language) |
| Sailthru | Zephyr | [Sailthru Zephyr guide](https://getstarted.meetmarigold.com/engagebysailthru/Content/developers/zephyr-syntax/examples-library.html) |
| Salesforce Marketing Cloud | AMPscript | [Salesforce guide to AMP Script](https://developer.salesforce.com/docs/marketing/marketing-cloud/guide/ampscript.html) |
| Zeta Global | Custom syntax | [Zeta Markup Language guide](https://knowledgebase.zetaglobal.com/kb/zeta-markup-language-zml) |
**Let an AI agent write and debug this syntax for you.** The [official Email Love plugin for ChatGPT and Codex](https://chatgpt.com/plugins/plugins_6a739f43c3b48191b1281a9b2d48b409) includes dedicated templating skills for ten of these platforms: Braze, Customer.io, HubSpot, Iterable, Klaviyo, Marketo, MoEngage, Sailthru, Salesforce Marketing Cloud, and Zeta Global. Ask it to write, review, or debug your merge tags, conditionals, and loops — it works on any email HTML, not only Email Love exports.
In Claude Code, install the same skills with:
```bash theme={null}
claude plugin marketplace add email-love/claude-skills
claude plugin install emaillove-esp@email-love
```
### How the Plugin Handles Dynamic Content
The Email Love plugin doesn't process or validate your personalization code - it simply inserts your templating language as raw code into the exported HTML.
This means:
* ✅ Works with **any** ESP's templating language
* ✅ Supports Handlebars, Liquid, Jinja, HubL, AMPscript, Velocity, Zephyr, and custom syntaxes
* ✅ You have complete control over your personalization logic
* ⚠️ You're responsible for using the correct syntax for your ESP
* ⚠️ Always test your personalization in your ESP before sending
## Testing Your Personalization
After exporting your HTML from Figma:
1. Import the HTML into your ESP
2. Use your ESP's preview function to test personalization
3. Send test emails to yourself with different data values
4. Verify that merge tags pull correct data
5. Check that if/else statements show the right content
6. Confirm dynamic images load properly
7. Test looping content with different numbers of items
## Need Help?
If you run into issues or have questions about implementing personalization:
* **Email us at [support@emaillove.com](mailto:support@emaillove.com)** - Reach out directly for support
* [**Join our Discord community**](https://discord.com/invite/ANv9PjVdzP) - Get help from other Email Love users and our team. This is the best place for real-time troubleshooting and tips from other marketers using the plugin
# Optimizing Component File Size to Avoid Getting Clipped in Gmail
Source: https://help.emaillove.com/plugin/components/gmail-clipping
How to check your email file size and reduce it to avoid Gmail's 102 KB clipping limit
If you've ever had Gmail clip one of your newsletters with that "\[Message clipped]" link at the bottom, you know it's frustrating. Not only does it look bad, but it can actually break your tracking pixels and cut off your footer (including your unsubscribe link, which is kind of important).
The Email Love Figma plugin shows you your file size right in the preview screen, so you can catch this issue before you send. And if you are over the limit, there are a couple of straightforward ways to fix it.
This guide covers:
* Why Gmail clips emails (and why you should care)
* How to check your file size in the plugin
* Two methods to reduce file size. One takes about 5 minutes, the other takes 30 seconds.
* Some tips for keeping your emails efficient from the start
Gmail's limit is 102 KB. If you're anywhere close to that, these techniques will help you stay under it without sacrificing your design.
It's worth noting that image file size does not impact email file size. The email file size is determined by the amount of HTML used in your email.
## Checking Your Email File Size
When you preview your email in the plugin, look at the **top right corner** of the preview screen. You'll see the current file size displayed in kilobytes (e.g., "21 KB").
**Rule of thumb:** Aim to keep your emails under 95 KB to give yourself some buffer room.
## Method 1: Optimize Your MJML Structure in Figma
The Email Love plugin uses MJML, an email framework that structures your design using wrappers, sections, and columns. Understanding this structure helps you build more efficient emails.
### Understanding MJML Structure
* **Wrapper:** The container/table for your email section
* **Section:** The row within the wrapper (think of this as a horizontal slice)
* **Column:** The vertical divisions within a section (you can have up to 4 columns)
* **Content:** Images, text, and buttons live inside columns
**The key insight:** Each section adds code to your email. If you're building a single-column layout, you don't need multiple sections. You can combine everything into one section to reduce file size.
## Method 2: Minify Your HTML Code
Minification removes all unnecessary spaces and line breaks from your HTML code without changing how it renders. This is a common practice that can reduce file size by 15-20%.
### Using the Built-In Minification Button
This opens the export page.
You'll find it on the export page.
The plugin will automatically strip unnecessary spaces and line breaks from your HTML.
It's already minified.
**Example results:** A 13 KB email can be reduced to around 11 KB through minification.
### Important Notes About Minification
* The code will look harder to read (no spaces or line breaks), but it renders exactly the same way in email clients
* You can always export without minification if you prefer readable code for troubleshooting
* This is safe to use and widely practiced in email development
## Troubleshooting
**Q: My email is still getting clipped after optimization. What do I do?**
Try both methods together: First optimize your MJML structure, then enable the Minify button when exporting. If you're still over 102 KB, you may need to shorten your content or split it into multiple emails.
**Q: Will minifying my code affect how the email looks?**
No! Minification only removes spaces and line breaks that don't affect rendering. Your email will look identical to recipients.
**Q: How do I know if Gmail is clipping my emails?**
Send a test email to yourself at a Gmail address. Scroll to the bottom. If you see "\[Message clipped]" or "View entire message," you're being clipped.
## Questions?
If you need help optimizing your email structure or have questions about file size, reach out to our team. We're here to help you send better emails!
# Pre-Built Components
Source: https://help.emaillove.com/plugin/components/pre-built
How to find, add, and customize Email Love's pre-built email components to speed up your design workflow
Email Love ships with a library of pre-built components (headers, content blocks, CTAs, galleries, footers, and more) that are already structured with correct MJML hierarchy, tested across email clients, and optimized for responsive rendering. Instead of building every section from scratch, start with a component and customize it to match your brand.
This guide covers how to find components, add them to your email, and customize them for your needs.
## The Assets Panel
All pre-built components live in Figma's **Assets** panel (left sidebar). Open it by clicking the Assets icon or pressing **Option + 2** (Mac) / **Alt + 2** (Windows). Inside, you'll find components organized by category:
* **Headers**: Logo placement, navigation bars, preheader text
* **Content Blocks**: Text-heavy sections, feature highlights, article layouts
* **Featured Items**: Product showcases, image-text combos, spotlight sections
* **Calls to Action (CTAs)**: Button blocks, multi-button layouts, promotional banners
* **Galleries**: Image grids, product carousels, thumbnail layouts
* **Footers**: Social links, legal text, unsubscribe blocks, contact info
You'll also see two helpful sections at the top of the Assets panel:
* **Recently Used**: Quick access to components you've used before, helping you stay consistent across emails
* **Customs**: Any components you've saved from your own designs (see "Saving Custom Components" below)
## Adding a Component to Your Email
Open the **Assets** panel in the left sidebar.
Browse by category or use the search bar.
Drag the component from the Assets panel onto your email frame.
The component should sit inside a **wrapper** or directly in the email frame.
The plugin will recognize the component's MJML structure automatically. No additional setup needed.
If you're not sure which component to use, try a few. Dropping a component onto the canvas is non-destructive. You can always delete it and try another.
## Customizing a Component
Pre-built components are designed to look polished out of the box, but you'll want to adapt them to your brand. There are three ways to customize:
### 1. Figma Native Tools
You can edit text, swap images, and adjust colors directly in Figma, just like any other design element. Select the layer you want to change and use Figma's built-in tools:
* Double-click text layers to edit copy
* Select image layers and use "Fill" to swap images
* Change colors on any layer through Figma's color picker
* Resize frames by dragging handles (the plugin respects responsive constraints)
### 2. Plugin Properties Tab
Select any element inside the component and open the **Properties** tab in the Email Love plugin. Here you can configure email-specific settings that Figma doesn't handle natively:
* **Links**: Add URLs to buttons, images, and text
* **Alt text**: Set image alt text for accessibility
* **Alignment**: Control content alignment within columns
* **Spacing**: Fine-tune padding that maps to the HTML output
### 3. Appearance & Mobile Styles
* **Appearance Tab**: Set dark mode overrides, text style presets, and global color schemes
* **Mobile Styles Tab**: Override font sizes, padding, and visibility for mobile devices
See the Appearance Tab guide and Mobile Optimization guide for detailed walkthroughs.
## Saving Custom Components
Once you've customized a component to match your brand, you can save it to the Assets panel for reuse:
Select the component or frame you want to save.
Open the **Assets** section in the plugin.
Click to add your customized component.
Give it a clear, descriptive name (e.g., "Brand Header, Dark" or "CTA, Primary Blue").
Saved components appear in the **Customs** section of the Assets panel. If the component you're saving is a Figma Component or Instance, the plugin automatically **links** it to the source. You'll see a blue chain icon on the thumbnail. Linked components stay in sync: when you update the source in Figma, the saved version updates automatically. And when you place a linked component into an email, it creates a native Figma instance that stays connected to the parent.
Create a naming convention for your custom components. Prefixing with the category ("Header", "Footer", "CTA") keeps things organized as your library grows. For cross-file use, publish your components to a Figma Team Library so the link works from any file.
## Best Practices
**Start with components, customize from there.** Building from pre-built components ensures your MJML structure is correct and your email will render properly across clients. Customizing an existing component is faster and safer than building one from scratch.
**Don't break the hierarchy.** Pre-built components come with the correct nesting (wrapper, then section, then column, then content). If you need to restructure a component, make sure you maintain this hierarchy or you'll encounter errors during export.
**Test after significant changes.** If you've heavily modified a component, use the Preview feature to check desktop, mobile, and dark mode rendering before exporting.
**Build a brand library.** Save your most-used customized components to the Assets panel. A library of 10-15 branded components (header, footer, hero, CTA, text block, image block, spacer) covers most email needs and dramatically speeds up production.
## Troubleshooting
**Component doesn't appear in the Assets panel**
Make sure you're looking in the correct Figma file. Components are file-specific unless they're part of a shared library. If you saved a custom component in a different file, you'll need to publish it as a shared library or copy it over.
**Component looks different after export**
This is usually a CSS support issue with specific email clients. Check the Email Client Compatibility Matrix to see which CSS properties are supported where. Border radius, custom fonts, and background images are the most common culprits.
**Component breaks on mobile**
Open the Mobile Styles tab and check that the component has appropriate mobile overrides. Columns automatically stack on mobile, so verify the stacking order looks right in Preview.
**Copied component loses its link to the original**
When you copy-paste a component (rather than dragging from Assets), it becomes a detached instance. This means changes to the original component won't update the copy. If you need linked instances, always drag from the Assets panel.
## Next Steps
* **Want to build your own components?** See the Build Your Own Components collection for guides on creating custom elements.
* **Need to customize further?** Check the Styling Components guides for detailed control over backgrounds, padding, typography, and more.
* **Ready to export?** Head to the Export Overview to learn how to send your email to your ESP.
*Need help? Reach out at [support@emaillove.com](mailto:support@emaillove.com) or join our Discord community.*
# Saving Customized Components & Templates Inside of the Plugin
Source: https://help.emaillove.com/plugin/components/save-components
How to save your customized components and full email templates inside the Figma plugin for reuse
Want to build your own library of reusable email assets? Email Love's Figma plugin makes it super easy to save your customized components and templates for future use. This feature is perfect for maintaining brand consistency and speeding up your design workflow.
## First, work out which of the two you're saving
Everything you save is one of two shapes, and the shape decides which route you use. Getting this wrong is the most common reason a saved block doesn't behave the way people expect.
**A module is one Wrapper.** A Wrapper is the outermost band of an email: a header, a hero, a product block, a testimonial, a footer. Everything inside it (Sections, Columns, text, images, buttons) rides along. In the underlying markup a Wrapper is an `mj-wrapper`, which is why its Figma layer name carries `(mjml:mj-wrapper)`. A module is a piece of an email, never the email.
**An email template is the whole email frame.** That's the outer frame the plugin made for you. It holds every Wrapper inside it, plus the settings that belong to the email itself: subject line, preview text, UTM parameter, fonts, and the theme colours.
Rule of thumb: if your team will drop it into lots of different emails, it's a module. If it's a finished send you want to start the next one from, it's an email template.
### Each shape has its own save route
| | **Module** | **Email template** |
| ----------------------------- | --------------------------------------------------- | ------------------------------------------- |
| What you select | One Wrapper | The whole email frame |
| How you save it | **Upload** inside a design system section | **Add New Template** in the **Customs** tab |
| Where it lands | That section of your design system | A category in Customs |
| Stays linked to Figma | Yes, when the Wrapper is a component or an instance | No |
| Reaches AI Studio and Builder | Yes, once you sync | No |
### What each route turns away
**Upload won't take anything smaller than a Wrapper.** The Upload button only becomes clickable when your selection is a Wrapper, a whole email frame, or several of those at once. Select a Section inside a Wrapper, a Column, a hero frame, a button or a text layer and the button stays greyed out. There's no error message to read, so a dead Upload button almost always means you've selected one level too deep. Click the Wrapper that contains it and the button comes alive.
**Add New Template won't take anything that isn't a whole email.** Try to save a Wrapper this way and Figma shows a red **"Please select valid email template"** notification, with **"Select an Email Template"** in the plugin. Customs only accepts the outer frame.
### Why a module saved as a one-block email costs you later
When Upload is greyed out, the tempting fix is to drop the module into an empty email frame on its own and save that to Customs instead. It works. It's also the wrong shape, and you find out weeks later.
**It isn't part of your design system.** It sits in Customs, which is a shelf of finished emails. It won't show up in the Header or Hero or Footer section where your team goes looking for it, and because it isn't in a design system it isn't included when you sync. Generate from Brief and Builder never see it.
**It stops tracking Figma.** Only components uploaded into a design system section keep a link back to their source component, shown by the blue chain icon. A Customs template is a snapshot. Update the master component in Figma and the saved copy stays exactly as it was until someone deletes it and saves it again.
**It repaints whatever email you put it in.** This is the one that hurts. An email template carries the email's own settings, and inserting it applies them to the frame you insert it into. Anything the saved email had set overwrites what's already there: background, content, text, link and button colours, their light theme counterparts, subject line, preview text, UTM parameter and fallback font. So a one-block "template" saved out of a dark email will flip a light email dark the moment a teammate inserts it. A module saved the right way is appended and reflowed to the frame width, and nothing else moves.
### Theme colours belong to the email, not the module
Select the email frame and the Colors panel gives you **Background Color** alongside content, text, link and button colours. Select a Wrapper and Background Color isn't there.
That's on purpose. The page background is a property of the email, so there's exactly one of it per send. A Wrapper can set its own content colour and the colours of the text, links and buttons inside it, and those do travel with the module when you save it. The page background doesn't, because it was never the module's to carry.
In practice: set the theme once on the email frame, then let modules override only what genuinely differs, like a dark band inside a light email. Modules that don't fight the email theme drop cleanly into any email built on the same design system.
## Saving Custom Components
Custom components are your go-to email building blocks - think branded headers, styled CTAs, or perfectly crafted content sections that you'll want to use again and again. Each one is a **module**, so what you select is a single Wrapper.
Get it looking exactly how you want.
Click the Wrapper on the Figma canvas, not a Section or Column inside it. If the Upload button stays greyed out, you're a level too deep.
Navigate to the appropriate section (Two Column, Buttons, Reviews, etc.).
The button sits at the top of the section. Confirm in the dialog that names the design system and section you're uploading to.
Your component now appears at the top of that section.
## Component Linking: Stay in Sync with Figma
When you save a Figma Component or Instance, the plugin automatically **links** the saved version to its source component. You'll see a small **blue chain icon** on the thumbnail, confirming the link is active.
This means:
* **Native instances on the canvas.** When you click a linked component to place it in your email, the plugin creates a real Figma instance (not a static copy). Changes to the parent component instantly propagate to every instance. That's Figma's native behavior, no extra steps needed.
* **Auto-syncing thumbnails.** When you open an asset folder with linked components, the plugin automatically checks each one against its Figma source. If anything changed (colors, text, spacing, images), the thumbnail and JSON update silently in the background.
* **Cross-file support.** If your source component is published to a Figma Team Library, the link works from any Figma file. For local (unpublished) components, the link only works within the same file. You'll see a notification about this at save time.
* **Backward compatible.** Components saved before this feature still work exactly as before. They just won't have a link badge or auto-sync behavior.
### Visual Badges
Look for these indicators on your saved component thumbnails:
* **Blue chain icon**: Component is linked to a Figma source
* **Orange refresh icon**: Update available (click to sync manually if auto-sync didn't catch it)
* **Red warning icon**: Source component was deleted or can't be found
* **Spinning gray icon**: Currently checking for updates
A small **refresh icon** next to the "Upload Component" button lets you manually trigger an update check for all linked components in that folder.
**Using your saved components is just as easy:**
* Create a new email frame
* Navigate to the plugin section where you saved your component
* Click on your custom component to instantly add it to your email
* Linked components are placed as native Figma instances that stay connected to the source
**Managing your component library:**
* Remove any component by clicking the small "X" icon next to it
* Save as many components as you like - there's no limit!
* Custom components work across all plugin sections (Four Column, Buttons, Reviews, and more)
## Saving Full Email Templates
Got a killer email design that you want to reuse? Save the entire template and create a personal library of email designs that perfectly match your brand. This route is for whole emails only. If what you have is a single Wrapper, it belongs in a design system section instead.
Make sure everything looks perfect.
Select the outer frame in Figma, not a Wrapper inside it.
Open the plugin and click on the **"Customs" tab** in the top left.
Click "Create Category" and give it a descriptive name (like "Newsletters," "Sales," or "Transactional"). Your new category is ready to go!
Click "Add New Template", select the right category, then click "Add Template".
Your template is now saved and ready for future campaigns.
**Using your saved templates:**
* Create a new email frame
* Go to the Customs tab in the plugin
* Browse your categories to find the perfect template
* Click on it and watch as the plugin builds out each section automatically
* Customize the images, text, and links for your new campaign
## Organizing Your Template Library
Smart organization makes finding the right template a breeze. Here are some category ideas:
* **Newsletters** - For your regular email communications
* **Promotions** - Sales, discounts, and special offers
* **Transactional** - Order confirmations, welcome emails, password resets
* **Seasonal** - Holiday campaigns and event-specific designs
* **Product Updates** - Feature announcements and company news
## Pro Tips for Success
**For Components:**
* Save your most-used elements like branded headers, footers, and signature CTAs
* Test components in different email contexts to ensure they work perfectly
* Keep your component names clear and descriptive
**For Templates:**
* Use specific category names that make sense for your workflow
* Save template variations for different campaign types
* Regularly update your saved templates to reflect current brand guidelines
## Troubleshooting
**The Upload button is greyed out.** Your selection is too deep. Upload only accepts a Wrapper, a whole email frame, or several of those at once. Selecting a Section, Column, hero frame, button or text layer leaves the button disabled with no error. Click the parent Wrapper and try again.
**"Please select valid email template" when saving to Customs.** You had a Wrapper selected. Customs only takes the whole email frame. If the thing you're saving is a Wrapper, upload it into a design system section rather than wrapping it in an email frame of its own.
**A saved block changed the colours of the email I put it in.** It was saved as an email template, not a module. Email templates carry the email's own theme, subject line and preview text, and inserting one applies them to the frame. Re-save it as a module: select its Wrapper and upload it into a design system section.
**Template not appearing?** Double-check that you selected the entire email frame before saving and confirm you're looking in the right category.
**Need to update a saved component?** If it's linked (blue chain icon), just update the source Figma component. The saved version in the plugin will auto-sync the next time you open that folder. No need to delete and re-save. For unlinked (legacy) components, you'll still need to delete the old version and save the updated one.
This custom save feature transforms the Email Love plugin into your personal design system, making it faster and easier to create beautiful, on-brand emails every time. Happy designing!
## Related Articles
* [Creating and Managing Design Systems](/plugin/components/design-systems): Where modules live, and how to sync them for AI Studio and Builder
* [Add wrappers, sections, and content](/plugin/components/build-structure): How Wrappers, Sections and Columns nest inside an email
* [The Customs tab & Community templates](/plugin/components/customs-tab): Browsing and inserting the email templates you've saved
# Save your customized components and templates
Source: https://help.emaillove.com/plugin/components/save-custom-components
Easily save your components and templates inside of the plugin for use later.
The Email Love Figma plugin allows you to save and reuse your customized email components for faster design workflows.
Before you save anything, be clear on whether you're saving a **module** (one Wrapper) or an **email template** (the whole email frame). The two use different routes and behave differently once saved. [Modules vs. email templates](/plugin/components/save-components) explains the difference and what goes wrong if you pick the wrong one.
### How to Save a Custom Component
Choose the component type that best matches what you want to save:
* Hero
* Single Column
* Multi-Column
* Receipt
* Image
* Other component types
Click the Wrapper you've customized in your Figma frame, not a Section or Column inside it. If the save button stays greyed out, you've selected something below Wrapper level.
Click the blue button in the corresponding section of the plugin (e.g., click the blue button in the "Hero" section if saving a hero component).
You'll see a notification box saying "Adding to \[component type]" confirming the save.
Your saved component will now appear in that section of the plugin for future use.
### Using Your Saved Components
1. **Create New Email**: Start by creating a new frame in Figma
2. **Select Saved Component**: Navigate to the appropriate section in the plugin and select your saved component
3. **Add to Frame**: The plugin will add a copy of your customized component to your new frame
### Managing Saved Components
* **Remove Components**: Click the small "X" icon next to any saved component to delete it
* **Unlimited Storage**: Save as many customized components as you need within the plugin
## Save Custom Email Templates
The plugin's "Customs" section has been enhanced with category organization, enabling you to save a range of template types.
Customs only accepts a whole email frame. Select a Wrapper and you'll get a "Please select valid email template" error. Don't work around it by putting that Wrapper in an email frame on its own: a one-block email overwrites the theme colours, subject line and preview text of any email someone inserts it into. See [modules vs. email templates](/plugin/components/save-components).
### Creating Custom Categories
Navigate to the custom section of the plugin.
Click the "Create Category" button.
Create categories based on email types such as:
* Promotions
* Newsletters
* Transactional emails
* Welcome series
* Product announcements
### Saving Complete Email Templates
Select the whole email frame, not a Wrapper inside it.
Click the "Add New Template" button.
You'll be taken to the category page where you can select the appropriate email type.
The complete email template will be saved to your selected category.
### Using Saved Email Templates
Start with a new frame in Figma.
Go to your custom categories section.
Choose the email template you want to use.
Click the "Create" button to rebuild the complete template in your frame.
Update the following elements to match your needs:
* Images
* Text content
* Links and CTAs
Once customized, export your email to your ESP as usual.
## Benefits of Custom Components & Templates
### Time Efficiency
* Reuse proven designs across multiple campaigns
* Eliminate repetitive design work
* Maintain design consistency
### Organization
* Categorize templates by email type or campaign
* Keep frequently used components easily accessible
* Build a library of your best-performing designs
### Team Collaboration
* Share component libraries across team members
* Standardize design elements across campaigns
* Maintain brand consistency at scale
## Best Practices
### Component Organization
* Use descriptive names for saved components
* Regularly clean up unused components
* Group similar components together
### Template Management
* Create meaningful category names
* Save templates after they've proven successful
* Include version notes or dates in template names when helpful
### Workflow Integration
* Test saved components before major campaigns
* Update templates when brand guidelines change
* Share successful templates with team members
This feature significantly streamlines the email design process by allowing you to build a personalized library of components and templates that match your brand and campaign needs.
## Related Articles
* [Saving Customized Components & Templates Inside of the Plugin](/plugin/components/save-components): The difference between a module and an email template, which route each uses, and what breaks if you mix them up
* [Creating and Managing Design Systems](/plugin/components/design-systems): Where saved modules live and how to sync them
# Understanding Figma Components, Variants, and Properties
Source: https://help.emaillove.com/plugin/components/variants-properties
How to create reusable Figma components with variants and properties for your email design system
A Figma component is a reusable design element that serves as a master template. When you update the master component, all instances of that component update automatically across your files.
**How components work:**
Components have a parent-child relationship. The **main component** (purple border with four-diamond icon) is the source of truth. When you drag a component from the Assets panel into your design, you create an **instance** (purple border with hollow diamond icon). Changes to the main component automatically update all instances.
**Benefits for email design:**
* Update brand elements once and apply everywhere
* Maintain consistency across all campaigns
* Speed up email production
* Enable non-designers to build emails without breaking layouts
## Creating Your First Component
**Design your email section**
Start by designing a complete email section. Make sure to:
* Use Auto Layout on all frames for responsive behavior
* Name all layers clearly
* Use consistent spacing and styles
**Convert to a component**
Select the entire section frame.
Click the diamond icon in the top toolbar (or press `Cmd/Ctrl + Option/Alt + K`).
The frame border turns purple with a four-diamond icon.
**Name your component**
Use forward slashes to create automatic categorization in the Assets panel:
* `Section / Product Card / 2 Column`
* `Hero / Image Left / Dark`
* `Button / Primary / Large`
## Why Auto Layout Matters
Auto Layout is essential for email components because it allows content to adjust dynamically when elements are hidden or shown.
**Best practices:**
* Use vertical direction for stacking content
* Add consistent spacing between elements (16-24px)
* Set appropriate padding (20-40px for mobile, 40-60px for desktop)
When you toggle properties on/off, Auto Layout automatically adjusts spacing and removes gaps. Without it, you'll have awkward empty spaces.
## Adding Properties to Components
Properties are toggles that control visibility without detaching from the component. They give your team simple on/off switches for optional content.
Select your main component (four-diamond icon).
Click into the component and select a specific layer.
In the right sidebar under "Layer", click the property icon next to "Visible".
Click "+ Create boolean property".
For example: "Show image", "Show price", "Show CTA".
**Which elements should have properties:**
* Optional images or graphics
* Supporting headlines
* Price labels or badges
* Secondary CTAs
* Decorative elements
**Keep it simple:**
Limit properties to 5-8 per component maximum. Too many toggles become overwhelming.
## Creating Component Variants
Variants are meaningfully different versions of the same component grouped under one parent. Users can switch between them using a dropdown menu.
**When to use variants:**
* Different layouts (1 column vs 2 column vs 3 column)
* Different visual styles (light theme vs dark theme)
* Different content structures (image left vs image right)
Select the main component on the canvas.
Click the diamond icon and select "Add variant". A new version appears next to your original, grouped in a dashed border.
Make the changes that set this variant apart.
Select the component set (dashed border). In the right sidebar, rename "Variant" to something meaningful (e.g., "Layout").
Click each variant name to rename them (e.g., "2 Column", "3 Column").
**Common variant structures for email:**
* **Headers:** Logo Position (Left, Center), Navigation (Show, Hide)
* **Heroes:** Layout (Image Left, Image Right, No Image)
* **Product Cards:** Columns (1, 2, 3), Style (Bordered, Borderless)
* **Buttons:** Style (Primary, Secondary), Size (Small, Medium, Large)
## Using Properties and Variants Together
The most powerful components combine both properties and variants.
**Example: Product Card**
**Variants control layout:**
* 2 Column
* 3 Column
* Full Width
**Properties control content:**
* Show product image (toggle)
* Show price (toggle)
* Show "Sale" badge (toggle)
* Show secondary CTA (toggle)
This gives your team 3 layout options with flexible content options, without creating dozens of separate components.
## Organizing Your Asset Library
**Create separate pages for component categories:**
* Headers
* Heroes
* Content Sections
* Product Components
* Buttons & CTAs
* Footers
When you open the Assets panel, your page names appear as category headers.
**Add component descriptions:**
1. Select your component
2. Click the three dots menu in the right sidebar
3. Select "Add description"
4. Write clear usage guidelines
Example: "Use this 2-column product card for featuring multiple products in promotional campaigns. Best for 2-4 products maximum."
## Creating Full Template Components
Template components are complete email layouts that prevent structural changes while allowing content updates.
**When to use them:**
* Recurring campaigns (weekly newsletter)
* Highly regulated emails (legal, transactional)
* Templates for less experienced team members
**What users can do:**
* Update text content
* Swap images
* Change links
* Toggle properties
**What they cannot do:**
* Add new sections
* Remove existing sections
* Rearrange components
* Change structural spacing
Create a new frame at 640px width.
Add your header, hero, content, and footer instances.
Ensure proper spacing with Auto Layout.
Select the entire template frame and click the diamond icon.
For example: `Template / Promotional / Product Launch`.
## Publishing Components to Your Team
**Publish to a team library:**
1. Click the Assets panel
2. Click the book icon
3. Select "Publish library"
4. Write a clear description of changes
5. Click "Publish"
**Enable the library in other files:**
1. Open any Figma file
2. Click the Assets panel
3. Click the book icon
4. Find your library and toggle it on
**Update workflow:**
When you update and republish components:
* Users see a blue notification dot
* They can review changes
* They can accept updates individually or all at once
* Content overrides are preserved
## Component Best Practices for Email
**Mobile responsiveness:**
* Design components at 600px width
* Use appropriate touch targets (minimum 44x44px for buttons)
* Keep text readable (minimum 14px for body)
**Dark mode:**
* Create Light and Dark variants for key components
* Or use Figma variables for automatic color mode switching
**Accessibility:**
* Use sufficient color contrast (minimum 4.5:1)
* Make buttons large enough for easy tapping
* Ensure links are distinguishable from body text
**Email client compatibility:**
* Avoid complex overlapping elements
* Keep layouts simple and table-based
* Use web-safe fonts with proper fallbacks
## Using the Ultimate Email Design System
The fastest way to get started:
1. Visit the [Figma Community](https://figma.com/@emaillove)
2. Search for "Email Love Ultimate Design System"
3. Click "Duplicate" to copy it to your files
4. Customize colors, fonts, and spacing for your brand
5. Publish as a team library
**What's included:**
* Hundreds of templates and components with properties and variants
* Complete template examples
* Organized page structure
* Ready to export with the Email Love Figma Plugin
## Common Questions
**What's the difference between hiding a layer and using a property?**
Hiding a layer with the eye icon is manual and doesn't sync across instances. Properties create consistent, reusable toggles that work the same way everywhere.
**Can I edit a component instance without affecting the master?**
Yes. You can change text, swap images, adjust colors, and toggle properties. Structural changes require detaching, which breaks the connection to the main component.
**How many variants should I create?**
Start with 2-4 variants per component. Only create variants for meaningfully different versions. Too many variants make it hard to choose.
**Can I nest components inside other components?**
Yes. You can place button components inside product cards, for example. Keep nesting to 2-3 levels for easier maintenance.
# The Properties Tab
Source: https://help.emaillove.com/plugin/email-properties/properties-tab
How to use the Properties tab to add subject lines, links, alt text, backgrounds, and UTM parameters to your email design
The Properties tab under the Email Love Figma Plugin interface allows you to apply various properties to different components of your email design. This includes adding metadata, customizing backgrounds, and linking URLs. Follow the steps below to understand how to use this feature effectively.
![Animated walkthrough of the Properties tab applying settings to email layers]()
## Layers that Support Properties
Before everything else, you will need to select a layer that you would like to apply properties to. The following layers are supported:
* **Frame:** Add a subject line, preview text, or UTM parameters to your overall email frame.
* **mj-wrapper:** Enables you to turn a section into an image, add a URL, or add a full-width background
* **mj-image-frame:** Add an image URL, alt text, or outside image destination URL
* **mj-button-frame:** Add a URL to your button
## Using the Properties Tab
1. Select the **Properties** tab within the Plugin interface.
2. Select the layer from the list on the left of the Figma interface. The options displayed under the Properties tab change depending on the selected layer.
### To Apply Properties to a Frame
When you select an entire frame, you can:
* Add a subject line and preheader text to the frame.
* Add UTM parameters to any URLs within the frame to track email campaign performance.
### To Apply Properties to a Wrapper
When you select a wrapper, you can:
* Add background color extending across an email's entire width.
* Render a section of the email as an image.
* Add a URL and alt text to any images within the wrapper.
### Apply Properties to an Image or Button
When you select an image or a button within a wrapper or frame, you can:
* Add a URL to make the image or button clickable
* Add an optional Alt Text to the image
* Merge in an external image source by entering the URL of an image hosted on a website. This allows for a dynamic image that pulls from the external source.
## Step-by-Step Instructions
The **Properties** tab will update to show options for adding a subject, preheader, or UTM parameters.
The Properties tab will update to allow changes to the background color and render the content in a wrapper as an image.
Add a URL link to it via the Properties tab.
Add a URL, alt text, or merge an external image source.
## Example Usage
* **Frame Properties**
* Add a subject line like "Welcome to Our Newsletter" and preheader text such as "Stay updated with the latest news."
* Include UTM parameters for better tracking: `utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale`.
* **Wrapper Properties**
* Turn the content in a wrapper into an image
* Add a full-width background color
* **Image Properties**
* Link an image to a specific product page and ensure it has descriptive alt text.
* Use a URL of an image hosted on your website for dynamic content that updates automatically.
## Links Included in Your Email
At the bottom of the Properties tab you'll find a **Links included in your email** section: a numbered list of every URL in the selected template, so you can review and edit all your links in one place without clicking through each layer.
Each row shows the linked text or layer name, plus an editable URL field:
* **Edit any URL inline.** Changes sync back to your design automatically a moment after you stop typing.
* **Validation built in.** If you enter an invalid URL, a red "Please enter a valid URL or merge tag" message appears and the change is not applied until you fix it. Web URLs, `mailto:` and `tel:` links, `#` anchors, and ESP merge tags are all accepted.
* **Bare domains are completed for you.** Type `example.com` and the plugin saves it as `https://example.com`, so your exported HTML never contains a relative link.
This is the fastest way to do a final link QA pass before exporting: select your email frame, open the Properties tab, and scan the list for anything missing or outdated.
### Merge Tags as Link Destinations
You can use an ESP merge tag as any link's destination, perfect for unsubscribe links, preference centers, and view-in-browser links. Type the tag into the link's row in the list and it exports exactly as written. All of the common syntaxes are accepted:
* `{{ var }}`: HubSpot, Braze, Iterable, Customer.io, generic Handlebars
* `{% var %}`: Klaviyo, Liquid
* `*|VAR|*`: Mailchimp
* `%%VAR%%`: Salesforce Marketing Cloud, Pardot
* `{var}`, `%VAR%`, `${var}`, `<>`, `[VAR]`: other platforms
A few things to know:
* **Text links work too, even though Figma rejects merge tags as hyperlinks.** Give the text any placeholder link in Figma first (that's what makes it appear in the list), then replace the URL with your merge tag in the list. The plugin stores the tag itself and swaps it in at export, so the exported HTML contains the tag while your Figma file keeps the placeholder.
* **UTM parameters are never appended to merge tags.** A campaign UTM setting won't corrupt `{{unsubscribe_url}}` into `{{unsubscribe_url}}?utm_...`.
* **Plain text can't be tagged directly.** Text with no link never appears in the list, so always add a placeholder link in Figma first.
# Export Figma emails to ActiveCampaign
Source: https://help.emaillove.com/plugin/export/activecampaign
Export email designs from Figma straight into ActiveCampaign as ready-to-send campaign templates with the Email Love plugin.
The Email Love Figma Plugin pushes your email designs straight into ActiveCampaign's template library. No copy-paste required. Save your ActiveCampaign API URL and API Key once, click Export, and the template (with images and ActiveCampaign-friendly HTML) shows up in your account, ready to use in a campaign or automation. Turn on **Enable Updatable Templates** and re-exporting the same Figma frame overwrites the existing ActiveCampaign template in place instead of creating a duplicate.
[Download the Email Love Figma Plugin here](https://www.figma.com/community/plugin/1387891288648822744/email-love-html-email-builder)
## Prerequisites
Before you begin, make sure you have:
* An active [ActiveCampaign](https://www.activecampaign.com/) account
* Your **API URL** and **API Key** from ActiveCampaign. See [Getting started with the API](https://help.activecampaign.com/hc/en-us/articles/207317590-Getting-started-with-the-API). Both live in ActiveCampaign under **Settings → Developer**.
* The Email Love Figma plugin installed
* At least one email designed in Figma using the plugin
* An Email Love Footer with an Unsubscribe link in your design (required for export)
1. Select the email frame you want to export in Figma
2. Click the **Export** button in the top right of the plugin
3. Pick **ActiveCampaign** from the export dropdown. You can also start typing "active" to filter the list.
The dropdown is alphabetised, so ActiveCampaign sits at the top of the A–Z list of ESPs underneath the HTML, MJML, and Email Love Builder options.
The first time you export to ActiveCampaign you'll see the credentials form. Fill in:
1. **API URL**: your account-specific URL in the format `https://.api-us.com` (for example `https://acme.api-us1.com`). The plugin validates the format and normalises any trailing slash.
2. **API Key**: from the same **Settings → Developer** page
3. **API Key Name**: a friendly name for these credentials (e.g. "Marketing, Production"). You can save multiple ActiveCampaign accounts and switch between them.
4. Click **Set API Key**
ActiveCampaign authenticates with the **API Key** in an `Api-Token` header against your account-specific API URL, so both fields are required. Either alone won't work. Both values are encrypted and stored in the plugin so you only have to enter them once per connection. To swap to a different ActiveCampaign account later, click **Change API key** in the same panel.
1. With ActiveCampaign selected and your credentials loaded, click **Export**
2. The plugin sends your HTML to the Email Love backend, which calls the ActiveCampaign v1 API to create the template using your encrypted API URL and API Key
3. On success you get a **Successfully exported!** toast. Your template is now live in ActiveCampaign.
The template's name in ActiveCampaign is taken from your Figma frame name, so rename the frame before exporting if you want it to show up with a specific title.
Once you've saved an ActiveCampaign credential, an **Enable Updatable Templates** toggle appears below the credentials. With it on, re-exporting the same Figma frame **overwrites the existing ActiveCampaign template in place** instead of creating a duplicate.
How it works:
1. The first export creates a new template and stores the returned ActiveCampaign template ID on the Figma frame's plugin data
2. With **Enable Updatable Templates** on, subsequent exports of the same frame call the ActiveCampaign API to update that template by ID, keeping the same template ID and any campaign references intact
3. If the update fails (for example, the template was deleted in ActiveCampaign), the plugin automatically falls back to creating a new template
4. On a successful update you'll see a **Successfully updated!** toast instead of **Successfully exported!**
Leave the toggle off to always create a new template. Note that the template ID is tied to the Figma frame, so duplicating a frame, renaming it, or opening from a fresh session may cause the plugin to treat it as a brand new template.
1. Log into [ActiveCampaign](https://www.activecampaign.com/login) and open the account you exported to
2. Navigate to **Campaigns → Manage templates** (or **Email templates** depending on your plan)
3. Find the template you just exported (it'll be at the top of the list, named after your Figma frame)
4. Use it in any campaign or automation like you would any other ActiveCampaign template
## Editing Your Template in ActiveCampaign
You can edit the template HTML directly in ActiveCampaign's editor, but for ongoing changes we recommend editing in Figma and re-exporting with **Enable Updatable Templates** on, so your Figma file stays the single source of truth and the template ID in ActiveCampaign stays stable.
## What the Plugin Does for You
* **Pushes the template to ActiveCampaign** via the v1 API using your saved API URL + API Key
* **Hosts your images** so they render correctly when ActiveCampaign sends the email
* **Handles unsubscribe links**: the Email Love Footer's unsubscribe link is preserved so it works with ActiveCampaign's send infrastructure
* **Generates responsive, deliverable HTML** that renders consistently across major email clients
* **Stores credentials per account**: switch between multiple ActiveCampaign accounts from the same Figma file via the **API Key Name** dropdown
* **Encrypts both fields**: API URL and API Key are AES-encrypted in the plugin's local storage
* **In-place updates (optional)**: with Updatable Templates on, re-exports keep the same ActiveCampaign template ID instead of creating duplicates
## Troubleshooting
**Authentication errors / 401:** ActiveCampaign requires **both** the account-specific API URL and the API Key. Open **Change API key**, re-paste both from **Settings → Developer** in ActiveCampaign, and make sure they're from the same account. A key from one account won't authenticate against another account's URL.
**"Invalid API URL" format error:** Your API URL must match `https://.api-us.com` (for example `https://acme.api-us1.com`). Don't paste the marketing site URL (`activecampaign.com`) or your login URL. It has to be the developer API URL from **Settings → Developer**.
**Wrong account / template went somewhere unexpected:** Each ActiveCampaign API Key + URL pair is scoped to one ActiveCampaign account. If you have multiple accounts (e.g. Production, Staging) make sure you saved the right pair under a clear connection name. Add a new connection if needed and switch between them via the **API Key Name** dropdown.
**"Enable Updatable Templates" created a new template anyway:** The toggle only updates a template the plugin previously created from this exact Figma frame. If you duplicated the frame, renamed it, or it's a brand new frame, the plugin will create a new template instead. The plugin also falls back to creating a new template if the original was deleted in ActiveCampaign.
**Unsubscribe link not working:** Make sure your design includes an Email Love Footer with an Unsubscribe link. Without one, the plugin can't wire up the unsubscribe handling for ActiveCampaign.
**Template shows up but content looks broken:** Re-export rather than editing the HTML directly in ActiveCampaign. For ongoing changes, treat Figma as the source of truth and use **Enable Updatable Templates** to push updates.
**Need help?** Join our [Discord community](https://discord.com/invite/ANv9PjVdzP) or reach out to our support team at [hello@emaillove.com](mailto:hello@emaillove.com) for assistance.
## Related Articles
* [Export Overview](/plugin/export/overview): Understand all export options and how the plugin converts your Figma design to HTML
* [Image Hosting](/plugin/images/hosting): How the plugin handles image hosting during export
# Export Figma emails to Airship
Source: https://help.emaillove.com/plugin/export/airship
Export email designs from Figma into Airship as message templates with the Email Love plugin.
The Email Love Figma Plugin pushes your email designs straight into Airship as message templates. No copy-paste required. Save your Airship App Key and Master Secret once, click Export, and the email (plus all of its images) shows up in your Airship workspace, ready to use in a campaign or journey.
[Download the Email Love Figma Plugin here](https://www.figma.com/community/plugin/1387891288648822744/email-love-html-email-builder)
## Prerequisites
Before you begin, make sure you have:
* An active [Airship](https://www.airship.com/) account
* An **App Key** and **Master Secret** for the Airship project you want to send to. See [Airship's docs on App Keys & Secrets](https://www.airship.com/docs/guides/getting-started/developers/app-keys-secrets/).
* The Email Love Figma plugin installed
* At least one email designed in Figma using the plugin
* An Email Love Footer with an Unsubscribe link in your design (required for export)
1. Select the email frame you want to export in Figma
2. Click the **Export** button in the top right of the plugin
3. Pick **Airship** from the export dropdown
The dropdown is alphabetised, so Airship sits at the top of the A–Z list of ESPs underneath the HTML, MJML, and Email Love Builder options.
The first time you export to Airship you'll see the credentials form. Fill in:
1. **App Key**: from your Airship project settings
2. **Master Secret**: from your Airship project settings (treat it like a password)
3. **Region**: pick one:
* **United States** (`go.urbanairship.com`)
* **Europe** (`go.airship.eu`)
The region must match the Airship data centre your project lives in, otherwise the credentials will fail.
4. **Connection Name**: a friendly name for this set of credentials (e.g. "Marketing, Production"). You can save multiple Airship connections and switch between them.
5. Click **Save Credentials**
Your credentials are encrypted and stored in the plugin so you only have to enter them once per connection. To swap to a different Airship project later, click **Change credentials** in the same panel.
1. With Airship selected and your credentials loaded, click **Export**
2. The plugin sends your HTML and images to the Email Love backend, which pushes the message template to Airship via the API
3. On success you get a confirmation toast. Your template is now live in Airship.
The template's name in Airship is taken from your Figma frame name, so rename the frame before exporting if you want it to show up with a specific title.
If you've already exported this Figma frame to Airship at least once and want to push changes to the same template instead of creating a brand new one:
1. In the Airship credentials panel, toggle on **Update existing templates**
2. Click **Export**
The plugin remembers the Airship template ID for each Figma frame (stored as plugin data on the frame itself), so the update only works for frames that have been previously exported. If you duplicate a frame, rename it, or open the file from a fresh Figma session, the plugin treats it as a new template.
Leaving the toggle off always creates a new template in Airship.
1. Log into [Airship](https://go.urbanairship.com/) (or `go.airship.eu` for the EU region) and open the project you exported to
2. Navigate to **Messages → Templates**
3. Find the template you just exported (it'll be at the top of the list, named after your Figma frame)
4. Use it in any campaign, automation, or journey like you would any other Airship message
## Editing Your Email in Airship
You can edit the template directly in Airship's message editor. For larger design changes we recommend editing in Figma and re-exporting with **Update existing templates** turned on, so your Figma file stays the single source of truth.
## What the Plugin Does for You
* **Hosts your images** so they render correctly when Airship sends the email
* **Inserts the unsubscribe handling**: the Email Love Footer's unsubscribe link is preserved so it works with Airship's send infrastructure
* **Generates responsive, deliverable HTML** that renders consistently across major email clients
* **Region-aware**: sends to the US or EU Airship API based on what you select in the credentials panel
* **Stores the connection per-credential-set**: switch between multiple Airship workspaces from the same Figma file
## Troubleshooting
**Authentication errors / 401:** Double-check the **App Key** and **Master Secret** are copied from the same Airship project, and that the **Region** matches the data centre your project lives in (US vs EU). Re-open **Change credentials** to update them.
**Region mismatch:** If your Airship URL starts with `go.airship.eu` you must select **Europe**. If it starts with `go.urbanairship.com` you must select **United States**. The wrong region will reject your credentials.
**"Update existing templates" created a new template anyway:** The toggle only updates a template the plugin previously created from this exact Figma frame. If you duplicated the frame, renamed it, or it's a brand new frame the plugin has never exported, it'll create a new template instead.
**Unsubscribe link not working:** Make sure your design includes an Email Love Footer with an Unsubscribe link. Without one, the plugin can't wire up the unsubscribe handling for Airship.
**Template shows up but content looks broken:** Re-export rather than editing the HTML directly in Airship. For ongoing changes, treat Figma as the source of truth and use **Update existing templates** to push updates.
**Need help?** Join our [Discord community](https://discord.com/invite/ANv9PjVdzP) or reach out to our support team at [hello@emaillove.com](mailto:hello@emaillove.com) for assistance.
## Related Articles
* [Export Overview](/plugin/export/overview): Understand all export options and how the plugin converts your Figma design to HTML
* [Image Hosting](/plugin/images/hosting): How the plugin handles image hosting during export
# Export Your First Email
Source: https://help.emaillove.com/plugin/export/basics
Check your email, choose an export destination, handle images and credentials, then send a real inbox test
Export turns the selected Email Love frame into production email code or sends it directly to your platform.
This page covers the first-export flow. For the full destination list and feature comparison, see [Export Overview](/plugin/export/overview).
## Before you export
Finish these checks first:
1. Run [Copilot](/plugin/ai/copilot) and fix structural errors.
2. Open [Preview](/plugin/preview/overview) and check desktop, mobile, fallback fonts, and dark mode.
3. Verify the subject, preheader, links, alt text, merge tags, and unsubscribe link.
4. Rename the top-level email frame with the template name you want to see in your ESP.
If Copilot reports a problem you cannot place, use the [Claude or Codex preflight prompt](/plugin/ai/agent-help#prompts-for-common-jobs) for a read-only inspection of the Figma frame.
## 1. Select the whole email frame
Select the outer email frame on the Figma canvas. Do not select a Wrapper, Section, component, or text layer inside it.
If the plugin says the selection is not a valid email template, return to the Layers panel and select the top-level frame that contains every section.
## 2. Open Export
Click **Export** in the plugin. The export screen shows the destinations available on your plan and lets you search the list.
## 3. Choose a destination
Pick the route that matches what happens next:
| Route | Use it when |
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **HTML** | Your ESP accepts HTML uploads, or a developer needs the compiled file |
| **MJML** | Your team maintains MJML source or compiles it in another workflow |
| **Direct ESP integration** | You want the plugin to create or update a template in Klaviyo, Braze, Iterable, Customer.io, or another supported platform |
| **Builder** | Your team will continue editing the email in the browser |
| **Webhook, Zapier, or Make** | You want to send the HTML into an automated workflow |
See [Export Overview](/plugin/export/overview#supported-destinations) for all supported destinations and the guide for each integration.
## 4. Connect the destination if needed
HTML and MJML downloads do not need an API connection. Direct integrations ask for the credentials required by that platform.
Use credentials with only the permissions the integration needs. Never paste API keys into a Claude, Codex, support, or Discord message. Store them only in the plugin's connection screen.
When a destination supports [Updatable Templates](/plugin/export/updatable-templates), turn it on if future exports should update the same remote template instead of creating duplicates.
## 5. Choose image handling
The standard export uploads Figma images to the Email Love CDN and inserts the hosted URLs into your email.
You can also:
* Connect your own S3, Cloudflare R2, Google Cloud Storage, or other supported provider
* Export images in a ZIP when the destination requires a manual upload
* Keep an external image URL for dynamic images such as countdown timers
See [Image Hosting](/plugin/images/hosting) for storage setup, image formats, and troubleshooting.
## 6. Confirm the email details
Review the template name, subject, and preheader before the final export. The preheader should extend the subject, not repeat it.
Destination-specific merge tags are applied during export. Check the final output in your ESP, especially unsubscribe, personalization, and dynamic-content tags.
## 7. Export
Click the final **Export** button. Depending on the destination, the plugin downloads a file, opens a browser download, calls the ESP API, or sends a webhook request.
Do not close the plugin until it confirms the export completed or shows an error you can copy.
## Test the result
An export is not the final test. Before scheduling the campaign:
1. Open the template in your ESP and confirm the name and location.
2. Send a test to a real inbox.
3. Open it on desktop and mobile.
4. Click every important link.
5. Confirm images load and alt text is useful when they do not.
6. Check merge tags, dynamic content, and unsubscribe behavior with test data.
7. Use Litmus, Email on Acid, or InboxMonster for high-stakes cross-client testing.
## Common problems
### The plugin says to select an email template
Select the outer email frame, not a component inside it. If that frame still is not recognized, see [Troubleshooting](/plugin/getting-started/troubleshooting#export-fails-with-an-error).
### The API connection fails
Open the guide for your destination and confirm the key, region, account ID, and permission scopes. Redact credentials before sharing the error with support.
### The export creates duplicates
Check whether the destination supports [Updatable Templates](/plugin/export/updatable-templates). The update ID is stored on the Figma email frame, so exporting a copy of the frame may create a new remote template.
### Images do not appear
Check the [Image Hosting troubleshooting guide](/plugin/images/hosting#troubleshooting). If the ESP re-hosts images, inspect the final URLs inside the ESP as well.
### The inbox version looks different from Figma
Small font and spacing differences are normal across email clients. Larger layout differences usually come from fixed-height text, column stacking, fallback fonts, or invalid structure. Compare [Preview](/plugin/preview/overview) first, then use [Get Help from Claude or Codex](/plugin/ai/agent-help) for a read-only diagnosis.
## Related articles
* [Export Overview](/plugin/export/overview)
* [Updatable Templates](/plugin/export/updatable-templates)
* [Image Hosting](/plugin/images/hosting)
* [Previewing an Email Design](/plugin/preview/overview)
* [Troubleshooting and FAQ](/plugin/getting-started/troubleshooting)
# Export Figma emails to Blueshift
Source: https://help.emaillove.com/plugin/export/blueshift
Export email designs from Figma into Blueshift as email templates with the Email Love plugin.
The Email Love Figma Plugin connects directly to Blueshift, letting you export professionally designed emails from Figma straight into Blueshift Templates. Stop re-building your Figma designs in HTML or in a drag-and-drop builder and cut your email production time in half.
[Download the Email Love Figma Plugin here](https://www.figma.com/community/plugin/1387891288648822744/email-love-html-email-builder)
The Export feature in the Email Love Figma plugin allows you to easily convert your email design into email-friendly HTML or MJML, or directly export it to Blueshift.
**Follow these steps to export your email design.**
Ensure that your email design is finalized and ready for export, then click on the frame you want to export to ensure it is selected. Please note, you will need to use an Email Love Footer with an Unsubscribe link for the export to work. We will automatically merge in the Blueshift Unsubscribe token.
Click the Export button located in the top right corner of the Plugin interface.
On the Export page, select "Blueshift" from the dropdown menu.
If you have not added your Blueshift API key, click "Change API Key."
Login to your Blueshift Account and navigate to Account Settings > API Keys.
Click on "User API Key."
Copy the API key to your clipboard.
Paste your API key into the "Blueshift API Key" box in the Email Love Figma Plugin.
Give your API key a name (useful if you have multiple Blueshift accounts or brands).
Select which region your API key uses (US or EU).
Click the "Set API Key" button.
Click the "Export to Blueshift" button at the top of the plugin.
Navigate back to Templates > Email Templates in Blueshift to find your email.
## Customizing your email before export
The Email Love Figma Plugin lets you configure all the details you'd normally set up in your ESP directly within Figma:
**Images:** Select any image and use the Properties tab to add the image URL, alt text, or override the image source for dynamic content (Movable Ink, Nifty Images, countdown timers, etc.).
**Buttons:** Select any button and add the destination URL in the Properties tab.
**Personalization:** Add Blueshift merge tags like `{{user.firstname}}` directly in your text layers.
**Mobile styles:** Select any element and go to Mobile Styles to hide on mobile/desktop, adjust padding, or change font size, line height, and alignment.
## Previewing your email
Before exporting, use the Preview tab to check your email on desktop, mobile, and dark mode. The Appearance tab lets you customize light and dark mode rendering settings, including iOS-specific dark mode behavior and Google font fallbacks.
## Edit your email inside of Blueshift
Once you have exported your email, you can navigate to Templates > Email Templates inside of Blueshift where you can then send it to your recipients or edit the content directly in the HTML.
## Related Articles
* [Export Overview](/plugin/export/overview): Understand all export options and how the plugin converts your Figma design to HTML
* [Image Hosting](/plugin/images/hosting): How the plugin handles image hosting during export
![Blueshift email templates screen showing an exported Email Love template]()
# Export Figma emails to Braze
Source: https://help.emaillove.com/plugin/export/braze
Connect your Braze account and export email designs from Figma as Braze templates, including content blocks and in-place updates.
The Email Love Figma plugin streamlines the process of exporting your email designs directly to Braze, eliminating manual HTML transfers and maintaining design integrity. The plugin automatically handles responsive coding, unsubscribe links, and localization tags.
## Export Process
* Finalize your email design
* Select the frame you want to export
* Ensure you're using an Email Love Footer with an Unsubscribe link (required for export)
* Click the "Export" button in the top-right corner of the plugin
* Select "Braze" from the dropdown menu
**API Key Setup:**
* Click "Change API Key"
* In Braze, go to Settings > API & Identifiers
* Click "New API Key"
* Name your key and select "Templates" under Permissions
* Click "Create API Key"
* Copy the API key to the Email Love plugin and click "Set API Key"
**Instance ID Setup:**
* Click "Change Instance ID"
* Select your Braze instance ID from the dropdown
* Not sure about your instance ID? [Read the Braze documentation](https://www.braze.com/docs/user_guide/administrative/access_braze/sdk_endpoints)
* **Localization:** Check "Add localization tag" to automatically wrap text with Braze translation tags
* **Template naming:** Enter a name for your email template in Braze
* Click "Export to Braze" button
* The plugin will convert your design to responsive HTML and send it to your Braze account
* Your new template will appear in Braze under Templates > Email Templates
## Advanced Features
* **Automatic token integration:** Braze unsubscribe tokens are automatically merged into your footer
* **Translation support:** Enable localization tags for multilingual campaign support
* **Responsive design:** All exports are optimized for mobile and desktop viewing
![Plugin export panel configured for Braze with API key, instance ID, and localization options]()
## Apply Braze Translation Tags to your email
The Email Love Figma Plugin offers seamless localization capabilities when exporting to Braze, automatically wrapping all HTML text content with Braze translation tags. This feature eliminates the need to manually apply translation tags in Braze, saving significant time for teams managing multilingual email campaigns.
## How It Works
Design your email using the Email Love plugin in your primary language (typically English, but can be any language).
* Click the "Export" button in the Email Love plugin
* Select "Braze" from the dropdown menu
* Check the "Add localization tag" box
* Click "Export"
* Your email HTML will be generated with Braze translation tags (`{% translation %}`) automatically wrapped around all text content
* Each text element receives a unique ID for translation tracking
* Translation tags are applied to headings, paragraphs, buttons, and footer text (but not text within images)
* Navigate to your campaign in Braze
* Add desired locales (e.g., French, German)
* Save as draft
* Connect your translation service (Smartling, Localize, Crowdin, etc.) with Braze
* Select your campaign for translation
* Request translations using your service's workflow
* In Braze, use the "Multi-language user" option in the preview
* Select different languages to review translations
## Edit your email inside of Braze
Once you have exported your email, you can navigate to Templates > Edit Templates > Edit Message. Inside of the template editor you will have the option to either edit your email HTML or use a Rich Text editor when you click on the "Classic" tab.
## Export a Braze Content Block
In addition to exporting full email templates, you can also export individual sections of your email as Braze Content Blocks. Content blocks are reusable HTML snippets that can be inserted into multiple email templates within Braze. Perfect for shared headers, footers, promotional banners, or any component you want to manage in one place.
### How to Export a Content Block
In Figma, place the content you want to export as a content block into its own frame.
Select the frame.
In the plugin, click the **Export** button.
Select **Braze Content Block** from the export dropdown.
Enter a name for your content block.
Click **Export to Braze Content Block**. Your content will be uploaded to Braze as a content block, ready to be inserted into any email template.
### Important Notes About Content Blocks
* **Head tags are removed:** When exporting as a content block, the plugin strips out the ``, ``, and `