Comprendre le fonctionnement du plugin Emailify

Avant de concevoir et d’exporter des emails HTML avec Emailify, il est essentiel de comprendre quelques principes de base du fonctionnement du plugin.

Emailify ne prend pas en charge les designs d’email Figma créés en dehors du plugin.

Présentation d’Emailify ​

Emailify vous aide à concevoir des emails dans Figma grâce à un ensemble de composants de départ courants, dont vous personnalisez le contenu, les styles et l’identité de marque avec les outils de design habituels de Figma. Vous appliquez ensuite des styles responsive et exportez les emails en HTML prêt pour la production.

Ce qu’Emailify fait… ​

  • Il vous fournit des composants de départ et des outils de design pour créer des mises en page d’email.
  • Il vous permet de personnaliser dans Figma les textes, les images, les styles visuels et les liens.
  • Il exporte vos emails (conçus avec le plugin Emailify) en HTML prêt pour la production.
  • Il s’intègre aux plateformes d’emailing pour importer des modèles HTML via API.

Ce qu’Emailify ne fait pas… ​

  • Il ne convertit pas automatiquement les designs d’email conçus manuellement dans Figma sans le plugin Emailify (si vous avez un design de ce type, vous devrez le recréer avec les outils de design du plugin Emailify pour l’exporter en HTML).
  • Il ne propose aucune solution de contournement particulière au manque de prise en charge, par les clients de messagerie, de certaines propriétés HTML/CSS reconnues seulement par quelques clients (par exemple le remplacement des styles du mode sombre pour Gmail ou Outlook, ou l’affichage de polices personnalisées dans les clients autres qu’Apple Mail).

En quoi Emailify diffère-t-il des autres plugins Figma d’emailing ? ​

Contrairement à d’autres plugins Figma qui vous aident à exporter des emails de Figma vers HTML, Emailify n’essaie pas de prendre automatiquement n’importe quel fichier conçu manuellement dans Figma pour le transformer comme par magie en code HTML prêt à être envoyé par email.

Le problème des autres plugins Figma « design d’email vers HTML » ​

Le problème fondamental lorsqu’on tente de convertir en HTML n’importe quelle maquette d’email conçue manuellement dans Figma, c’est qu’il n’existe aucune notion d’intention.

L’exemple le plus simple : imaginez ce que le designer a voulu faire d’un calque « Frame » dans Figma qui contient un calque « Rectangle » et un calque « Text » :

  • un bouton cliquable ?
  • une seule image statique (avec du texte intégré) ?
  • un bloc hero avec une image d’arrière-plan et du texte enrichi par-dessus ?
  • un lien d’icône de réseau social ?

Même si un plugin Figma parvenait à déterminer correctement l’intention de ces 3 calques, il ne saurait toujours pas comment cet élément doit s’afficher sur mobile, s’il doit renvoyer quelque part lorsqu’on clique dessus, ni s’il possède d’autres attributs (comme un texte alt), etc.

Cet exemple est déjà assez délicat, et il reste pourtant le plus indulgent : comprendre l’intention de 3 calques Figma. La complexité ne fait qu’augmenter ensuite.

Une véritable maquette d’email dans Figma peut contenir des milliers de calques, parfois imbriqués dans des dizaines (voire des centaines) d’autres calques « frame » ou « group » qui n’indiquent pas davantage comment les rendre en HTML. Il devient alors vite presque impossible d’obtenir le HTML voulu à partir du design créé dans Figma (des centaines de rectangles, frames, groupes et calques de texte non structurés).

Comme les emails HTML sont déjà très difficiles à afficher de façon homogène dans tous les clients de messagerie, nous pensons qu’il est bien trop risqué d’essayer de déduire l’intention du designer parmi une infinité de structures de calques Figma possibles, chaque designer travaillant à sa façon.

Comment Emailify résout le problème de l’« intention » ​

Pour résoudre le problème de l’intention, Emailify adopte une approche plus encadrée, « sur des rails », de la conception d’emails : il vous aide à créer dans Figma des calques spéciaux qui correspondent directement à de véritables éléments HTML lors de l’export du code. Le plugin sait ainsi exactement ce que chaque élément de votre email est censé être (par exemple, un « Button » est un bouton, une « Column » est une colonne, etc.).

Par exemple, ajouter un calque Button à votre design d’email Figma avec le plugin Emailify crée un tout nouveau calque auquel sont associées des données spéciales qui indiquent à Emailify qu’il s’agit bien d’un bouton, et pas simplement d’un rectangle qui est (ou n’est pas) censé être un « bouton ».

Ces outils de design vous permettent de créer rapidement des mises en page et des éléments de contenu qu’Emailify comprend, et qu’il peut ensuite exporter automatiquement en HTML de manière fiable.

Quels designs pouvez-vous créer avec Emailify et Figma ? ​

Emailify propose de nombreux outils pour créer des mises en page dont vous personnalisez le contenu et les styles avec Figma, et pour lesquelles vous pouvez aussi définir un design responsive.

En combinant les outils du plugin et Figma pour les styles et le contenu, vous pouvez créer un design d’email entièrement personnalisé et fidèle à votre marque.

Pour vous inspirer, n’hésitez pas à consulter ces modèles Figma gratuits compatibles avec Emailify (entièrement conçus avec Emailify dans Figma) et à les adapter à votre propre marque.

La description de la page Figma de chaque modèle contient aussi un lien vers un tutoriel vidéo complet, étape par étape, qui montre comment il a été créé. Vous pouvez également parcourir la playlist YouTube complète consacrée à ces modèles Figma.

