Von Figma zu Klaviyo exportieren: der Leitfaden

Sie haben Stunden damit verbracht, eine schöne E-Commerce-E-Mail in Figma zu entwerfen. Die Typografie ist auf dem Punkt, die Produktbilder sehen knusprig aus und alles ist perfekt ausgerichtet. Jetzt müssen Sie es in Klaviyo bekommen - und dort werden die Dinge kompliziert.

Wenn Sie jemals versucht haben, Export von Figma nach KlaviyoSie kennen die Frustration: Layouts brechen, Farben verschieben sich im dunklen Modus, Outlook verzerrt Ihr CSS und Gmail clips Ihre sorgfältig gestalteten Inhalte. Dieser Leitfaden führt Sie durch den gesamten Prozess - vom manuellen Ansatz bis hin zu automatisierten Workflows -, damit Sie die Methode finden, die für Ihr Team am besten geeignet ist.

Der manuelle Weg: So exportieren Sie Figma-Designs Schritt für Schritt nach Klaviyo

Beginnen wir mit den Grundlagen. Wenn Sie dies noch nie zuvor getan haben, ist hier der einfache (wenn auch etwas langweilige) Weg, um Ihr Figma-E-Mail-Design in Klaviyo zu verschieben:

1. Beenden Sie Ihr E-Mail-Design in Figma. Stellen Sie sicher, dass sich alles in einem einzigen Frame mit der richtigen E-Mail-Breite befindet (600px ist der Standard).
2. Split direkt in Figma. Verwenden Sie Figma's built-in Split-Tool (Abkürzung): SUm horizontale Abschnitte über Ihren E-Mail-Rahmen zu zeichnen. Platzieren Sie bei jedem logischen Bruch einen Abschnitt - zwischen Header und Body, zwischen Inhaltsabschnitten, über der Fußzeile. Wählen Sie dann alle Abschnitte aus und exportieren Sie sie sofort als PNG oder JPG.
3. Komprimieren Sie jeden Abschnitt. Verwenden Sie ein Tool wie TinyPNG oder Squoosh, um die Dateigröße zu reduzieren. Ziel für unter 200 KB pro Abschnitt - das hält die Ladezeiten schnell ohne sichtbaren Qualitätsverlust.
4. Upload nach Klaviyo. Fügen Sie im E-Mail-Editor von Klaviyo Bildblöcke hinzu und laden Sie jeden Abschnitt in der Reihenfolge von oben nach unten hoch. Fügen Sie bei Bedarf anklickbare Links zu jedem Bild hinzu.
5. Testen und senden. Überprüfen Sie, ob Links funktionieren, und planen Sie Ihre Kampagne.

Dieser Prozess funktioniert. Millionen von E-Commerce-E-Mails werden jeden Tag auf diese Weise erstellt. Aber es braucht 15 bis 30 Minuten pro KampagneWenn sie mehrere e-mails pro woche senden, summiert sich das schnell. Wir werden später über schnellere Alternativen sprechen - aber zuerst, lasst uns verstehen Warum Image Splitting ist so wichtig.

Warum sollten Sie Ihre E-Mail-Bilder teilen (nicht ein großes Bild senden)

Es mag einfacher erscheinen, die gesamte E-Mail als einzelnes Bild zu exportieren und in Klaviyo zu legen. Ein Bild, ein Upload, fertig – richtig? Leider schafft dieser Ansatz mehrere Probleme, die Ihre Kampagnen leise sabotieren können.

Download-Icon von Gmail auf großen Bildern

Wenn Gmail ein zu großes Bild erkennt (etwa über 800px), überlagert es ein Download-Symbol darüber. Dieser Download-Button deckt Ihre Inhalte ab, lässt die E-Mail kaputt aussehen und gibt Ihren Empfängern einen Grund, sie vollständig zu ignorieren. Indem das Bild Ihre E-Mail in kleinere Abschnitte aufteilt, bleibt jeder Abschnitt unter diesem Schwellenwert und Gmail zeigt sie sauber an.

102KB HTML Clipping von Gmail

Hier ist eine, die viele E-Mail-Vermarkter stolpert: Gmail-Clips jede E-Mail, deren HTML 102 KB überschreitet. Wenn das passiert, zeigt Gmail unten einen Link "Ganze Nachricht anzeigen" an - und die meisten Leute klicken nie darauf. Deine Fußzeile, dein CTA, dein Abmeldelink? Weg.

Die gute Nachricht: Wenn Sie bildbasierte E-Mails verwenden, werden die Bilder selbst extern gehostet und Zählen Sie nicht zum 102KB-Limit. Ihr HTML ist nur eine Reihe von <img> Tags und Links, die Gesamtmenge gut unter dem Schwellenwert zu halten.

Dark Mode wird Ihr Design nicht ruinieren

