The Email Love Figma Plugin cannot import or convert existing email designs—whether they're HTML files, Figma mockups, or templates from another tool. To export valid, responsive email code, your design must be built using Email Love components. This guide walks you through rebuilding an existing design using the Email Love component library so you can manage, update, and export it going forward.
Important: Why You Need to Rebuild
The Email Love plugin doesn't convert existing HTML or Figma designs into exportable emails. Your existing design needs to be rebuilt using Email Love components for the plugin to generate valid, responsive email code.
This isn't a limitation—it's by design. The plugin relies on a specific MJML layer structure to produce bulletproof HTML that renders correctly across every email client. A standard Figma frame, no matter how pixel-perfect, doesn't contain the structural information the plugin needs to generate tables, inline styles, VML fallbacks, and responsive breakpoints.
The good news: rebuilding is faster than you think, especially when you're working from an existing design rather than starting from scratch.
Step 1: Analyze Your Existing Design
Before you start rebuilding, break your current email down into its structural components. Open your existing design (whether it's a Figma file, an HTML file, or a screenshot from your ESP) and identify:
- Sections: Each horizontal band of content (hero, body, footer, etc.)
- Columns: How many columns each section uses (1, 2, 3, or 4)
- Content types: What's in each column—text, images, buttons, spacers, dividers
- Styling: Colors, fonts, spacing, border radius, backgrounds
Sketch out the structure on paper or in a simple list. This becomes your rebuild blueprint.
Step 2: Set Up Your Email Frame
- Open the Email Love plugin in Figma
- Create a new email frame at 640px width (or your preferred width)
- Set your background color to match your existing design
Step 3: Rebuild Section by Section
Work from top to bottom, recreating each section of your original email:
For each section:
- Drag a Section component from the Email Love library into your frame
- Set the column count to match your original layout (1–4 columns)
- Add content components into each column—use Email Love's Text, Image, Button, Spacer, and Divider components
- Style to match your original design using Figma's properties (colors, fonts, spacing, border radius)
💡 Pro tip: Don't try to match your existing design pixel-for-pixel. Email clients render things differently than browsers, so aim for "visually equivalent" rather than "identical." The Email Love components are already optimized for email client compatibility.
Using Pre-Built Components
Before rebuilding a section from scratch, check if Email Love's 100+ pre-built components already have something similar. A pre-built hero section, product grid, or footer will save you significant time—just swap in your colors, fonts, and content.
Step 4: Apply Your Brand Styling
Once the structure is in place, fine-tune the visual details:
- Fonts: Set your brand fonts in the plugin's Configure Fonts panel. Remember to set web-safe fallbacks since custom fonts only work in Apple Mail.
- Colors: Apply your brand colors using Figma's fill properties. Consider how they'll look in dark mode.
- Spacing: Match the padding and margins from your original. Use Figma's Auto Layout for precise control.
- Images: Replace placeholder images with your actual assets. Export at 2x resolution for retina displays.
Step 5: Set Up Mobile Styles
Your original design may not have been optimized for mobile. Take this opportunity to improve the mobile experience:
- Open the Mobile Styles tab in the plugin
- Adjust font sizes for mobile readability (16px minimum for body text)
- Reduce padding for narrower screens
- Consider hiding non-essential elements on mobile
- Ensure buttons are at least 44px tall for easy tapping
See the Mobile Optimization article for detailed guidance.
Step 6: Preview and Export
- Preview your rebuilt email in desktop and mobile views
- Check for issues — verify the MJML structure is correct, images have alt text, and links are working
- Export as HTML, MJML, or directly to your ESP
Common Questions
Can I copy-paste my existing Figma design into an Email Love frame?
No. Pasting standard Figma layers into an Email Love frame won't work because the layers lack the MJML component structure the plugin needs. You need to use Email Love components (sections, columns, text, images, buttons) and style them to match your design.
How long does it take to rebuild an email?
A typical marketing email with 5–8 sections takes 30–60 minutes to rebuild using Email Love components. Once you've built it once, future emails using the same layout are much faster—save your sections as Figma components for reuse.
Should I rebuild every email I've ever sent?
No. Focus on rebuilding your core templates—the layouts you use repeatedly. Most teams have 3–5 base templates that cover 90% of their emails. Rebuild those, save them as reusable templates, and use them going forward.
My existing email uses features that don't seem to work in the plugin
Some features from web-based email builders don't translate to MJML. If your existing design uses interactive forms, embedded video, or complex CSS animations, you'll need to simplify those sections. See the Email Fundamentals article for what's supported across email clients.
Next Steps
- Save your rebuilt email as a template for future reuse
- Build a component library from your brand's most-used sections
- Read the Email Fundamentals article to understand why email HTML works the way it does
Need help rebuilding a complex email? Reach out at support@emaillove.com or join our Discord community.
Powered by