Usa Emailify, un plugin Figma di Hypermatic, per progettare email responsive e aggiungerle alle tue email Omnisend.

🔋 Cerchi l'integrazione nativa di Figma con Omnisend? Scopri come integrare Figma con Omnisend

Come funziona

Emailify è un plugin Figma che trasforma il tuo design Figma in codice email HTML responsive pronto per la produzione.Include una preimpostazione di esportazione Omnisend che genera HTML formattato per le campagne HTML personalizzate di Omnisend.

Il flusso ha due fasi:

Progetta ed esporta in Figma. Costruisci l'email utilizzando i componenti di Emailify, selezionaOmnisend nel pannello di esportazione e esporta l'HTML.
Importa in Omnisend. Incolla l'HTML esportato in una campagna utilizzando la funzione HTML personalizzata di Omnisend.

Questa è un'integrazione manuale di esportazione e incolla.Emailify non carica automaticamente i modelli su Omnisend, quindi non c'è connessione API, nessun passaggio di autenticazione e nessun dato inviato tra le due piattaforme.

Prima di iniziare

Assicurati che:

Hai un account Figma con permesso di eseguire plugin.
Il plugin Emailify è installato in Figma.
Hai un account Omnisend con accesso alle campagne email.
Le tue immagini email sono ospitate su URL pubblici, oppure sei pronto a ospitarle.

Questa integrazione coinvolge tre piattaforme.Ecco cosa richiede ciascuna:

Piattaforma	Requisito
Figma	Qualsiasi piano, incluso il gratuito.Hai bisogno di un posto con accesso completo al Design, perché i posti in sola visualizzazione non possono eseguire plugin.
Emailify	La versione gratuita funziona per esportazioni di base.Il plugin include 10 utilizzi gratuiti Pro, dopo i quali alcune opzioni di esportazione richiedono una licenza Pro.
Omnisend	Qualsiasi piano, incluso il gratuito.Le campagne HTML personalizzate sono disponibili in tutti i piani.

⚠️ Emailify funziona solo con email create all'interno del plugin.Non puoi convertire un design Figma esistente che non è stato creato con i componenti di Emailify.

Processo di Configurazione

Passaggio 1. In Omnisend, vai a App → cerca il App Emailify e cliccaCollegati ora.

Passo 2. Installa Emailify in Figma:

Apri un file di design Figma.
Vai a Strumenti → Plugin → Emailify.

Il pannello del plugin si apre sopra il tuo canvas.

Passo 3. Costruisci la tua email. Nel pannello del plugin, apri ilNuova Email sezione.

Scegli Template Vuoto, oppure scegli un punto di partenza da Layout o Template Figma.

Passo 4. Esporta l'HTML per Omnisend:

Seleziona Esporta HTML nell'intestazione del plugin.
Nel pannello di esportazione, apri il menu a discesa del tipo di esportazione.
Sotto l'elenco delle integrazioni di piattaforma, seleziona Omnisend.
Seleziona Esporta per Omnisend.

Emailify genera l'HTML e puoi scaricarlo sul tuo computer.

Passo 5. Ospita le tue immagini

L'esportazione include le tue immagini come file locali.I client email non possono visualizzare immagini locali, quindi ogni immagine ha bisogno di un URL pubblico prima di importare l'HTML.

Hai due opzioni:

Usa l'hosting delle immagini di Emailify. Abilita l'opzione di immagine ospitata nelle impostazioni di esportazione in modo che l'HTML esportato punti a URL pubblici.
Ospita le immagini tu stesso. Caricale sul tuo CDN o archivio file, quindi sostituisci ciascunvalore src nell'HTML con l'URL ospitato.

🔁 Controlla gli URL delle immagini nell'HTML esportato prima di importare.Se qualche src punta ancora a un percorso di file locale, l'immagine non verrà caricata nell'Email consegnata.

Passo 6. Importa l'HTML in Omnisend.

Fai riferimento a Aggiungi e configura elemento HTML personalizzato per dettagli sui requisiti HTML personalizzati di Omnisend.

Passo 6. Aggiungi personalizzazione e link richiesti.

Emailify genera HTML statico.Qualsiasi cosa specifica di Omnisend viene aggiunta dopo l'importazione:

