Come esportare da Figma a Klaviyo: guida completa

Hai passato ore a progettare una bella email di e-commerce a Figma. La tipografia è sul punto, le immagini del prodotto sembrano croccanti, e tutto è perfettamente allineato. Ora è necessario farlo entrare in Klaviyo — ed è lì che le cose si complicano.

Se hai mai provato a esportazione Figma a Klaviyo, si conosce la frustrazione: i layout si rompono, i colori si spostano in modalità oscura, Outlook schiaccia il CSS, e Gmail clips il contenuto accuratamente realizzato. Questa guida vi guiderà attraverso l'intero processo — dall'approccio manuale ai flussi di lavoro automatizzati — in modo da poter trovare il metodo che funziona meglio per il vostro team.

Il modo manuale: come esportare disegni Figma a Klaviyo passo dopo passo

Cominciamo con le basi. Se non l'hai mai fatto prima, ecco il modo semplice (se un po' noioso) per spostare il vostro design di email Figma in Klaviyo:

1. Finisci il tuo disegno e-mail a Figma. Assicurarsi che tutto sia all'interno di un unico frame alla larghezza e-mail corretta (600px è lo standard).
2. Spalato direttamente in Figma. Utilizzare Figma incorporato Spalato strumento (shortcut): S) per disegnare sezioni orizzontali attraverso il vostro frame e-mail. Posizionare una sezione in ogni rottura logica — tra l'intestazione e il corpo, tra le sezioni di contenuto, sopra il piè di pagina. Quindi selezionare tutte le sezioni e esportarle subito come PNG o JPG.
3. Comprime ogni sezione. Utilizzare uno strumento come TinyPNG o Squoosh per ridurre le dimensioni dei file. Mirare per meno di 200KB per sezione — questo mantiene i tempi di caricamento veloce senza perdita di qualità visibile.
4. Carica a Klaviyo. Nell'editor e-mail di Klaviyo, aggiungi blocchi di immagine e carica ogni sezione in ordine dall'alto verso il basso. Aggiungi link cliccabili a ogni immagine dove necessario.
5. Prova e invia. Anteprima tra i clienti, controlla che i link funzionino e programma la tua campagna.

Questo processo funziona. Milioni di email di e-commerce sono costruiti in questo modo ogni giorno. Ma ci vuole 15-30 minuti per campagna, e se si invia più e-mail a settimana, che aggiunge veloce. Parleremo di alternative più veloci dopo — ma prima, capiamo perché La divisione dell'immagine è così importante.

Perché si dovrebbe dividere le immagini di posta elettronica (non inviare una grande immagine)

Potrebbe sembrare più facile esportare l'intera e-mail come una singola immagine e farla cadere in Klaviyo. Un'immagine, un caricamento, fatto, giusto? Purtroppo, questo approccio crea diversi problemi che possono tranquillamente sabotare le vostre campagne.

Icona di download di Gmail su immagini grandi

Quando Gmail rileva un'immagine troppo alta (circa oltre 800px), sovrappone un'icona di download sopra di essa. Questo pulsante di download copre il contenuto, rende l'aspetto e-mail rotto, e dà ai destinatari un motivo per ignorarlo completamente. Con l'immagine che divide la tua email in sezioni più piccole, ogni sezione rimane sotto quella soglia e Gmail li visualizza in modo pulito.

Gmail's 102KB HTML Clipping

Ecco uno che viaggia su un sacco di email marketing: clip Gmail qualsiasi e-mail il cui HTML supera 102KB. Quando questo accade, Gmail mostra un link "Visualizza tutto il messaggio" in basso - e la maggior parte delle persone non cliccare su di esso. Il tuo piè di pagina, il tuo CTA, il tuo link di cancellazione? Andato.

La buona notizia: quando si utilizzano e-mail basate sull'immagine, le immagini stesse sono ospitate esternamente e non contare verso il limite 102KB. Il tuo HTML è solo una serie di <img> tag e link, mantenendo il pozzo totale sotto la soglia.

Modalità oscura non rovinerà il tuo disegno

