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.
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 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:
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 Frame(s).
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.

​
Converting Several Designs at Once

You can select as many frames as you like before you convert. The plugin records exactly which frames you selected at the moment you click convert, works through them three at a time, and puts a separate email template on your canvas for each one. Three things to know about a batch:
  • Every frame you selected gets converted. The batch tracks your original frames by ID, so it doesn’t matter if the selection changes while the run is going. You can keep working in the file.
  • Results are laid out in a row. Each template lands next to the previous one, in the same order as your selection, so nothing stacks on top of anything else.
  • Each result is named after its source frame. Convert a frame called Spring Sale Hero and the template is called Spring Sale Hero, ready to save to your design system without a rename. A frame with no name falls back to EmailLove_clone.
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.
When the run ends, the plugin selects all the templates it created and zooms to show them once, rather than moving the viewport as each one lands.

​
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. 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 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 are laid out in a row in the same order as your selection.
  • Each result is named after the frame it came from, so it can go straight into your design system. Rename any Wrappers you plan to keep before uploading them, so your library stays easy to scan.
  • When the run ends, all the new templates are selected and the viewport zooms to show them.
  • 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 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. The end-of-run summary tells you how many failed. 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.