Exporter de Figma vers Klaviyo : le guide complet

Vous avez passé des heures à concevoir un beau e-commerce email à Figma. La typographie est sur le point, les images du produit sont croustillantes, et tout est parfaitement aligné. Maintenant, vous devez l'amener à Klaviyo — et c'est là que les choses se compliquent.

Si vous avez déjà essayé exporter Figma à Klaviyo, vous connaissez la frustration: les mises en page se brisent, les couleurs changent en mode sombre, Outlook manipule votre CSS, et Gmail clips votre contenu soigneusement conçu. Ce guide vous guidera dans tout le processus, de l'approche manuelle aux workflows automatisés, afin que vous puissiez trouver la méthode qui fonctionne le mieux pour votre équipe.

Exporter manuellement un design Figma vers Klaviyo, étape par étape

Commençons par les bases. Si vous n'avez jamais fait cela avant, voici la façon simple (si quelque peu fastidieuse) de déplacer votre conception d'email Figma dans Klaviyo:

1. Finissez votre conception d'email en Figma. Assurez-vous que tout est à l'intérieur d'un seul cadre à la bonne largeur d'email (600px est la norme).
2. Séparer directement en Figma. Utilisez le module intégré de Figma Outil de partage (brièveté : S) pour dessiner des sections horizontales sur votre cadre de messagerie. Placez une section à chaque rupture logique — entre l'en-tête et le corps, entre les sections de contenu, au-dessus du pied de page. Puis sélectionnez toutes les sections et exportez-les à la fois en tant que PNG ou JPG.
3. Compresser chaque section. Utilisez un outil comme TinyPNG ou Squoosh pour réduire la taille des fichiers. Visez moins de 200Ko par section — cela maintient les temps de chargement rapidement sans perte de qualité visible.
4. Chargez à Klaviyo. Dans l'éditeur de courriels de Klaviyo, ajoutez des blocs d'images et téléchargez chaque section de haut en bas. Ajoutez des liens cliquables à chaque image si nécessaire.
5. Tester et envoyer. Prévisualiser les clients, vérifier que les liens fonctionnent et planifier votre campagne.

Ce processus fonctionne. Des millions de courriels de commerce électronique sont construits de cette façon chaque jour. Mais il faut 15 à 30 minutes par campagne, et si vous envoyez plusieurs courriels par semaine, cela s'additionne rapidement. Nous parlerons d'alternatives plus rapides plus tard — mais d'abord, comprenons Pourquoi Le fractionnement des images est tellement important.

Pourquoi découper votre design d’email en plusieurs images

Il peut sembler plus facile d'exporter l'e-mail entier comme une seule image et de la déposer dans Klaviyo. Une image, un téléchargement, c'est fait. Malheureusement, cette approche crée plusieurs problèmes qui peuvent saboter discrètement vos campagnes.

L’icône de téléchargement de Gmail sur les grandes images

Lorsque Gmail détecte une image trop grande (environ 800px), elle recouvre une icône de téléchargement en haut. Ce bouton de téléchargement couvre votre contenu, fait l'apparence du courriel cassé, et donne à vos destinataires une raison de l'ignorer entièrement. En divisant votre courriel en petites sections, chaque section reste sous ce seuil et Gmail les affiche proprement.

Gmail tronque les emails dont le code HTML dépasse 102 Ko

Voici celui qui voyage beaucoup de marketing de courriel: Gmail clips tout email dont le HTML dépasse 102Ko. Lorsque cela se produit, Gmail affiche un lien "Voir le message entier" en bas — et la plupart des gens ne le cliquez jamais. Votre pied de page, votre CTA, votre lien de désabonnement ? Parti.

La bonne nouvelle: lorsque vous utilisez des courriels basés sur l'image, les images elles-mêmes sont hébergées de l'extérieur et ne comptez pas vers la limite de 102Ko. Votre HTML est juste une série de <img> tags et liens, en maintenant le total bien en dessous du seuil.

Le rendu de votre design en mode sombre

