Tutoriel vidéo : ajouter des GIF animés de Figma aux exports d’emails HTML
Cette vidéo montre comment ajouter des GIF animés à vos designs d’email et exporter depuis Figma des emails HTML responsive prêts pour la production avec le plugin Emailify.
L’import d’images GIF animées nécessite une licence Emailify Pro.
Si vous utilisez la version d’essai gratuite du plugin, les GIF sont importés sous forme d’images statiques. Vous pouvez aussi utiliser l’option Export HTML avec le bouton Upload sur off pour exporter et télécharger en local les fichiers .gif animés avec vos emails HTML.
Ajouter un GIF animé comme image de contenu dans vos calques Column
Vous pouvez glisser-déposer un fichier .gif depuis votre ordinateur dans n’importe quel calque Column : il est ajouté comme calque de contenu image dans Figma.
Pour conserver la qualité de votre GIF, redimensionnez le calque proportionnellement (en maintenant la touche Shift pendant le redimensionnement de votre calque Figma) afin de garder les proportions d’origine. Emailify peut ainsi utiliser les données du fichier GIF d’origine dans vos exports.
Si vous donnez à votre calque Figma des proportions différentes de celles du GIF d’origine, Emailify doit recréer les images de votre GIF dans un tout nouveau fichier .gif pour tenir compte de la zone d’image recadrée (les clients de messagerie HTML ne prennent pas en charge le recadrage CSS). Le fichier GIF est alors plus lourd et l’export plus lent.
Pourquoi mon GIF exporté est-il plus lourd que le GIF d’origine ?
Si vous modifiez les proportions du calque GIF dans Figma, Emailify doit recréer les images du GIF dans un nouveau fichier .gif pour que l’email exporté corresponde à la zone d’image recadrée. Les clients de messagerie HTML ne prennent pas en charge le recadrage CSS des GIF de la même façon que les aperçus de Figma : recréer les images peut donc alourdir le fichier final et ralentir l’export.
Pour que le GIF exporté reste proche de la taille du fichier d’origine, redimensionnez-le proportionnellement et conservez ses proportions d’origine.
Vous pouvez définir l’attribut de texte alternatif ou ajouter un lien URL cliquable à vos images avec le bouton Settings de l’en-tête du plugin.
Emailify essaie de détecter automatiquement si votre GIF a un arrière-plan transparent. Si votre GIF a besoin de transparence et que le plugin ne le détecte pas de lui-même, ajoutez le mot Transparent n’importe où dans le nom de votre calque Figma (par exemple My Layer Name - Transparent) pour forcer son export avec un arrière-plan transparent.
Le format GIF accepte soit une opacité de 0 %, soit une opacité de 100 %, mais rien entre les deux. Vous pouvez donc avoir un GIF animé avec un arrière-plan entièrement transparent derrière des éléments entièrement opaques et visibles. Les calques doivent donc être soit entièrement transparents, soit non : tout calque dont l’opacité est inférieure à 50 % sera transparent, et tout calque dont l’opacité est supérieure à 50 % sera opaque.
Ajouter un GIF animé comme image d’arrière-plan d’un calque Row, Hero ou Wrapper
Si vous devez utiliser un GIF animé comme image d’arrière-plan derrière du vrai contenu en texte enrichi, glissez un fichier .gif depuis votre ordinateur sur le remplissage Figma de n’importe quel frame Row, Hero ou Wrapper : il devient le remplissage d’image de l’arrière-plan du frame. Les autres remplissages Figma de ce frame (par exemple des superpositions de couleur ou de dégradé) sont aussi inclus dans l’export .gif final.
L’avantage est que les calques de contenu à l’intérieur du frame restent rendus comme des calques de contenu enrichi individuels dans votre export d’email HTML, par-dessus l’arrière-plan GIF animé.
Emailify essaie de détecter automatiquement si votre GIF a un arrière-plan transparent. Si votre GIF a besoin de transparence et que le plugin ne le détecte pas de lui-même, ajoutez le mot Transparent n’importe où dans le nom de votre calque Figma (par exemple My Layer Name - Transparent) pour forcer son export avec un arrière-plan transparent.
Le format GIF accepte soit une opacité de 0 %, soit une opacité de 100 %, mais rien entre les deux. Vous pouvez donc avoir un GIF animé avec un arrière-plan entièrement transparent derrière des éléments entièrement opaques et visibles. Les calques doivent donc être soit entièrement transparents, soit non : tout calque dont l’opacité est inférieure à 50 % sera transparent, et tout calque dont l’opacité est supérieure à 50 % sera opaque.
GIF animés dans Outlook : la plupart des clients de messagerie prennent en charge les GIF animés, mais Outlook 2019 et versions antérieures n’affiche que la première image d’un GIF au lieu de lire l’animation. Assurez-vous que cette image contient les visuels ou le texte essentiels pour qu’elle fonctionne aussi comme image statique de repli. Dans Outlook avec Office 365, les GIF sont lus automatiquement trois fois avant de s’arrêter, avec un bouton de lecture pour les relancer.