Jeder E-Mail-Client behandelt den dunklen Modus anders. Apple Mail invertiert Hintergründe. Gmail ändert Textfarben. Outlook macht sein eigenes Ding ganz. Wenn Ihre E-Mail in HTML codiert ist, kann der dunkle Modus Ihren weißen Text auf einem weiß gedrehten dunklen Hintergrund unsichtbar machen oder Ihre Markenfarben völlig falsch aussehen lassen.

Bildbasierte E-Mails sind dagegen immun. Da der Inhalt in das Bild gebacken wird, gibt es keine CSS-Farben für den dunklen Modus, um sich zu überschreiben. Was Sie entworfen haben, ist das, was Ihr Kunde sieht.

Microsoft Outlook Kompatibilität

Outlook rendert HTML mit Motor von Microsoft Word. Das bedeutet, dass flexbox nicht funktioniert, grid nicht funktioniert und die meisten modernen css-eigenschaften ignoriert werden. Wenn Sie jemals Stunden damit verbracht haben, eine E-Mail zu debuggen, die überall perfekt aussieht, außer Outlook, kennen Sie den Schmerz. Bildbasierte E-Mails beseitigen dies vollständig - sie machen das gleiche in jedem Client.

Wie geschnittene E-Mails in der Praxis aussehen

Um dies konkret zu machen, hier ist, wie der Prozess der Bildaufteilung aussieht. Sie nehmen ein vollständiges E-Mail-Design und teilen es in logische horizontale Abschnitte auf:

Jeder Abschnitt wird zu einem eigenen Bild in Klaviyo. Sie stapeln sie vertikal, fügen anklickbare Links zu jedem hinzu, und der Empfänger sieht eine nahtlose E-Mail - keine Lücken, keine defekten Layouts, nur Ihr ursprüngliches Design, das Pixel für Pixel gerendert wurde.

HTML- oder bildbasierte E-Mails aus E-Commerce-Sicht

Es gibt eine anhaltende Debatte in der E-Mail-Marketing-Welt: Sollten Sie E-Mails in HTML codieren oder als Schnittbilder senden? Die Antwort hängt von Ihren Prioritäten ab.

HTML codierte E-Mails eignen sich hervorragend für textlastige Inhalte wie Newsletter, Transaktions-E-Mails oder alles, was vollständig zugänglich sein muss. Werkzeuge wie Figma-to-HTML Plugins (wie Emailify) kann Ihr Design in HTML-Code konvertieren. Sie werden jedoch immer noch mit Rendering-Inkonsistenzen bei Clients konfrontiert sein - insbesondere Outlook und Dark Mode.

Bildbasierte E-Mails sind ideal für E-Commerce-Kampagnen, bei denen visuelles Design die Priorität hat: Produkteinführungen, Verkaufsankündigungen, Markenkampagnen, saisonale Werbeaktionen. Jede große E-Commerce-Marke - von Nike über Zara bis hin zu Hunderten von Shopify-Shops - sendet bildbasierte E-Mails für ihre Marketingkampagnen.

Der beste Ansatz? Verwenden Sie beide. Bildbasiert für Ihre High-Design-Marketing-Kampagnen, HTML-codiert für Transaktions-E-Mails und Klartext-Newsletter. Die meisten E-Commerce-Teams finden, dass 70-80% ihrer Kampagnen vom bildbasierten Ansatz profitieren.

"Werden Image-E-Mails nicht zu Spam gehen?" - Entlarven des Mythos

Dies ist wahrscheinlich die häufigste Sorge, und es lohnt sich, direkt anzusprechen.

Die Idee, dass bildschwere E-Mails die Zustellbarkeit automatisch beeinträchtigen, ist veraltet. Moderne E-Mail-Zustellbarkeit hängt ab von:

• Ruf des Senders Ihre Domain-Authentifizierung (SPF, DKIM, DMARC), Engagement-Raten und Listenhygiene
• Engagement des Empfängers - ob Personen Ihre E-Mails öffnen, klicken und mit ihnen interagieren
• Listenqualität - Senden an Menschen, die tatsächlich von Ihnen hören wollen

Der Mythos Bild-zu-Text-Verhältnis stammt aus den frühen 2000er Jahren, als Spam-Filter primitiv waren. Heutige Spamfilter verwenden maschinelles Lernen und Verhaltenssignale - sie kümmern sich darum, ob Ihre Empfänger mit Ihren E-Mails interagieren, nicht ob Sie Bilder verwendet haben.

Das heißt, Best Practices gelten weiterhin: Fügen Sie alternativen Text in jedes Bild ein (zur Zugänglichkeit und als Fallback, wenn Bilder nicht geladen werden), fügen Sie einen Textvorkopf hinzu und halten Sie Ihre sendende Domain ordnungsgemäß authentifiziert. Wenn Sie weitere Fragen zu Zustellbarkeit und Best Practices für E-Mails haben, lesen Sie unsere FAQ-Seite für schnelle Antworten.

Beschleunigung des Figma zu Klaviyo Workflow

