---
url: "/fr/emailify/design/import.md"
description: "Utilisez l’onglet expérimental Import d’Emailify pour transformer du HTML ou du MJML existant en calques d’email modifiables dans Figma."
---

# Importer des emails HTML et MJML

> Utilisez l’onglet expérimental Import d’Emailify pour transformer du HTML ou du MJML existant en calques d’email modifiables dans Figma.

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.

> **Note:** 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 {#supported-sources}

- **HTML :** collez le HTML d’un email ou choisissez un fichier `.html` ou `.htm`.
- **MJML XML :** collez un document `` 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.

> **Tip:** Vous cherchez un email pour essayer ? Rendez-vous sur [Really Good Emails](https://reallygoodemails.com/), 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 {#import-an-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](/fr/emailify/design/preview) pour vérifier le rendu desktop et mobile généré avant l’export.

> **Warning:** 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 {#import-mjml}

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

```xml

        Hello from Emailify

```

L’équivalent JSON utilise `tagName`, `attributes`, `children` et `content` :

```json
{
  "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 {#check-the-result}

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](/fr/emailify/design/rows), les [Columns](/fr/emailify/design/columns) et les [réglages responsive](/fr/emailify/design/responsive), puis suivez le [guide de test des emails](/fr/emailify/export/testing).