Chaque client de messagerie gère le mode sombre différemment. Apple Mail inverse les fonds. Gmail modifie les couleurs du texte. Outlook fait sa propre chose entièrement. Si votre e-mail est codé en HTML, le mode sombre peut rendre votre texte blanc invisible sur un fond blanc tourné sombre, ou rendre vos couleurs de marque complètement faux.

Les courriels basés sur l'image sont à l'abri de cela. Puisque le contenu est cuit dans l'image, il n'y a pas de couleurs CSS pour le mode sombre à surcharger. Ce que vous avez conçu est ce que votre client voit.

Compatibilité Microsoft Outlook

Outlook rend HTML en utilisant Moteur de Microsoft Word. Cela signifie que flexbox ne fonctionne pas, la grille ne fonctionne pas, et la plupart des propriétés CSS modernes sont ignorées. Si vous avez déjà passé des heures à déboger un e-mail qui semble parfait partout sauf Outlook, vous connaissez la douleur. Les courriels basés sur l'image éliminent entièrement cela — ils rendent la même chose pour chaque client.

À quoi ressemble un email découpé en sections ?

Pour rendre cela concret, voici à quoi ressemble le processus de fractionnement de l'image. Vous prenez un e-mail complet et le divisez en sections horizontales logiques:

Chaque section devient sa propre image à Klaviyo. Vous les empilez verticalement, ajoutez des liens cliquables à chacun d'eux, et le destinataire voit un courriel sans faille — pas de lacunes, pas de mises en page cassées, juste votre design original rendu pixel-for-pixel.

Emails en HTML ou en images : le point de vue e-commerce

Il y a un débat en cours dans le monde du marketing par courriel: devriez-vous coder les courriels en HTML ou les envoyer sous forme d'images tranchées? La réponse dépend de vos priorités.

Courriels HTML sont excellents pour le contenu de texte lourd comme les bulletins d'information, les courriels transactionnels, ou tout ce qui doit être entièrement accessible. Des outils comme Greffons Figma-to-HTML (comme Emailify) peut convertir votre conception en code HTML. Cependant, vous allez toujours faire face à des incohérences de rendu entre les clients — en particulier Outlook et le mode sombre.

Courriels basés sur l'image sont idéales pour les campagnes de e-commerce où le design visuel est la priorité: lancements de produits, annonces de ventes, campagnes de marque, promotions saisonnières. Chaque grande marque d'e-commerce — de Nike à Zara jusqu'à des centaines de magasins Shopify — envoie des courriels basés sur l'image pour leurs campagnes de marketing.

La meilleure approche ? Utiliser les deux. Basé sur l'image pour vos campagnes marketing de haute conception, code HTML pour les courriels transactionnels et les bulletins en texte clair. La plupart des équipes de commerce électronique estiment que 70 à 80 % de leurs campagnes bénéficient de l'approche fondée sur l'image.

"Les courriels d'image ne vont-ils pas au spam ?" — Débâcher le mythe

C'est probablement la préoccupation la plus courante, et elle mérite d'être traitée directement.

L'idée que les e-mails image-lourds nuisent automatiquement à la livraison est dépassé. La livraison moderne des courriels dépend:

• La réputation de l'expéditeur — l'authentification de votre domaine (SPF, DKIM, DMARC), les taux d'engagement et l'hygiène des listes
• Engagement des bénéficiaires — si les gens ouvrent, cliquez et interagissent avec vos courriels
• Qualité de la liste — envoyer à des gens qui veulent vraiment avoir de tes nouvelles

Le mythe du rapport image-texte vient du début des années 2000 quand les filtres de spam étaient primitifs. Les filtres de spam d'aujourd'hui utilisent l'apprentissage automatique et les signaux comportementaux — ils se soucient de savoir si vos destinataires s'engagent avec vos courriels, et non pas si vous avez utilisé des images.

Cela dit, les meilleures pratiques s'appliquent toujours : inclure un texte alternatif sur chaque image (pour l'accessibilité et comme retour lorsque les images ne sont pas chargées), ajouter un préen-tête de texte, et garder votre domaine d'envoi correctement authentifié. Si vous avez plus de questions sur la livraison et les meilleures pratiques de courriel, consultez notre Page FAQ pour des réponses rapides.

Accélérer le passage de Figma à Klaviyo

