Utilisez Emailify, un plugin Figma de Hypermatic, pour concevoir des emails responsives et les ajouter à vos emails Omnisend.
4e1 Vous cherchez l'intégration native de Figma avec Omnisend ? Apprenez à intégrer Figma avec Omnisend
Comment ça marche
Emailify est un plugin Figma qui transforme votre design Figma en code HTML d'email responsive prêt pour la production.Il inclut un préréglage d'exportation Omnisend qui génère du HTML formaté pour les campagnes de HTML personnalisé d'Omnisend.
Le flux a deux étapes :
Concevoir et exporter dans Figma. Construisez l'email en utilisant les composants d'Emailify, sélectionnezOmnisend dans le panneau d'exportation, et exportez le HTML.
Importer dans Omnisend. Collez le HTML exporté dans une campagne en utilisant la fonction HTML personnalisé d'Omnisend.
C'est une intégration manuelle d'exportation et de collage.Emailify ne télécharge pas automatiquement les modèles sur Omnisend, donc il n'y a pas de connexion API, pas d'étape d'authentification, et aucune donnée envoyée entre les deux plateformes.
Avant de commencer
Assurez-vous que :
Vous avez un compte Figma avec la permission d'exécuter des plugins.
Le plugin Emailify est installé dans Figma.
Vous avez un compte Omnisend avec accès aux campagnes email.
Vos images d'email sont hébergées à des URL publiques, ou vous êtes prêt à les héberger.
Cette intégration implique trois plateformes.Voici ce que chacune nécessite :
Plateforme | Exigence |
Figma | Tout plan, y compris le gratuit.Vous avez besoin d'un siège avec un accès complet à la conception, car les sièges en mode lecture seule ne peuvent pas exécuter de plugins. |
Emailify | La version gratuite fonctionne pour des exports basiques.Le plugin inclut 10 utilisations Pro gratuites, après quoi certaines options d'exportation nécessitent une licence Pro. |
Omnisend | Tout plan, y compris le gratuit.Les campagnes HTML personnalisées sont disponibles sur tous les plans. |
6a8 Emailify ne fonctionne qu'avec des emails construits à l'intérieur du plugin.Vous ne pouvez pas convertir un design Figma existant qui n'a pas été créé avec les composants d'Emailify.
Processus de configuration
Étape 1. Dans Omnisend, allez à Applications → rechercher le Application Emailify et cliquez surConnectez maintenant.
Étape 2. Installez Emailify dans Figma :
Ouvrez un fichier de design Figma.
Allez à Outils Plugins Emailify.
Le panneau du plugin s'ouvre sur votre toile.
Étape 3. Construisez votre email. Dans le panneau du plugin, ouvrez leNouvel Email section.
Choisissez Modèle vide, ou choisissez un point de départ parmi Mises en page ou Modèles Figma.
Étape 4. Exportez le HTML pour Omnisend :
Sélectionnez Exporter HTML dans l'en-tête du plugin.
Dans le panneau d'exportation, ouvrez le menu déroulant du type d'exportation.
Sous la liste des intégrations de plateformes, sélectionnez Omnisend.
Sélectionnez Exporter pour Omnisend.
Emailify génère le HTML, et vous pouvez le télécharger sur votre ordinateur.
Étape 5. Hébergez vos images
L'exportation inclut vos images en tant que fichiers locaux.Les clients email ne peuvent pas afficher les images locales, donc chaque image a besoin d'une URL publique avant que vous importiez le HTML.
Vous avez deux options :
Utilisez l'hébergement d'images d'Emailify. Activez l'option d'image hébergée dans les paramètres d'exportation afin que le HTML exporté pointe vers des URL publiques.
Hébergez les images vous-même. Téléchargez-les sur votre propre CDN ou stockage de fichiers, puis remplacez chaque
valeur src dans le HTML par l'URL hébergée.
🔁 Vérifiez les URL des images dans le HTML exporté avant l'importation.Si un src pointe toujours vers un chemin de fichier local, l'image ne se chargera pas dans l'Email livré.
Étape 6. Importez le HTML dans Omnisend.
Référez-vous à Ajouter et configurer un élément HTML personnalisé pour plus de détails sur les exigences HTML personnalisées d'Omnisend.
Étape 6. Ajoutez de la personnalisation et des liens requis.
Emailify génère du HTML statique.Tout ce qui est spécifique à Omnisend est ajouté après l'importation :
Tags de personnalisation. Insérez les tags Omnisend tels que
[[ contact.firstName ]] directement dans le HTML où vous souhaitez des valeurs dynamiques.Liens de désinscription. Chaque campagne nécessite un lien de désinscription. Ajoutez l'URL de désinscription d'Omnisend à votre pied de page si le design n'en inclut pas déjà un.
Voir dans le navigateur. Les composants de pré-en-tête d'Emailify incluent un espace réservé "voir dans le navigateur". Remplacez l'espace réservé par le lien d'Omnisend.
Vérifiez l'Intégration
Envoyez un email test avant de programmer la campagne.
Ouvrez la campagne importée dans Omnisend.
Envoyez un email test à votre propre adresse.
Confirmez que toutes les images se chargent.
Confirmez que la mise en page s'affiche correctement sur ordinateur et mobile.
Vérifiez l'email dans plus d'un client, comme Gmail et Outlook.
Confirmez que le lien de désinscription fonctionne.
Confirmez que tous les tags de personnalisation se résolvent.
🔁 L'aperçu d'Omnisend et un email test livré peuvent produire des résultats différents.Utilisez un email test livré comme votre vérification finale.
Dépannage
Le HTML est rejeté lors de l'importation
L'importation HTML d'Omnisend a des exigences de formatage.Vérifiez que le code les respecte et retirez tout élément non pris en charge avant de coller.
Les images ne se chargent pas
Vérifiez ce qui suit :
Chaque
srcpointe vers une URL publique plutôt qu'un chemin de fichier local.Les URL des images hébergées s'ouvrent correctement dans un navigateur.
Les fichiers image ont été téléchargés avant l'envoi de la campagne.
La mise en page se casse dans Outlook
Outlook utilise un moteur de rendu différent de la plupart des clients.Dans Emailify :
Réexportez avec des polices de secours web-safe configurées.
Vérifiez les paramètres de remplacement mobile pour les composants concernés.
Retestez après chaque changement, car le rendu dans Outlook ne peut pas être vérifié depuis l'aperçu Figma.
Le plugin ne s'ouvrira pas dans Figma
Si Figma affiche un message "Demander à Figma Design d'exécuter des plugins", votre siège n'a pas un accès complet au Design.Les plugins ne peuvent pas s'exécuter sur des sièges en vue seule.Demandez un accès Design à votre administrateur Figma.
Les changements dans Figma n'apparaissent pas dans Omnisend
Il n'y a pas de connexion en direct entre les deux plateformes.Après avoir modifié le design, exportez à nouveau le HTML et réimportez-le dans une nouvelle campagne.
FAQ
Emailify télécharge-t-il automatiquement des modèles vers Omnisend ?
Non. L'exportation d'Omnisend produit un fichier HTML que vous collez manuellement dans Omnisend.
Ai-je besoin d'une clé API Omnisend ?
Non. Cette intégration n'utilise pas l'API Omnisend.
Ai-je besoin d'une licence Emailify payante ?
Pas nécessairement. Le plugin comprend 10 utilisations Pro gratuites, et la version gratuite reste disponible par la suite.Vérifiez le panneau du plugin Emailify pour voir quelles options d'exportation votre version actuelle inclut.
Ai-je besoin d'un forfait Omnisend payant ?
Non. Les campagnes HTML personnalisées sont disponibles sur tous les forfaits, y compris le gratuit.
Puis-je modifier le design dans Omnisend après l'importation ?
Le HTML importé est modifié en tant que code plutôt que dans l'éditeur glisser-déposer d'Omnisend.Apportez des modifications de design dans Figma et réexportez.
Puis-je réutiliser le même design pour plusieurs campagnes ?
Oui. Enregistrez le fichier HTML exporté et collez-le dans chaque nouvelle campagne.
Puis-je importer un design d'email Figma existant dans Emailify ?
Non. Emailify n'exporte que les emails construits avec ses propres composants à l'intérieur du plugin.
Est-ce que cela fonctionne pour les emails de flux d'automatisation ?
Le HTML exporté peut être utilisé partout où Omnisend accepte du HTML personnalisé.Vérifiez les options HTML personnalisées disponibles dans votre email de flux.
Vous n'avez pas trouvé la réponse à votre question ? Contactez notre équipe d'assistance via le chat dans l'application ou à [email protected] – nous sommes disponibles 24/7.