Cliquez sur le bouton Preview dans l’en-tête du plugin Emailify pour générer automatiquement un véritable aperçu HTML de votre email, directement dans le plugin Figma.
Tant que la fenêtre d’aperçu est ouverte, les modifications que vous apportez à vos calques Emailify dans Figma sont répercutées en temps réel dans l’aperçu HTML.
Utiliser les onglets du panneau d’aperçu
Le panneau d’aperçu comporte quatre onglets :
- HTML Preview affiche le HTML responsive actuel, se met à jour à mesure que vous modifiez les calques Figma et propose un simple interrupteur d’aperçu en mode sombre.
- Preflight vérifie dans le HTML de production les problèmes concrets d’objet, de pré-en-tête, d’accessibilité, de liens, d’images, de délivrabilité et de troncature par Gmail.
- Test Send prépare le HTML de production pour que vous puissiez le copier dans htmltest.email et faire un test manuel en boîte de réception.
- Email Previews demande des captures d’écran des clients de messagerie depuis Emailify. Consultez Utiliser Email Previews dans le plugin.
Preflight et Test Send utilisent l’accès au HTML de production d’Emailify : ils sont donc disponibles avec une licence Pro active ou tant qu’il vous reste des essais Pro gratuits. Consultez Tester vos emails HTML avant l’envoi pour les options de test sur les clients de messagerie.
Les GIF s’affichent comme des images statiques en mode aperçu pour accélérer le chargement de l’aperçu (leur rendu étant plus long), mais ils seront bien animés dans les exports HTML finaux du plugin.
Vous pouvez modifier les ajustements mobiles pendant que la fenêtre d’aperçu est ouverte en cliquant sur le bouton Settings dans l’en-tête du panneau d’aperçu.
Prévisualiser votre email à différentes largeurs d’appareil
Pour voir le rendu à différentes largeurs d’appareil, cliquez sur la liste déroulante dans l’en-tête du panneau d’aperçu et choisissez parmi les options ci-dessous :
- Desktop & Mobile (hybrid view)
- Desktop (726px Wide)
- iPhone 17 Pro Max (440px Wide)
- iPhone 16 Pro Max (430px Wide)
- iPhone Air (420px Wide)
- Google Pixel (412px Wide)
- iPhone 17 (402px Wide)
- iPhone 16 (393px Wide)
- iPhone 13 Mini (375px Wide)
- iPhone 12 Mini (360px Wide)
- iPhone SE (320px Wide)
Point de rupture mobile des emails. Les emails HTML exportés depuis Emailify ont un seul « point de rupture », défini automatiquement par la largeur du frame desktop dans Figma. Par exemple, si votre frame Emailify mesure 600px, les styles et ajustements mobiles s’appliquent à partir de 599px et en dessous.
Il est généralement recommandé de garder une largeur d’email comprise entre 600px et 640px, car les panneaux de lecture de certains clients ou applications de messagerie peuvent faire moins de 700px de large et afficher les styles mobiles au lieu de la mise en page desktop.
Voir en direct dans l’aperçu HTML les modifications faites dans Figma
Lorsque l’aperçu HTML est ouvert, vous pouvez continuer à modifier vos calques Figma et voir immédiatement ces changements dans la fenêtre d’aperçu, sans avoir à cliquer sur Refresh à chaque fois.
Prévisualiser le mode sombre
Activez Dark Mode dans la barre d’outils de HTML Preview pour comparer l’email actuel avec l’aperçu local approximatif du mode sombre d’Emailify. Cet aperçu applique un traitement automatique générique des couleurs, et non les couleurs d’un client de messagerie précis. Vous pouvez continuer à utiliser le sélecteur de largeur pour examiner le même design en mode sombre aux largeurs desktop ou mobile. Dark Mode n’est pas disponible lorsque la vue hybride combinée Desktop & Mobile est sélectionnée.
Si l’email contient des ajustements du mode sombre Emailify, utilisez l’interrupteur Overrides juste à côté pour afficher ou masquer ses styles explicites d’arrière-plan, de texte, de bordure et de remplacement d’images.
Cet interrupteur est une aide au design, pas un émulateur de client ou d’appareil. Les clients de messagerie appliquent leurs propres transformations en mode sombre, et l’aperçu local ne reproduit ni les filtres de nettoyage des clients connectés, ni les moteurs de rendu et polices natifs, ni l’interface des applications, ni le traitement à la livraison, ni toutes les différences entre clients et versions.
La prise en charge des styles d’ajustement du mode sombre par les clients de messagerie est limitée. Les ajustements explicites d’Emailify sont destinés aux versions compatibles d’Apple Mail ; Gmail, Outlook, Windows Mail, Yahoo et d’autres clients peuvent appliquer un comportement de couleurs automatique différent.
Vérifier le poids de votre email HTML en kilo-octets (ko)
Dans l’en-tête du panneau d’aperçu, un nombre indique le poids total du HTML de votre email (uniquement le fichier .html lui-même, sans les images). C’est utile pour savoir si vous avez dépassé la limite de troncature de Gmail à 102 ko.
Si votre HTML dépasse 102 ko, le poids affiché dans la fenêtre d’aperçu est surligné en jaune pour signaler visuellement que votre email a dépassé cette limite.
Réduire ou regrouper le nombre de calques « Row » de votre email est le meilleur moyen d’alléger votre fichier HTML.
Prévisualiser les polices de repli compatibles web de votre email
Si vous avez défini des polices de repli compatibles web pour les polices web personnalisées de votre email, vous pouvez prévisualiser leur rendu en activant l’interrupteur Show Fallback Fonts en bas de la fenêtre d’aperçu d’Emailify.
Vérification (et correction automatique) de l’Auto Layout des calques Emailify
Lorsque vous prévisualisez votre HTML avec la fonctionnalité Preview du plugin, celui-ci vérifie automatiquement que les calques ajoutés via Emailify ont toujours les bonnes propriétés d’Auto Layout Figma, afin de garantir un export HTML visuellement cohérent.
Il affiche la liste des calques dont les propriétés d’Auto Layout doivent être ajustées (par exemple, passer une hauteur « Fixed » en « Hug ») ; vous pouvez appliquer ces changements automatiquement en cliquant sur le bouton Apply Fixes, qui met à jour les calques Figma signalés avec les ajustements d’Auto Layout nécessaires.
Déplacer et corriger manuellement les calques Emailify mal placés
Lorsque vous prévisualisez votre HTML avec la fonctionnalité Preview du plugin, celui-ci vérifie automatiquement que les calques ajoutés via Emailify respectent toujours la structure dans laquelle ils ont été créés (par exemple, calque Row -> calque(s) Column -> calques de contenu), afin de garantir un export HTML visuellement cohérent.
Il affiche la liste des calques à déplacer manuellement, avec des instructions pour chacun (par exemple, « Move this Row layer back into the main Email frame ») et un bouton qui vous amène directement au calque sur votre page et dans la liste des calques Figma, pour le retrouver et le déplacer plus facilement.
Vous pouvez appliquer des réglages en masse : ouvrez Settings, puis sélectionnez dans Figma plusieurs calques Emailify du même type. Chaque réglage que vous modifiez s’applique alors à tous les calques sélectionnés.