Comprendre la structure des calques Figma dans les designs Emailify ​

Lorsque vous créez les mises en page de vos emails avec les outils de design d’Emailify, à savoir les composants de départ et Quick Add Element (la liste déroulante en bas du plugin), le plugin crée automatiquement les structures de calques nécessaires.

Il est essentiel de conserver cette structure de calques de base : n’imbriquez pas, par exemple, ces calques Figma générés dans d’autres frames ou groupes Figma ajoutés manuellement. Sinon, le plugin s’y perd et traite ces blocs comme des calques étrangers (rendus sous forme d’images statiques au lieu de contenu HTML ou de texte enrichi).

Exemple de structure de calques Emailify ​

Pour illustrer rapidement cette structure, la capture d’écran ci-dessous montre un ensemble de calques Figma créés automatiquement par le plugin Emailify.

Vous remarquerez que la structure des calques Figma est très régulière : le frame d’email parent ajouté par Emailify peut contenir directement un ou plusieurs calques « Row », chacun pouvant contenir un ou plusieurs calques « Column », et chaque calque « Column » peut à son tour contenir un ou plusieurs calques de contenu (par exemple textes, images, boutons, etc.).

Exemple simple de structure de calques Emailify

Exemple simple de structure de calques Emailify ​

  • ✉️ Email
    • 🦸 Hero
      • ✍️ Text
      • ✍️ Text
      • 🔗 Button
        • ✍️ Button Text
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
      • 🏛️ Column
        • ✍️ Text
        • ✍️ Text
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
      • 🏛️ Column
        • 🪑 Data Table
          • 🪑🚣 Data Table Row
            • 🪑🏛️ Data Table Cell (Content)
              • 📷 Vector Icon
            • 🪑🏛️ Data Table Cell (Content)
              • ✍️ Text
          • 🪑🚣 Data Table Row
            • 🪑🏛️ Data Table Cell (Content)
              • 📷 Vector Icon
            • 🪑🏛️ Data Table Cell (Content)
              • ✍️ Text
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
        • ✍️ Text
        • 🐦 Social
          • 🔗 Social Icon Link
            • 📷 SVG Vector Icon
          • 🔗 Social Icon Link
            • 📷 SVG Vector Icon
          • 🔗 Social Icon Link
            • 📷 SVG Vector Icon
          • 🔗 Social Icon Link
            • 📷 SVG Vector Icon
        • 🍔 Navigation
          • 🔗 Nav Link
            • ✍️ Nav Link Text
          • 🔗 Nav Link
            • ✍️ Nav Link Text
    • 🚣 Row
      • 🏛️ Column
        • 🪑 Data Table
          • 🪑🚣 Data Table Row
            • 🪑🏛️ Data Table Cell (Content)
              • ✍️ Text
            • 🪑🏛️ Data Table Cell (Content)
              • ✍️ Text
          • 🪑🚣 Data Table Row
            • 🪑🏛️ Data Table Cell (Content)
              • ✍️ Text
            • 🪑🏛️ Data Table Cell (Content)
              • ✍️ Text
    • 🎁 Wrapper (For Multiple Rows)
      • 🚣 Row
        • 🏛️ Column
          • 📷 Image
        • 🏛️ Column
          • ✍️ Text
      • 🚣 Row
        • 🏛️ Column
          • 📷 Image
        • 🏛️ Column
          • ✍️ Text

Types de calques Emailify utilisables ​

Pour en savoir plus sur chaque type de calque, consultez dans la documentation Emailify les pages consacrées aux éléments de mise en page et aux éléments de design.

Encore une fois, il est essentiel de conserver cette structure : déplacer ces calques dans le désordre empêche le HTML de s’afficher comme prévu (par exemple, vous ne pouvez pas placer une « Row » dans une autre « Row », placer un calque « Text » directement dans un frame « Email », ni placer une « Row » dans une « Column », etc.).

Le moyen le plus simple de garantir une structure correcte est d’ajouter des composants de départ depuis le plugin Emailify, puis de personnaliser le contenu et les styles selon vos besoins, sans modifier en profondeur la structure de vos calques de mise en page.

Personnaliser vos calques dans Figma ​

Tutoriel vidéo : concevoir et exporter des emails de Figma vers HTML

Cette vidéo montre comment concevoir et exporter depuis Figma des emails HTML responsive et prêts pour la production avec le plugin Emailify.

Lorsque vous ajoutez un composant Emailify à votre email, il est rendu sur votre canevas Figma, où vous pouvez manipuler ses calques comme d’habitude (comme si vous les aviez ajoutés vous-même).

Pour un calque de texte, par exemple, vous pouvez modifier son contenu, sa taille de police, son interligne, son espacement des lettres, son espacement des paragraphes et son alignement horizontal dans le panneau de réglages habituel de Figma.

Emailify rend volontairement des éléments très simples, pour que vous puissiez adapter les images, les textes et les valeurs de mise en page à votre marque et à votre charte graphique.

Réutiliser des composants en tant qu’instances Figma. Une fois un composant personnalisé, vous pouvez le réutiliser plusieurs fois en tant qu’instance Figma, et même dans d’autres designs d’email par la suite.

Les composants de contenu d’Emailify utilisent l’Auto Layout de Figma. Les composants fournis avec Emailify utilisent l’Auto Layout, ce qui facilite grandement l’ajustement des valeurs de mise en page, comme le padding et l’espace entre les colonnes ou les éléments.

Étapes suivantes ​