Template email in Figma per ecommerce

Se stai progettando campagne e-mail per un negozio di e-commerce nel 2026, stai quasi certamente utilizzando Figma. È diventato lo strumento di progettazione predefinito per team di marketing, agenzie e designer freelance — e per una buona ragione.

Ma il design e-mail ha vincoli unici che web e design app non. Non è possibile utilizzare flexbox, griglia CSS o fogli di stile esterni. Molti client di posta elettronica si affidano ancora ai layout basati sulla tabella. E ciò che sembra perfetto in Figma può rompere spettacolare quando colpisce Outlook.

Questa guida copre come configurare Modelli di email Figma correttamente dall'inizio, in modo che i vostri disegni traducono in e-mail reali — se esportate come HTML o come immagini.

Perché Figma è il miglior strumento per la progettazione e-mail

Rispetto a Photoshop, Canva, o qualsiasi altro strumento di progettazione, Figma offre tre vantaggi critici per l'email:

• Componenti e varianti: Progettare un pulsante una volta, riutilizzarlo attraverso 20 modelli. Modificare il componente master e ogni aggiornamento delle istanze automaticamente. Questo salva solo ore quando si gestisce un calendario di campagna.
• Auto Layout: Il layout automatico di Figma funziona come CSS flexbox — la direzione impostata, l'imbottitura, la spaziatura e l'allineamento. Questo mappa direttamente su come i layout e-mail sono strutturati, rendendo la traduzione design-to-code molto più liscia.
• Collaborazione in tempo reale: Il copywriter può aggiornare il testo mentre si regola il layout. Il tuo responsabile marketing può lasciare commenti direttamente sul design. Basta e-mail PSD avanti e indietro.

Canva è più veloce per i principianti, ma manca il sistema dei componenti e il controllo di precisione che richiede la progettazione e-mail. Photoshop è ancora utile per la modifica delle immagini, ma non è costruito per i sistemi di layout e la collaborazione.

Impostare il tuo modello di posta

Ottenere la fondazione destra impedisce mal di testa più tardi. Ecco la configurazione esatta:

Dimensioni telaio

• Larghezza: 600px — Questo è lo standard di posta elettronica universale. Ogni importante client di posta elettronica si aspetta 600px o più stretto. Alcune marche utilizzano 640px, ma 600px è il più sicuro.
• Contenuto contenitore: 540-560px — Lasciare 20-30px imbottitura su ogni lato. Questo impedisce al contenuto di toccare i bordi sui clienti mobili che aggiungono la propria imbottitura.
• Altezza: variabile — Non impostare un'altezza fissa. Lascia che il contenuto determini la lunghezza dell'email. Utilizzare il layout automatico impostato in verticale con "contenuti di scavo".

Sistema di rettifica

• griglia di spaziatura 8px: Utilizzare multipli di 8 per tutte le spaziature (8, 16, 24, 32, 40, 48px). Questo crea un ritmo visivo coerente e rende la scalabilità reattiva prevedibile.
• Layout grid: Applicare una griglia di 6 colonne al telaio 600px. Questo ti dà flessibilità per i layout 1-colonna, 2-colonna e 3-colonna all'interno dello stesso modello.

Costruire la libreria dei componenti

La vera potenza di Figma per e-mail è la costruzione di componenti riutilizzabili. Ecco ciò che ogni libreria di componenti e-commerce dovrebbe includere:

Componenti essenziali

• Intestazione: Logo + link di navigazione (opzionale). Mantenere semplice — la maggior parte dei clienti e-mail strip navigazione complessa. Un logo incentrato con uno o due link di testo è lo standard.
• Bandiera eroe: Immagine a larghezza intera o gradiente con titolo e CTA. Creare varianti per diversi tipi di campagna (vendita, nuovo arrivo, editoriale).
• Scheda prodotto: Immagine + nome del prodotto + prezzo + pulsante CTA. Questo è il componente cavallo di lavoro per e-commerce e-mail. Creare varianti per 1-colonna (larghezza totale) e layout 2-colonna.
• CTA pulsante: Il tuo componente più importante. Creare varianti per primarie (riempite), secondarie (outlined), e diverse dimensioni. Obiettivo minimo del rubinetto: 44x44px per cellulare.
• Blocco di testo: Testa + testo del corpo con layout automatico. Configurati con la scala tipografica del tuo marchio.
• Piede: Collegamenti sociali + annullare l'iscrizione + indirizzo fisico (richiesto da CAN-SPAM). Tenere coerente in tutte le e-mail.

Utilizzo delle variabili Figma

Le variabili Figma consentono di definire i token di progettazione — colori, spaziatura, tipografia — in un unico luogo. Quando il tuo marchio aggiorna il suo arancione da #FF4F00 # a un'ombra leggermente diversa, si modifica la variabile una volta e ogni componente che lo utilizza aggiorna istantaneamente.

Per i modelli di posta elettronica, definire variabili per:

• Colori di marca (primario, secondario, accento)
• Colori di testo (heading, body, muted)
• Colori di sfondo (primario, secondario, carta)
• Valori di spaziatura (sezione imbottitura, spazi vuoti)
• raggio di confine (bottoni, carte, immagini)

Il flusso di lavoro Figma-to-Email

Una volta che il tuo design è completo, devi farlo entrare nella tua piattaforma e-mail. Ci sono due approcci principali:

Approccio 1: Esporta come HTML

