Skip to main content
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.

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

Get an image of the email

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

Select it on your canvas

Select that element on your Figma canvas.
3

Open Import Design

Open the AI Studio tab in the plugin and go to the Import Design tab.
4

Convert it

Click Convert Selected to Frame.
5

Let the AI work

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

Edit the result

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.

​
Where to Find Email Designs to Import

If you are looking for email inspiration to import, 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 section of the generated email and save it as a component in your design system. This is a fast way to build out a complete component library without starting from zero. Just rename each section, go into the relevant category in the plugin, and save it.

​
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 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 and reverse stacking
    • Export to any supported ESP (Klaviyo, Braze, Iterable, OneSignal, etc.)
    • Sync to the Email Love Builder for team editing
  • You can save individual sections 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. 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. We’re happy to help you get set up.