Modèles d’email dans Figma pour l’e-commerce

Si vous concevez des campagnes d'e-mail pour un magasin de commerce électronique en 2026, vous utilisez presque certainement Figma. Il est devenu l'outil de conception par défaut pour les équipes de marketing, les agences et les concepteurs indépendants — et pour de bonnes raisons.

Mais la conception d'email a des contraintes uniques que la conception Web et l'application ne le font pas. Vous ne pouvez pas utiliser flexbox, grille CSS ou feuilles de style externes. De nombreux clients de courriels comptent toujours sur des mises en page basées sur la table. Et ce qui semble parfait dans Figma peut casser spectaculairement quand il frappe Outlook.

Ce guide traite de la manière de mettre en place Modèles de courriel Figma correctement dès le début, de sorte que vos conceptions traduisent proprement en vrais courriels — que vous exportiez en HTML ou en images.

Pourquoi Figma est le meilleur outil pour la conception d'email

Par rapport à Photoshop, Canva, ou tout autre outil de conception, Figma offre trois avantages critiques pour l'email:

• Composants et variantes: Concevoir un bouton une fois, le réutiliser sur 20 modèles. Changez le composant principal et chaque instance se met à jour automatiquement. Cela permet d'économiser des heures lors de la gestion d'un calendrier de campagne.
• Mise en page automatique: La mise en page automatique de Figma fonctionne comme CSS flexbox — set direction, rembourrage, espacement et alignement. Ces cartes directement à la façon dont les mises en page des courriels sont structurées, rendant la traduction de la conception à la codification beaucoup plus lisse.
• Collaboration en temps réel: Votre rédacteur peut mettre à jour le texte pendant que vous ajustez la mise en page. Votre directeur marketing peut laisser des commentaires directement sur la conception. Plus d'emailing PSDs aller et retour.

Canva est plus rapide pour les débutants, mais il manque le système de composants et le contrôle de précision requis par la conception de l'email. Photoshop est toujours utile pour l'édition d'images, mais il n'est pas construit pour les systèmes de mise en page et la collaboration.

Configuration de votre cadre de modèle de courriel

Obtenir la bonne base empêche les maux de tête plus tard. Voici la configuration exacte :

Dimensions du cadre

• Largeur: 600px — C'est la norme universelle du courrier électronique. Chaque grand client de messagerie s'attend à 600px ou plus étroit. Certaines marques utilisent 640px, mais 600px est le plus sûr.
• Contenant: 540-560px — Laisser les rembourrages 20-30px de chaque côté. Cela empêche le contenu de toucher les bords des clients mobiles qui ajoutent leur propre rembourrage.
• Hauteur: variable — Ne pas fixer une hauteur fixe. Laissez le contenu déterminer la longueur du courriel. Utiliser la mise en page automatique définie à verticale avec « contenu de la coque ».

Système de grille

• Grille d'espacement 8px: Utilisez des multiples de 8 pour tous les espacement (8, 16, 24, 32, 40, 48px). Cela crée un rythme visuel cohérent et rend l'échelle réactive prévisible.
• Grille de configuration: Appliquer une grille de 6 colonnes sur votre cadre 600px. Cela vous donne de la flexibilité pour 1 colonne, 2 colonnes et 3 colonnes dans le même modèle.

Bâtir votre bibliothèque de composants

La puissance réelle de Figma pour l'email est de construire des composants réutilisables. Voici ce que chaque bibliothèque de composants e-commerce devrait inclure :

Composantes essentielles

• En-tête: Logo + liens de navigation (facultatif). Gardez-le simple — la plupart des clients d'email strip la navigation complexe. Un logo centré avec un ou deux liens texte est la norme.
• Bannière héros : Image ou dégradée pleine largeur avec titre et CTA. Créer des variantes pour différents types de campagnes (vente, nouvelle arrivée, éditorial).
• Carte produit: Image + nom du produit + prix + bouton CTA. Il s'agit de la composante cheval de bataille pour les courriels de commerce électronique. Créer des variantes pour les plans à 1 colonne (en pleine largeur) et à 2 colonnes.
• bouton CTA & #160;: Votre composant le plus important. Créer des variantes pour les primaires (remplies), secondaires (découpées) et différentes tailles. Cible minimale : 44x44px pour mobile.
• Bloc texte : Rubrique + texte de corps avec mise en page automatique. Mettez en place avec l'échelle de typographie de votre marque.
• Pied de page : Liens sociaux + désabonnement + adresse physique (obligatoire par CAN-SPAM). Gardez-le cohérent dans tous les courriels.

Utilisation des variables Figma

Les variables Figma vous permettent de définir vos jetons de conception — couleurs, espacement, typographie — en un seul endroit. Lorsque votre marque met à jour son orange *F4F00 à une ombre légèrement différente, vous changez la variable une fois et chaque composant en l'utilisant met à jour instantanément.

Pour les modèles de courriel, définir des variables pour :

• Couleurs de marque (primaire, secondaire, accent)
• Couleurs du texte (tête, corps, muet)
• Couleurs de fond (primaire, secondaire, carte)
• Valeurs d'espacement (rembourrage de section, écarts d'éléments)
• Rayon de bordure (boutons, cartes, images)

Le flux de travail Figma-to-Email

Une fois votre conception terminée, vous devez l'introduire dans votre plateforme de messagerie. Il existe deux approches principales:

Approche 1: Exporter en HTML

