The Import tab in New Email lets you start with existing email code instead of building every Row and Column from scratch. Paste HTML or MJML, or choose a file, then review the source before creating an editable Emailify frame.
Import is experimental and currently available in locally enabled development builds. It is hidden in the standard plugin build. The steps below apply when your New Email modal includes Import.
Supported sources
- HTML: paste email HTML or choose an
.htmlor.htmfile. - MJML XML: paste a complete
<mjml>document or choose an.mjmlor.xmlfile. - MJML JSON: paste a standard MJML component tree or choose a
.jsonfile. - Copied email packages: paste a package from the experimental Copy to Emailify extension.
Keep the input under 2 MB. MJML must also compile to HTML within that limit. .eml messages, ZIP files and arbitrary JSON are not supported. For an .eml message, extract its HTML body and make its image assets accessible before importing.
Use accessible image URLs. Images that require a login, local files and attachment references such as cid: may need to be replaced with hosted assets.
Looking for an email to try? Visit Really Good Emails, open an email, and select Code to view its HTML source. Copy the HTML, paste it into Emailify's Email code field in the Import tab, then click Preview Import to review it before creating the email.
Import an email
- Open Emailify in Figma.
- Click the + icon in the plugin header to open New Email.
- Select Import, at the end of the tab row.
- Paste your email code into Email code, then click Preview Import. Alternatively, click Choose file to load and analyze a supported file.
- Review Preview and any Notes. Check that the source contains the text, images and backgrounds you expect.
- Enter an Email name, then click Create Email.
- Inspect the created Emailify frame and its editable layers.
- Use Emailify's HTML preview to check the generated desktop and mobile output before exporting.
The Import panel previews the source email. It does not show the final HTML exported from the reconstructed Emailify layers. Always check the created frame and Emailify's generated preview separately.
Editing the source clears the previous import preparation. Click Preview Import again before creating the updated email.
Import MJML
Provide one complete MJML document with one mj-body. For example:
<mjml>
<mj-body width="600px">
<mj-section>
<mj-column>
<mj-text>Hello from Emailify</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>The equivalent JSON uses tagName, attributes, children and content:
{
"tagName": "mjml",
"children": [{
"tagName": "mj-body",
"attributes": { "width": "600px" },
"children": [{
"tagName": "mj-section",
"children": [{
"tagName": "mj-column",
"children": [{ "tagName": "mj-text", "content": "Hello from Emailify" }]
}]
}]
}]
}Emailify validates MJML using MJML4, renders it to HTML, then reconstructs editable layers from that HTML. This is not a direct restoration of the original MJML component tree. Review custom CSS, fonts, spacing and responsive behavior after import.
- Inline
mj-includecontent before importing; included files are not loaded. - Replace
mj-rawwith editable MJML components, or import its rendered HTML for review. - Use a static version of MJML accordions and carousels; interactive components are not supported as editable imports.
- Remove XML DOCTYPE and entity declarations. Fix invalid component structure or attributes before retrying.
Check the result
Compare the created email with the source on desktop and at a narrow mobile width, such as 375px. Check all text, images, background images, buttons and link destinations, then inspect column stacking, wrapping and padding.
Import attempts to map the source into Emailify's supported layout structure. Complex nesting, custom CSS and unavailable assets can require manual adjustments. Successful source preparation does not certify an exact visual match or delivery behavior in every email client.
If preparation fails, open Notes for the reported issue. Correct the source or replace inaccessible assets, then preview again. If the created layout needs adjustment, use Rows, Columns and responsive settings, then follow the email testing guide.