Die manuelle Methode funktioniert, aber es für jede Kampagne zu tun, wird schnell alt. Hier sind einige Möglichkeiten, die Dinge zu beschleunigen, wenn Sie Export von Figma nach Klaviyo:

Option 1: Figma Plugins

Mehrere Figma-Plugins können dabei helfen, Teile dieses Workflows zu automatisieren. Einige konvertieren Designs in HTML (wie Emailify), während andere - wie die EmailSlicer Figma Plugin - die Bildaufteilung, -komprimierung und den Klaviyo-Import direkt aus Figma heraus bearbeiten. Der Vorteil des Aufenthalts in Figma besteht darin, dass Sie den Export-Size-Upload-Zyklus vollständig überspringen.

Option 2: Webbasierte Tools zur Bildaufteilung

Wenn Ihr Design nicht von Figma stammt - vielleicht schickt Ihnen ein Freelancer ein flaches Bild oder Sie verwenden ein anderes Design-Tool - können Sie mit webbasierten Slicern ein beliebiges Bild hochladen, Ihre Schnittpunkte festlegen, komprimieren und entweder die Abschnitte herunterladen oder sie über API an Klaviyo schieben. Sie können Vergleich der verfügbaren Pläne um die richtige Passform für das Volumen Ihres Teams zu finden.

Option 3: Bauen Sie Ihre eigene Pipeline

Wenn Sie technisch geneigt sind, können Sie eine benutzerdefinierte Pipeline mit Sharp (Node.js-Bildbibliothek) oder Pythons Pillow erstellen, um die Bildaufteilung und -komprimierung zu automatisieren, und dann die API von Klaviyo verwenden, um die Bilder programmgesteuert hochzuladen. Dies ist für die meisten Teams ein Overkill, aber es ist eine Option, wenn Sie sehr spezifische Anforderungen haben.

Der Workflow auf einen Blick

Unabhängig davon, welche Methode Sie wählen, wird der Kernworkflow Export von Figma nach Klaviyo ist das gleiche: entwerfen Sie Ihre E-Mail, unterteilen Sie sie in Abschnitte, komprimieren Sie für die Web-Performance und importieren Sie sie in Klaviyo. Der einzige Unterschied ist, wie viel von diesem Prozess Sie manuell vs. mit Tools ausführen. Wir decken mehr E-Mail-Marketing-Strategien und Workflow-Tipps auf unserer Blog Blog — Lesezeichen wert, wenn Sie Ihre E-Mail-Produktionspipeline optimieren.

Häufige Fragen

Kann ich direkt von Figma nach Klaviyo ohne Werkzeuge exportieren?

Nicht nativ. Figma hat keine eingebaute Klaviyo-Integration. Sie müssen Ihr Design zuerst als Bild exportieren und es dann in Klaviyo hochladen. Die Frage ist, ob Sie jeden Schritt manuell ausführen oder ein Plugin / Tool verwenden, um ihn zu automatisieren.

Welches Bildformat sollte ich für E-Mails verwenden?

JPEG eignet sich am besten für Fotos und komplexe Visuals (kleinere Dateigrößen). PNG ist besser, wenn Sie Transparenz benötigen oder große Flächen mit flacher Farbe haben. Für die meisten E-Commerce-E-Mails mit Produktfotografie bietet JPEG mit 80-85% Qualität das beste Verhältnis von Größe zu Qualität.

Wie viele Abschnitte sollte ich pro E-Mail verwenden?

Typisch 4 bis 8 Abschnitte gut arbeiten. Das Ziel ist es, jedes Bild unter ~800px hoch zu halten (um das Download-Symbol von Gmail zu vermeiden), während man an logischen Inhaltsgrenzen schneidet - zwischen Kopf und Körper, zwischen Produktabschnitten, über der Fußzeile. Jeder Abschnitt sollte nach Möglichkeit einem bestimmten anklickbaren Bereich entsprechen.

Werden bildbasierte E-Mails die Ladegeschwindigkeit beeinflussen?

Richtig komprimierte Abschnitte tatsächlich belasten schneller als ein einziges großes Bild. E-Mail-Clients können mehrere kleinere Bilder parallel laden, und die Komprimierung kann die Gesamtdateigröße um 60-80% reduzieren, ohne sichtbaren Qualitätsverlust. Der Schlüssel ist die Komprimierung - immer komprimieren, bevor Sie auf Klaviyo hochladen.

Was ist mit der Zugänglichkeit?

Dies ist ein legitimer Kompromiss. Bildbasierte E-Mails sind für Bildschirmleser nicht so zugänglich wie HTML-Text. Um dies zu mildern, fügen Sie jedem Bild immer einen beschreibenden alternativen Text hinzu, fügen Sie einen Link "Ansicht im Browser" hinzu und ziehen Sie in Betracht, eine Klartextversion Ihrer Kampagne in Klaviyo hinzuzufügen. Bei E-Commerce-Werbe-E-Mails akzeptieren die meisten Marken diesen Kompromiss im Austausch für eine garantierte visuelle Konsistenz.