Des plugins comme Emailify peuvent convertir votre design Figma en code HTML que vous collez directement dans l'éditeur de code personnalisé de Klaviyo. L'avantage est un texte en direct qui est consultable, translatable et accessible. L'inconvénient est de rendre les incohérences — ce qui semble parfait dans Figma peut casser dans le mode sombre d'Outlook ou rendre avec des polices de repli.

Cette approche fonctionne mieux pour les emails texte-lourds (bulletins, contenus éducatifs, emails transactionnels) où le contenu texte est plus important que la conception parfaite de pixels.

Approche 2: Exporter sous forme d'images (déploiement et chargement)

Exportez votre conception comme une image complète, sectionnez-la dans des sections horizontales, compressez chaque section et téléchargez sur Klaviyo sous forme de blocs d'images. L'avantage est rendu parfait pixel dans chaque client de messagerie — y compris le mode noir. L'inconvénient est que le texte dans les images ne peut être recherché ou traduit.

Cette approche est celle que la plupart des marques de commerce électronique utilisent pour des campagnes de marketing — lancements de produits, ventes saisonnières, récits de marques — où le design visuel stimule l'engagement. Pour une plongée profonde dans la compression d'image, Consultez notre guide de compression d'image.

Approche 3: hybride

Utilisez des sections basées sur l'image pour des zones visuellement importantes (héros, vitrine de produits) et des sections codées en HTML pour du contenu dynamique (recommandations personnalisées de produits, texte avec étiquettes de fusion). L'éditeur de Klaviyo prend en charge le mélange des deux dans un seul courriel.

Erreurs courantes de conception d'email Figma

Même des designers expérimentés font ces erreurs lors de la conception de courriels dans Figma:

• Conception supérieure à 600px: Il semble limitatif, mais 600px est la largeur de sécurité maximale. Tout ce qui est plus large devient recadré ou déclenche le défilement horizontal dans de nombreux clients de messagerie.
• Utilisation de fonctionnalités CSS non supportées : Flexbox, grille CSS, position absolue, images de fond — aucune de ces images ne fonctionne de manière fiable dans l'email. Si vous exportez vers HTML, concevoir avec des mises en page basées sur la table à l'esprit.
• Oublier le mobile : Plus de 60% des courriels sont ouverts sur mobile. Si votre grille de produits 2 colonnes ne s'empile pas à une seule colonne sur des écrans étroits, vous perdez la majorité de votre public.
• Images surdimensionnées : Exporter une image de héros à 3000px de large quand il n'a besoin que de 1200px (600px à 2x pour la rétine). Exportations plus importantes = tailles de fichiers plus grandes = chargement plus lent. Voir notre guide de taille d'image Klaviyo pour les dimensions exactes.
• Ne pas utiliser de composants: Reconstruire des boutons, des en-têtes et des cartes produit à partir de zéro pour chaque campagne est une perte de temps massive. Investir une heure dans la construction d'une bibliothèque de composants et il se paiera immédiatement.
• Essai en mode noir en saut: Votre design Figma affiche toujours le mode lumière. Mais 80%+ des utilisateurs mobiles ont le mode sombre activé. Testez comment votre email rend avant d'envoyer. Lire notre guide d'email en mode sombre pour des stratégies détaillées.

Modèles d'email Figma gratuits pour commencer

Si vous commencez à zéro, Communauté Figma a d'excellentes collections de modèles d'email gratuits. Rechercher "email template e-commerce" et rechercher des collections qui incluent:

• Plusieurs types de campagnes (accueil, promotionnel, transactionnel)
• Bibliothèques de composants (pas seulement des plans plats)
• Variantes bureautique et mobile
• Mises en page spécifiques au commerce électronique (réseaux de produits, résumés de paniers)

Dupliquer un fichier communautaire, personnaliser les couleurs et la typographie pour correspondre à votre marque, et vous aurez un système de gabarit prêt à la production en moins d'une heure.

Questions fréquentes

Quelle largeur dois-je utiliser pour les modèles de courriel dans Figma?

Utiliser un Cadre large 600px. C'est la norme de l'industrie qui rend correctement tous les clients de courriel. Pour la zone de contenu, utilisez 540-560px pour laisser un rembourrage latéral confortable.

Puis-je utiliser des polices personnalisées dans des modèles de courriel?

Si vous exportez en HTML, les polices personnalisées ne fonctionnent que dans Apple Mail et quelques autres clients. Gmail et Outlook reviennent aux polices système comme Arial. Si vous utilisez approche basée sur l'image (exporting as images), n'importe quelle police rend parfaitement puisqu'elle est cuite dans les pixels d'image.

Existe-t-il des modèles d'email gratuits Figma ?

Oui, la communauté Figma possède des dizaines de collections gratuites. Rechercher "email template e-commerce" et rechercher des fichiers avec des bibliothèques de composants, pas seulement des maquettes plates.

Comment puis-je obtenir mon design Figma dans Klaviyo?

Deux approches : (1) Exporter comme HTML en utilisant un plugin et coller dans l'éditeur de code de Klaviyo, ou (2) Exporter comme images, section dans les sections, et télécharger comme blocs d'images. L'approche basée sur l'image est plus rapide et rend plus uniforme parmi les clients.

Dois-je concevoir les versions mobiles et de bureau séparément?

Pour les courriels HTML, concevoir les deux. Pour les e-mails basés sur l'image, concevoir à 600px et il s'échelle proportionnellement sur mobile. La plupart des marques de commerce électronique conçoit une version 600px qui fonctionne sur le bureau et mobile.