Skip to main content
You can bring an existing email into Email Love. The right route depends on how much you have and what you want to reuse afterward.

​
Choose the smallest route that fits

One email or section

Use AI Import to convert a screenshot, PNG, or Figma design into an editable Email Love frame.

A full email library

Use Claude or Codex to audit the source, build foundations, and migrate reusable modules in reviewed batches.

Build it by hand

Recreate the design with Email Love components when you want direct control over every section.
Not sure which route fits? Ask Claude or Codex to compare them. Tell it how many emails you have and whether you need one converted template or a reusable design system.

​
Convert one design with AI Import

AI Import is the fastest route for one email, one section, or a small set of designs.
1

Prepare the source

Put a clean screenshot, PNG, or Figma frame on your canvas. Use the highest-resolution source you have.
2

Select the source

Select the frame or image you want to convert.
3

Run AI Import

Open AI Studio → Import Design, then click Convert Selected Frame(s).
4

Review the result

Replace image placeholders, check fonts and spacing, apply mobile settings, and preview before export.
AI Import gives you real Email Love structure, not a screenshot slice. It is a strong first draft, but it will not reproduce every design pixel for pixel. See Import Existing Designs with AI Import for batch limits, recache controls, and cleanup guidance.

​
Migrate a library with Claude or Codex

Do not convert a large library one email at a time. Repeated emails usually share the same headers, heroes, content rows, buttons, and footers. A migration finds those repeated modules and builds each one once. The Email Love migration workflow:
  1. Audits the source without changing it
  2. Produces an inventory and effort estimate
  3. Builds brand foundations in a separate Figma file
  4. Converts reusable modules in small batches
  5. Pauses for design review between batches
It can start from Figma, local HTML or .eml files, screenshots, cloud folders, and supported ESPs. See Migrating an Existing Design System or Template for sources, setup, and the exact install steps.

​
Rebuild manually

Choose this route for a single design when you want to make every structural decision yourself.

​
1. Break the design into rows

Identify each horizontal band: header, hero, content, product grid, CTA, and footer. For each band, note:
  • The number of columns
  • The text, image, button, divider, or spacer in each column
  • The background, padding, alignment, and mobile behavior

​
2. Create an Email Love frame

Open the plugin and create a new email frame. Set the email width and theme colors before you add content.

​
3. Rebuild from components

Start with the closest pre-built Wrapper or use Build Your Own to add an empty layout. Keep the Email Love hierarchy intact:
  1. Wrapper
  2. Section
  3. Column
  4. Text, image, button, divider, or spacer
Do not paste ordinary Figma frames into the email and expect them to export. Standard layers do not carry the Email Love structure the exporter needs.

​
4. Apply brand styling

  • Set brand fonts and an email-safe fallback
  • Apply colors and spacing through the existing component controls
  • Replace image placeholders with 2x assets
  • Add real links and useful alt text
  • Add an unsubscribe link in the footer

​
5. Check mobile and export

Use Mobile Styles to adjust stacking, padding, alignment, and visibility. Then run Copilot, check Preview, and follow the export checklist.

​
Ask an agent to inspect your rebuild

If you built the design manually, Claude or Codex can check the result without changing it:
See Get Help from Claude or Codex for setup and more troubleshooting prompts.

​
Common questions

​
Can I paste my existing Figma design into an Email Love frame?

Not directly. Ordinary Figma layers do not contain Email Love’s export structure. Select the existing frame and run AI Import, migrate the library with an agent, or rebuild it with Email Love components.

​
Can I import an HTML email?

For one email, render the HTML as a screenshot and use AI Import. For a folder or library of HTML and .eml files, use the agent-led migration workflow so repeated modules are audited and deduplicated first.

​
Should I convert every email I have sent?

Usually not. Start with the templates and modules your team still uses. A migration audit can show how many distinct blocks your library actually contains before you commit to the rebuild.

​
What if the design uses animation, forms, or complex web layouts?

Some web patterns do not translate safely to email. Interactive forms, embedded video players, hover states, and complex CSS animation usually need a simpler email-friendly replacement. See Email Fundamentals and Email Client Compatibility.