L’onglet Import de la fenêtre New Email vous permet de partir d’un code d’email existant plutôt que de construire chaque Row et chaque Column de zéro. Collez du HTML ou du MJML, ou choisissez un fichier, puis vérifiez la source avant de créer un frame Emailify modifiable.

Import est expérimental et n’est actuellement disponible que dans les versions de développement activées en local. Il est masqué dans la version standard du plugin. Les étapes ci-dessous s’appliquent lorsque votre fenêtre New Email comporte Import.

Sources prises en charge

• HTML : collez le HTML d’un email ou choisissez un fichier .html ou .htm.
• MJML XML : collez un document <mjml> complet ou choisissez un fichier .mjml ou .xml.
• MJML JSON : collez une arborescence de composants MJML standard ou choisissez un fichier .json.
• Paquets d’email copiés : collez un paquet issu de l’extension expérimentale Copy to Emailify.

La source doit peser moins de 2 Mo. Le MJML doit aussi se compiler en HTML dans cette limite. Les messages .eml, les fichiers ZIP et le JSON arbitraire ne sont pas pris en charge. Pour un message .eml, extrayez son corps HTML et rendez ses images accessibles avant l’import.

Utilisez des URL d’images accessibles. Les images qui nécessitent une connexion, les fichiers locaux et les références à des pièces jointes comme cid: devront peut-être être remplacés par des ressources hébergées.

Vous cherchez un email pour essayer ? Rendez-vous sur Really Good Emails, ouvrez un email et sélectionnez Code pour afficher sa source HTML. Copiez le HTML, collez-le dans le champ Email code de l’onglet Import d’Emailify, puis cliquez sur Preview Import pour le vérifier avant de créer l’email.

Importer un email

1. Ouvrez Emailify dans Figma.
2. Cliquez sur l’icône + à côté du sélecteur d’email pour ouvrir New Email.
3. Sélectionnez Import, à la fin de la rangée d’onglets.
4. Collez le code de votre email dans Email code, puis cliquez sur Preview Import. Vous pouvez aussi cliquer sur Choose file pour charger et analyser un fichier pris en charge.
5. Vérifiez Preview et les éventuelles Notes. Assurez-vous que la source contient bien les textes, images et arrière-plans attendus.
6. Saisissez un Email name, puis cliquez sur Create Email.
7. Examinez le frame Emailify créé et ses calques modifiables.
8. Utilisez l’aperçu HTML d’Emailify pour vérifier le rendu desktop et mobile généré avant l’export.

Le panneau Import affiche un aperçu de l’email source. Il ne montre pas le HTML final exporté à partir des calques Emailify reconstruits. Vérifiez toujours séparément le frame créé et l’aperçu généré par Emailify.

Toute modification de la source efface la préparation d’import précédente. Cliquez de nouveau sur Preview Import avant de créer l’email mis à jour.

Importer du MJML

Fournissez un seul document MJML complet, avec un seul mj-body. Par exemple :

<mjml>
  <mj-body width="600px">
    <mj-section>
      <mj-column>
        <mj-text>Hello from Emailify</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

L’équivalent JSON utilise tagName, attributes, children et 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 valide le MJML avec MJML4, le convertit en HTML, puis reconstruit des calques modifiables à partir de ce HTML. Il ne s’agit pas d’une restauration directe de l’arborescence de composants MJML d’origine. Vérifiez le CSS personnalisé, les polices, les espacements et le comportement responsive après l’import.

• Intégrez le contenu des mj-include avant l’import : les fichiers inclus ne sont pas chargés.
• Remplacez mj-raw par des composants MJML modifiables, ou importez son HTML rendu pour le vérifier.
• Utilisez une version statique des accordéons et carrousels MJML : les composants interactifs ne sont pas pris en charge en import modifiable.
• Supprimez les déclarations DOCTYPE et d’entités XML. Corrigez toute structure ou tout attribut de composant invalide avant de réessayer.

Vérifier le résultat

Comparez l’email créé à la source sur desktop et à une largeur mobile étroite, par exemple 375px. Vérifiez tous les textes, images, images d’arrière-plan, boutons et destinations de liens, puis examinez l’empilement des colonnes, les retours à la ligne et le padding.

Import tente de faire correspondre la source à la structure de mise en page prise en charge par Emailify. Une imbrication complexe, du CSS personnalisé ou des ressources indisponibles peuvent nécessiter des ajustements manuels. Une préparation réussie de la source ne garantit ni un rendu visuel identique ni le même comportement à la livraison dans tous les clients de messagerie.

Si la préparation échoue, ouvrez Notes pour consulter le problème signalé. Corrigez la source ou remplacez les ressources inaccessibles, puis relancez l’aperçu. Si la mise en page créée doit être ajustée, utilisez les Rows, les Columns et les réglages responsive, puis suivez le guide de test des emails.