La méthode manuelle fonctionne, mais le faire pour chaque campagne devient vieux rapidement. Voici quelques façons d'accélérer les choses quand vous exporter Figma à Klaviyo:

Option 1: Figma Plugins

Plusieurs plugins Figma peuvent aider à automatiser des parties de ce workflow. Certains convertissent les conceptions en HTML (comme Emailify), tandis que d'autres — comme la plugin EmailSlicer Figma — gérer le fractionnement de l'image, la compression et l'importation de Klaviyo directement de l'intérieur de Figma. L'avantage de rester à l'intérieur de Figma est que vous sautez entièrement le cycle d'exportation-redimensionnement-upload.

Option 2 : Outils de fractionnement d'images en ligne

Si votre conception ne vient pas de Figma — peut-être un freelance vous envoie une image plate, ou vous utilisez un autre outil de conception — les trancheurs web vous permettent de télécharger n'importe quelle image, définir vos points de section, compresser, et soit télécharger les sections ou les pousser à Klaviyo via API. Vous pouvez comparer les plans disponibles pour trouver le bon ajustement pour le volume de votre équipe.

Option 3: Construire votre propre pipeline

Si vous êtes techniquement incliné, vous pouvez construire un pipeline personnalisé en utilisant Sharp (la bibliothèque d'images Node.js) ou l'oreiller de Python pour automatiser le fractionnement et la compression des images, puis utiliser l'API de Klaviyo pour télécharger les images de façon programmatique. C'est une surcompétence pour la plupart des équipes, mais c'est une option si vous avez des exigences très spécifiques.

Les étapes en un coup d’œil

Quelle que soit la méthode que vous choisissez, le flux de travail de base à exporter Figma à Klaviyo est la même : concevoir votre email, le sectionner en sections, compresser pour les performances web, et importer dans Klaviyo. La seule différence est la quantité de ce processus que vous faites manuellement vs. avec des outils. Nous couvrons plus de stratégies de marketing par courriel et des conseils de flux de travail sur notre blog — il vaut la peine d'obtenir un signet si vous optimisez votre pipeline de production de courriels.

Questions fréquentes

Puis-je exporter directement de Figma à Klaviyo sans aucun outil ?

Pas au pays. Figma n'a pas d'intégration intégrée à Klaviyo. Vous aurez besoin d'exporter votre design en tant qu'image d'abord, puis de le télécharger à Klaviyo. La question est de savoir si vous faites chaque étape manuellement ou utilisez un plugin/outil pour l'automatiser.

Quel format d'image dois-je utiliser pour les courriels?

JPEG est le meilleur pour les photographies et les visuels complexes (tailles de fichier plus petites). PNG est mieux lorsque vous avez besoin de transparence ou avoir de grandes zones de couleur plate. Pour la plupart des e-mails e-commerce avec la photographie de produit, JPEG à la qualité 80-85% donne le meilleur rapport taille-qualité.

Combien de sections dois-je utiliser par courriel?

Généralement 4 à 8 sections bien travailler. Le but est de garder chaque image sous ~800px (pour éviter l'icône de téléchargement de Gmail) tout en coupant aux limites logiques du contenu — entre l'en-tête et le corps, entre les sections de produits, au-dessus du pied de page. Chaque section doit correspondre à une zone cliquable distincte si possible.

Les courriels basés sur l'image affecteront-ils la vitesse de chargement?

Les sections correctement compressées chargent réellement plus vite qu'une seule grande image. Les clients de messagerie peuvent charger plusieurs petites images en parallèle, et la compression peut réduire la taille totale du fichier de 60-80% sans perte de qualité visible. La clé est la compression — toujours compresser avant de télécharger sur Klaviyo.

Et l'accessibilité ?

C'est un compromis légitime. Les courriels basés sur l'image ne sont pas accessibles aux lecteurs d'écran comme le texte HTML est. Pour atténuer cela, ajoutez toujours un texte descriptif alternatif à chaque image, incluez un lien "Vue dans le navigateur", et envisagez d'ajouter une version en texte clair de votre campagne à Klaviyo. Pour les e-commerces promotionnels, la plupart des marques acceptent ce compromis en échange d'une cohérence visuelle garantie.