Ogni client di posta elettronica gestisce la modalità oscura in modo diverso. Apple Mail invertisce gli sfondi. Gmail cambia colori di testo. Outlook fa la sua cosa completamente. Se la tua email è codificata in HTML, la modalità oscura può trasformare il tuo testo bianco invisibile su uno sfondo bianco-tornato-dark, o rendere i colori del tuo marchio guardare completamente sbagliato.

Le email basate su immagini sono immuni a questo. Dal momento che il contenuto è cotto nell'immagine, non ci sono colori CSS per la modalità oscura da sovrascrivere. Quello che hai progettato è ciò che il tuo cliente vede.

Compatibilità di Microsoft Outlook

Outlook rende HTML utilizzando Il motore di Microsoft Word. Ciò significa che flexbox non funziona, griglia non funziona, e la maggior parte delle proprietà CSS moderne sono ignorate. Se hai mai trascorso ore a debug di un'email che sembra perfetta ovunque tranne Outlook, sai il dolore. Le e-mail basate sull'immagine eliminano completamente questo: rendono lo stesso in ogni client.

Quali e-mail rilasciate sembrano nella pratica

Per fare questo concreto, ecco come appare il processo di divisione immagine. Si prende una progettazione e-mail completa e dividerla in sezioni orizzontali logiche:

Ogni sezione diventa la sua immagine in Klaviyo. Le impilare verticalmente, aggiungere collegamenti cliccabili a ciascuno, e il destinatario vede una e-mail senza soluzione di continuità — senza lacune, senza layout rotti, solo il tuo design originale reso pixel-for-pixel.

Email in HTML o con immagini: la prospettiva ecommerce

C'è un dibattito continuo nel mondo del email marketing: dovrebbe codificare le email in HTML o inviarle come immagini suddivise? La risposta dipende dalle vostre priorità.

E-mail codificate HTML sono grandi per il contenuto di testo-pesante come newsletter, e-mail transazionali, o qualsiasi cosa che deve essere completamente accessibile. Strumenti come plugin Figma-to-HTML (come Emailify) può convertire il tuo design in codice HTML. Tuttavia, sarete ancora affrontare le incongruenze di rendering attraverso i client — in particolare Outlook e modalità oscura.

E-mail basate su immagini sono ideali per campagne di e-commerce dove il design visivo è la priorità: lancio di prodotti, annunci di vendita, campagne di marca, promozioni stagionali. Ogni grande marchio di e-commerce — da Nike a Zara a centinaia di negozi Shopify — invia email basate sull'immagine per le loro campagne di marketing.

Il miglior approccio? Utilizzare entrambi. Immagine-basata per le vostre campagne di marketing di alto design, codificato HTML per le email transazionali e newsletter di testo semplice. La maggior parte dei team di e-commerce trovano che il 70-80% delle loro campagne beneficiano dell'approccio basato sull'immagine.

"Won't Image Emails Go to Spam?" — Debunking the Myth

Questa è probabilmente la preoccupazione più comune, e vale la pena rivolgersi direttamente.

L'idea che le e-mail di immagine-pesante danneggiano automaticamente la consegna è obsoleto. La moderna e-mail di consegna dipende da:

• reputazione del venditore — l'autenticazione del dominio (SPF, DKIM, DMARC), i tassi di impegno e l'igiene dell'elenco
• fidanzamento — se le persone si aprono, cliccano e interagiscono con le tue email
• Elenco qualità — inviare a persone che vogliono veramente sentire da voi

Il mito del rapporto immagine-testo deriva dai primi anni 2000 quando i filtri spam erano primitivi. I filtri spam di oggi utilizzano segnali di apprendimento automatico e comportamentali — si preoccupano se i vostri destinatari si impegnano con le vostre email, non se avete usato le immagini.

Detto questo, le migliori pratiche si applicano ancora: includere testo alternativo su ogni immagine (per accessibilità e come fallback quando le immagini non caricano), aggiungere un preheader di testo e mantenere il dominio di invio correttamente autenticato. Se hai più domande sulla consegnabilità e le migliori pratiche e-mail, controlla il nostro Pagina FAQ per risposte rapide.

Accelerazione del flusso di lavoro Figma a Klaviyo

Il metodo manuale funziona, ma farlo per ogni campagna diventa vecchio veloce. Ecco alcuni modi per accelerare le cose quando si esportazione Figma a Klaviyo:

