--- url: "/fr/emailify/design/preview.md" description: "La fenêtre d’aperçu d’Emailify vous permet de voir votre email en véritable HTML et d’interagir avec lui avant de l’exporter." --- # Prévisualiser votre email HTML dans Figma > La fenêtre d’aperçu d’Emailify vous permet de voir votre email en véritable HTML et d’interagir avec lui avant de l’exporter. [Video](/assets/videos/emailify/design/preview-email.mp4) 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 {#using-the-preview-panel-tabs} 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](https://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](/fr/emailify/export/testing#using-email-previews-in-the-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](/fr/emailify/export/testing) pour les options de test sur les clients de messagerie. > **Info:** 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. > **Tip:** 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 {#previewing-your-email-at-different-device-widths} 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) > **Note:** **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. > **Tip:** 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 {#live-preview-changes-in-html-preview-window-from-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. [Video](/assets/videos/emailify/design/live-preview-edits-desktop.mp4) ## Prévisualiser le mode sombre {#previewing-dark-mode} 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. > **Warning:** 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. > **Warning:** La [prise en charge des styles d’ajustement du mode sombre](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) 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) {#checking-the-file-size-of-your-html-email-in-kilobytes-kb} 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](https://mailchimp.com/help/gmail-is-clipping-my-email/). > **Warning:** **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. > **Tip:** [Réduire ou regrouper le nombre de calques « Row » de votre email](/fr/emailify/design/optimizing-html-file-size) est le meilleur moyen d’alléger votre fichier HTML. ## Prévisualiser les polices de repli compatibles web de votre email {#previewing-web-safe-font-fallbacks-in-your-email} [Video](/assets/videos/emailify/design/preview-font-fallbacks.mp4) Si vous avez défini des [polices de repli](/fr/emailify/design/fonts) 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 {#auto-layout-linting-and-auto-fixing-for-emailify-layers} [Video](/assets/videos/emailify/design/linter-auto-fix.mp4) 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 {#manually-moving-and-resolving-emailify-layers-that-are-in-the-wrong-place} [Video](/assets/videos/emailify/design/manual-move-layers.mp4) 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. > **Tip:** Vous pouvez [appliquer des réglages en masse](/fr/emailify/design/settings#apply-settings-in-bulk) : 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.