Tag di personalizzazione. Inserisci i tag di Omnisend come[[ contact.firstName ]] direttamente nell'HTML dove desideri valori dinamici.
Link per annullare l'iscrizione. Ogni campagna richiede un link per annullare l'iscrizione. Aggiungi l'URL di annullamento dell'iscrizione di Omnisend al tuo piè di pagina se il design non ne include già uno.
Link per visualizzare nel browser. I componenti del preheader di Emailify includono un segnaposto "visualizza nel browser". Sostituisci il segnaposto con il link di Omnisend.

Verifica l'Integrazione

Invia un'Email di prova prima di programmare la campagna.

Apri la campagna importata in Omnisend.
Invia un'Email di prova al tuo indirizzo.
Conferma che tutte le immagini si carichino.
Conferma che il layout venga visualizzato correttamente sia su desktop che su mobile.
Controlla l'Email in più di un client, come Gmail e Outlook.
Conferma che il link per annullare l'iscrizione funzioni.
Conferma che eventuali tag di personalizzazione si risolvano.

🔁 L'anteprima di Omnisend e un'Email di prova consegnata possono produrre risultati diversi.Usa un'Email di prova consegnata come tuo controllo finale.

Risoluzione dei problemi

L'HTML viene rifiutato all'importazione

L'importazione HTML personalizzata di Omnisend ha requisiti di formattazione.Controlla che il codice soddisfi tali requisiti e rimuovi eventuali elementi non supportati prima di incollare.

Le immagini non si caricano

Controlla quanto segue:

Ogni src punta a un URL pubblico anziché a un percorso di file locale.
Gli URL delle immagini ospitate si aprono correttamente in un browser.
I file immagine sono stati caricati prima che la campagna fosse inviata.

Il layout si rompe in Outlook

Outlook utilizza un motore di rendering diverso rispetto alla maggior parte dei client.In Emailify:

Re-esporta con i fallback dei font web-safe configurati.
Controlla le impostazioni di override mobile per i componenti interessati.
Ritesta dopo ogni modifica, poiché il rendering di Outlook non può essere verificato dall'anteprima di Figma.

Il plugin non si aprirà in Figma

Se Figma mostra un messaggio "Richiedi a Figma Design di eseguire plugin", il tuo posto non ha accesso completo al Design.I plugin non possono essere eseguiti su posti in sola visualizzazione.Richiedi l'accesso al Design dal tuo amministratore di Figma.

Le modifiche in Figma non appaiono in Omnisend

Non c'è una connessione live tra le due piattaforme.Dopo aver modificato il design, esporta di nuovo l'HTML e ri-importalo in una nuova campagna.

Domande frequenti

Emailify carica automaticamente i modelli su Omnisend?

No. L'esportazione di Omnisend produce un file HTML che incolli manualmente in Omnisend.

Ho bisogno di una chiave API di Omnisend?

No. Questa integrazione non utilizza l'API di Omnisend.

Ho bisogno di una licenza Emailify a pagamento?

Non necessariamente. Il plugin include 10 utilizzi Pro gratuiti, e la versione gratuita rimane disponibile dopo.Controlla il pannello del plugin Emailify per vedere quali opzioni di esportazione include la tua versione attuale.

Ho bisogno di un piano Omnisend a pagamento?

No. Le campagne HTML personalizzate sono disponibili in tutti i piani, incluso il gratuito.

Posso modificare il design all'interno di Omnisend dopo l'importazione?

L'HTML importato viene modificato come codice piuttosto che nell'editor drag-and-drop di Omnisend.Apporta modifiche al design in Figma e riesporta.

Posso riutilizzare lo stesso design per più campagne?

Sì. Salva il file HTML esportato e incollalo in ogni nuova campagna.

Posso importare un design email esistente di Figma in Emailify?

No. Emailify esporta solo email create con i propri componenti all'interno del plugin.

Funziona per le email dei flussi automatizzati?

L'HTML esportato può essere utilizzato ovunque Omnisend accetta HTML personalizzato.Controlla le opzioni HTML personalizzate disponibili nella tua email di flusso.

Non hai trovato la risposta alla tua domanda? Contatta il nostro Team di Supporto tramite la chat in-app o a [email protected] – siamo disponibili 24/7.

Integra Emailify con Omnisend