Plugin come Emailify possono convertire il tuo design Figma in codice HTML che si incolla direttamente nell'editor di codice personalizzato di Klaviyo. Il vantaggio è il testo dal vivo che è ricercabile, traducibile e accessibile. Lo svantaggio è rendere incongruenze — ciò che sembra perfetto in Figma può rompersi in modalità oscura di Outlook o rendere con font di fallback.

Questo approccio funziona meglio per le e-mail di testo-pesante (newsletters, contenuti educativi, e-mail transazionali) dove il contenuto di testo è più importante del design pixel-perfect.

Approccio 2: Esporta come immagini (Split e Carica)

Esporta il tuo design come immagine completa, la sezione in sezioni orizzontali, comprime ogni sezione e carica a Klaviyo come blocchi di immagine. Il vantaggio è rendering pixel-perfect in ogni client di posta elettronica — compresa la modalità oscura. Lo svantaggio è che il testo all'interno delle immagini non è ricercabile o traducibile.

Questo approccio è quello che la maggior parte dei marchi di e-commerce utilizza per campagne di marketing — lancio di prodotti, vendite stagionali, brand storytelling — dove il design visivo guida l'impegno. Per una profonda immersione nella compressione delle immagini, controllare la nostra guida di compressione immagine.

Approccio 3: ibrido

Utilizzare sezioni basate sull'immagine per aree visivamente importanti (eroe, vetrina del prodotto) e sezioni codificate in HTML per contenuti dinamici (raccomandazioni di prodotto personalizzate, testo con tag di fusione). L'editor di Klaviyo supporta la miscelazione sia in un'unica e-mail.

Errori comuni di progettazione e-mail Figma

Anche i progettisti esperti fanno questi errori nella progettazione di e-mail in Figma:

• Progettazione più ampia di 600px: Sembra limitante, ma 600px è la larghezza massima sicura. Tutto più ampio viene ritagliato o innesca scorrimento orizzontale in molti client di posta elettronica.
• Utilizzo di funzioni CSS non supportate: Flexbox, griglia CSS, posizione assoluta, immagini di sfondo — nessuno di questi lavori in modo affidabile in e-mail. Se stai esportando in HTML, progetta con layout basati sulla tabella in mente.
• Dimenticare mobile: Più del 60% delle email sono aperte sul cellulare. Se la tua griglia di prodotti a 2 colonne non si impila su schermi stretti, stai perdendo la maggior parte del tuo pubblico.
• Immagini di grandi dimensioni: Esportare un'immagine di eroe a 3000px largo quando ha bisogno solo di essere 1200px (600px a 2x per retina). Più grandi esportazioni = dimensioni di file più grandi = carico più lento. Guarda la nostra guida di formato immagine Klaviyo per dimensioni esatte.
• Non utilizzando componenti: La ricostruzione di pulsanti, intestazioni e schede di prodotto da zero per ogni campagna è un enorme spreco di tempo. Investire un'ora nella costruzione di una libreria di componenti e pagherà immediatamente per sé.
• Prova della modalità buia: Il tuo design Figma mostra sempre la modalità luminosa. Ma l'80%+ degli utenti mobili ha attivato la modalità oscura. Prova come la tua e-mail rende prima di inviare. Leggi la nostra guida email in modalità oscura per strategie dettagliate.

Modelli di posta elettronica Figma gratuiti per iniziare

Se stai partendo da zero, Comunità Figma ha eccellenti collezioni di modelli di email gratis. Cerca "email template e-commerce" e cerca collezioni che includono:

• Diversi tipi di campagna (gratifica, transazionale)
• Librerie componenti (non solo disegni piatti)
• Entrambe le varianti desktop e mobile
• Disposizioni specifiche per l'e-commerce (le griglie dei prodotti, i riassunti dei carrelli)

Duplicare un file di community, personalizzare i colori e la tipografia per abbinare il tuo marchio, e avrai un sistema di template pronto per la produzione in meno di un'ora.

Domande frequenti

Che larghezza dovrei usare per i modelli di posta elettronica in Figma?

Utilizzare un Telaio largo 600px. Questo è lo standard del settore che rende correttamente tutti i client di posta elettronica. Per l'area contenuti, utilizzare 540-560px per lasciare comodi imbottiture laterali.

Posso usare caratteri personalizzati nei modelli di posta elettronica?

Se esportate come HTML, i font personalizzati funzionano solo in Apple Mail e in alcuni altri client. Gmail e Outlook tornano ai font di sistema come Arial. Se si utilizza il approccio basato sull'immagine (esportando come immagini), qualsiasi carattere rende perfettamente in quanto è cotto nei pixel di immagine.

Ci sono modelli di posta elettronica Figma gratuiti?

Si — la Comunità Figma ha decine di collezioni libere. Cerca "email template e-commerce" e cerca file con librerie di componenti, non solo mockup piatti.

Come posso ottenere il mio design Figma in Klaviyo?

Due approcci: (1) Esportare come HTML utilizzando un plugin e incollare nell'editor di codice di Klaviyo, o (2) esportare come immagini, sezione in sezioni, e caricare come blocchi di immagine. L'approccio basato sull'immagine è più veloce e rende più coerente tra i clienti.

Dovrei progettare le versioni mobili e desktop separatamente?

Per e-mail HTML, progettare entrambi. Per le email basate sull'immagine, design a 600px e scala proporzionalmente su mobile. La maggior parte dei marchi di e-commerce progetta una versione 600px che funziona sia sul desktop che sul mobile.