Opzione 1: Plugin Figma

Diversi plugin Figma possono aiutare a automatizzare parti di questo flusso di lavoro. Alcuni convertono i disegni in HTML (come Emailify), mentre altri — come il EmailSlicer Figma plugin — gestire la divisione dell'immagine, la compressione e l'importazione di Klaviyo direttamente dall'interno di Figma. Il vantaggio di rimanere all'interno di Figma è quello di saltare completamente il ciclo di esportazione-ridimensionamento-upload.

Opzione 2: Strumenti di divisione immagine basati sul Web

Se il tuo design non viene da Figma — forse un freelancer ti invia un'immagine piana, o si utilizza un altro strumento di progettazione — fettine web-based consentono di caricare qualsiasi immagine, impostare i punti sezione, comprimere, e o scaricare le sezioni o spingerli a Klaviyo via API. Puoi. confrontare i piani disponibili per trovare la soluzione giusta per il volume della tua squadra.

Opzione 3: Costruire la propria Pipeline

Se sei tecnicamente inclinato, puoi costruire una pipeline personalizzata utilizzando la libreria immagine di Sharp (Node.js) o il cuscino di Python per automatizzare la divisione e la compressione delle immagini, quindi utilizzare l'API di Klaviyo per caricare le immagini in modo programmatico. Questo è overkill per la maggior parte delle squadre, ma è un'opzione se avete requisiti molto specifici.

Il flusso di lavoro in un solco

Indipendentemente da quale metodo si sceglie, il flusso di lavoro principale da esportazione Figma a Klaviyo è lo stesso: progettare la vostra e-mail, la sezione in sezioni, comprimere per le prestazioni web, e importare in Klaviyo. L'unica differenza è quanto di quel processo si fa manualmente vs. con gli strumenti. Copriamo più strategie di marketing e-mail e suggerimenti del flusso di lavoro sui nostri blog blog blog — vale la pena bookmarking se si sta ottimizzando la vostra pipeline di produzione e-mail.

Domande frequenti

Posso esportare direttamente da Figma a Klaviyo senza attrezzi?

Non in nativo. Figma non ha un'integrazione Klaviyo integrata. Dovrai esportare il tuo design come immagine prima, quindi caricarlo a Klaviyo. La domanda è se si fa ogni passo manualmente o utilizzare un plugin / strumento per automatizzarlo.

Quale formato immagine dovrei usare per le email?

JPEG è meglio per fotografie e immagini complesse (dimensioni di file più piccole). PNG è migliore quando avete bisogno di trasparenza o hanno grandi aree di colore piatto. Per la maggior parte delle email di e-commerce con la fotografia di prodotto, JPEG a 80-85% qualità dà il miglior rapporto di dimensione-qualità.

Quante sezioni dovrei usare per e-mail?

Tipicamente da 4 a 8 sezioni lavorare bene. L'obiettivo è quello di mantenere ogni immagine in altezza ~800px (per evitare l'icona di download di Gmail) mentre il taglio a limiti di contenuto logici — tra l'intestazione e il corpo, tra le sezioni del prodotto, sopra il piè di pagina. Ogni sezione dovrebbe corrispondere ad una zona cliccabile distinta, se possibile.

Le email basate sull'immagine influenzeranno la velocità di caricamento?

Carico effettivo delle sezioni compresse più veloce che una singola grande immagine. I client di posta elettronica possono caricare più immagini più piccole in parallelo, e la compressione può ridurre la dimensione totale del file del 60-80% senza perdita di qualità visibile. La chiave è la compressione — comprimere sempre prima di caricare a Klaviyo.

E l'accessibilità?

Questo è un compromesso legittimo. Le email basate su immagini non sono accessibili ai lettori dello schermo come il testo HTML è. Per mitigare questo, aggiungere sempre un testo alternativo descrittivo ad ogni immagine, includere un link "Visualizza nel browser", e considerare l'aggiunta di una versione di testo semplice della tua campagna a Klaviyo. Per e-commerce e-mail promozionali, la maggior parte dei marchi accettano questo trade-off in cambio di coerenza visiva garantita.