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 available exclusively to Growth plan subscribers. If you are on the Starter or free plan, you will need to upgrade to access AI Studio. 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 to Frame.
- 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.
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 Composa 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.
Related Articles
- Generate Emails with AI Studio - How to generate emails from campaign briefs using file uploads
- How to Get the Best Results from Generate from Brief - Best practices for design systems and brief writing
- Creating and Managing Design Systems - How to set up and manage the design systems that power AI Studio
Powered by