Une fois satisfait de votre design et des réglages que vous souhaitiez configurer, vous pouvez exporter vos emails de Figma en HTML : cliquez sur le bouton Export HTML dans l’en-tête du plugin Emailify, sélectionnez les emails à exporter et ajoutez si vous le souhaitez un objet et un texte de preheader.
Exporter et télécharger votre email HTML depuis Figma en fichier .zip
L’option sélectionnée par défaut est HTML Email : vos emails sont alors exportés sous forme d’emails compilés prêts pour la production (avec tout le CSS déjà intégré en ligne et le HTML minifié).
Quand vous êtes prêt, cliquez sur le bouton Export To HTML pour exporter en HTML les emails sélectionnés dans Figma.
Une fois le traitement de vos emails terminé, Emailify affiche un message de confirmation ; vous pouvez télécharger votre fichier .zip en cliquant sur le bouton Download your .zip file.
Enregistrer les fichiers téléchargés depuis Figma. Si vous utilisez l’application de bureau Figma, une fenêtre vous invite à télécharger votre fichier. En revanche, si vous utilisez Figma dans un navigateur web, votre fichier est téléchargé automatiquement sur votre ordinateur par défaut (en général dans le dossier Téléchargements de votre ordinateur).
Si l’export s’est terminé mais que le ZIP ne s’est pas téléchargé
Si vous avez atteint l’écran de fin d’export d’Emailify, l’export de l’email a déjà été généré. Commencez par cliquer de nouveau sur Download your .zip file depuis cet écran.
Vérifiez ensuite l’emplacement de téléchargement correspondant à votre façon d’utiliser Figma :
- Dans l’application de bureau Figma, repérez la fenêtre d’enregistrement native de Figma et vérifiez qu’elle n’est pas cachée derrière une autre fenêtre ou sur un autre bureau.
- Dans Figma sur navigateur, consultez la liste des téléchargements de votre navigateur et le dossier Téléchargements par défaut de votre ordinateur.
Si le ZIP n’apparaît toujours pas :
- Relancez l’export une fois après avoir vérifié le bon emplacement de téléchargement.
- Si vous êtes sur un réseau professionnel, essayez un autre réseau Wi-Fi, un autre navigateur ou une fenêtre de navigation privée, au cas où le transfert du téléchargement serait interrompu localement.
- Si une tentative a consommé un essai Pro gratuit sans qu’aucun fichier n’arrive, arrêtez de réessayer et écrivez à [email protected] en indiquant le nom du produit, si vous utilisiez Figma sur ordinateur ou dans le navigateur, ainsi qu’une capture d’écran de l’écran de fin d’export ou de la fenêtre de téléchargement manquante.
Si l’export s’est terminé avec votre dernier essai Pro gratuit, l’écran de fin d’export doit toujours vous permettre de télécharger le ZIP. Pour les règles générales des essais, consultez Utiliser les essais Pro gratuits Hypermatic. Pour une aide privée sur l’utilisation des essais ou des vérifications propres à votre compte, consultez Choisir le bon canal de support Hypermatic.
Emailify détecte automatiquement si des calques de texte de votre design nécessitent un style RTL (de droite à gauche) et applique alors automatiquement l’attribut HTML dir="rtl" aux zones de texte concernées dans vos emails exportés.
Caractères cachés dans le texte collé
Pendant l’aperçu et l’export, Emailify supprime les liants et anti-liants sans chasse (zero-width joiners et non-joiners) insérés par accident entre des lettres anglaises ordinaires ou des chiffres dans les textes, les libellés de boutons et de navigation. Il supprime aussi les codes de contrôle non imprimables et l’indicateur d’ordre des octets (BOM) placé en début de texte, sans modifier vos calques de texte Figma d’origine.
Les caractères utilisés pour d’autres langues, les emojis, le sens du texte et les espacements volontaires sont conservés. Si un email envoyé affiche encore des caractères inattendus, retapez le mot concerné dans Figma, exportez de nouveau et vérifiez que votre plateforme d’emailing l’envoie avec l’encodage UTF-8. Testez l’email final via votre plateforme d’envoi avant d’envoyer une campagne.
Décompresser et consulter le package .zip de votre email HTML exporté
Après avoir téléchargé votre fichier .zip depuis Figma sur votre ordinateur, ouvrez votre explorateur de fichiers dans le dossier où il a été enregistré. Double-cliquez sur le fichier .zip exporté pour en décompresser le contenu.
Le fichier .zip contient, dans un dossier distinct pour chaque email, son fichier index.html et ses images. Un fichier index.html généré à la racine vous permet de consulter tous les emails exportés depuis une seule page d’aperçu. Vous pouvez aussi le mettre en ligne sur Netlify comme lien d’aperçu pour vos clients ou vos collègues.
Double-cliquez sur le fichier index.html de la page d’aperçu, ou sur n’importe quel fichier index.html des dossiers de vos emails, pour l’ouvrir dans votre navigateur et prévisualiser le HTML exporté.
La version texte brut de votre email HTML est automatiquement incluse dans le fichier .zip de chaque export du plugin. Si vous décompressez le fichier .zip exporté puis ouvrez le dossier de votre email, vous trouverez un fichier plain-text-version.txt à côté de votre fichier index.html.