E-Mail-Vorlagen in Figma für E-Commerce

Wenn Sie E-Mail-Kampagnen für einen E-Commerce-Shop im Jahr 2026 entwerfen, verwenden Sie mit ziemlicher Sicherheit Figma. Es ist zum Standard-Design-Tool für Marketingteams, Agenturen und freiberufliche Designer geworden - und das aus gutem Grund.

Aber E-Mail-Design hat einzigartige Einschränkungen, die Web- und App-Design nicht haben. Sie können keine Flexbox, CSS-Raster oder externe Stylesheets verwenden. Viele E-Mail-Clients verlassen sich immer noch auf tabellenbasierte Layouts. Und was in Figma perfekt aussieht, kann spektakulär brechen, wenn es Outlook trifft.

Dieser Leitfaden behandelt, wie man einrichten Figma-E-Mail-Vorlagen Von Anfang an richtig, so dass Ihre Designs sauber in echte E-Mails übersetzt werden - ob Sie als HTML oder als Bilder exportieren.

Warum Figma das beste Tool für E-Mail-Design ist

Im Vergleich zu Photoshop, Canva oder einem anderen Design-Tool bietet Figma drei entscheidende Vorteile für E-Mails:

• Komponenten und Varianten: Entwerfen Sie einen Button einmal und verwenden Sie ihn in 20 Vorlagen wieder. Ändern Sie die Masterkomponente und jede Instanz wird automatisch aktualisiert. Schon das spart Stunden beim Verwalten eines Kampagnenkalenders.
• Autolayout: Das automatische Layout von Figma funktioniert wie die CSS-Flexbox - eingestellte Richtung, Polsterung, Abstand und Ausrichtung. Dies bildet direkt ab, wie E-Mail-Layouts strukturiert sind, wodurch die Design-to-Code-Übersetzung viel reibungsloser wird.
• Echtzeit-Zusammenarbeit: Ihr Texter kann Text aktualisieren, während Sie das Layout anpassen. Ihr Marketingmanager kann Kommentare direkt zum Design hinterlassen. Keine E-Mails mehr PSDs hin und her.

Canva ist für Anfänger schneller, aber es fehlt das Komponentensystem und die Präzisionskontrolle, die das E-Mail-Design erfordert. Photoshop ist immer noch nützlich für die Bildbearbeitung, aber es ist nicht für Layout-Systeme und Zusammenarbeit gebaut.

Einrichten Ihres E-Mail Template Frame

Die Stiftung richtig zu machen, verhindert später Kopfschmerzen. Hier ist das genaue Setup:

Rahmenabmessungen

• Breite: 600px Dies ist der universelle E-Mail-Standard. Jeder große E-Mail-Client erwartet 600px oder schmaler. Einige Marken verwenden 640px, aber 600px ist die sicherste.
• Inhaltsbehälter: 540-560px Lassen Sie 20-30px Polsterung auf jeder Seite. Dadurch wird verhindert, dass Inhalte die Ränder von mobilen Clients berühren, die ihr eigenes Padding hinzufügen.
• Höhe: variabel — Legen Sie keine feste Höhe fest. Lassen Sie den Inhalt die Länge der E-Mail bestimmen. Verwenden Sie das automatische Layout, das mit "Hug Content" auf vertikal eingestellt ist.

Netzsystem

• 8px Abstandsraster: Verwenden Sie Vielfache von 8 für alle Intervalle (8, 16, 24, 32, 40, 48px). Dies schafft einen konsistenten visuellen Rhythmus und macht die responsive Skalierung vorhersehbar.
• Layout-Raster: Wenden Sie ein 6-Säulen-Raster auf Ihren 600px-Rahmen an. Dies gibt Ihnen Flexibilität für 1-Spalten-, 2-Spalten- und 3-Spalten-Layouts innerhalb derselben Vorlage.

Aufbau Ihrer Komponentenbibliothek

Die wahre Kraft von Figma für E-Mails ist das Erstellen wiederverwendbarer Komponenten. Hier ist, was jede E-Commerce-E-Mail-Komponentenbibliothek enthalten sollte:

Wesentliche Bestandteile

• Kopfzeile: Logo + Navigationslinks (fakultativ). Halten Sie es einfach - die meisten E-Mail-Clients entfernen komplexe Navigation. Ein zentriertes Logo mit einem oder zwei Textlinks ist der Standard.
• Heldenbanner: Bild oder Verlauf in voller Breite mit Überschrift und CTA. Erstellen Sie Varianten für verschiedene Kampagnentypen (Verkauf, Neuankunft, Redaktion).
• Produktkarte: Bild + Produktname + Preis + CTA-Button. Dies ist die Arbeitspferd-Komponente für E-Commerce-E-Mails. Erstellen Sie Varianten für 1-Spalten (Vollbreite) und 2-Spalten-Layouts.
• CTA-Button: Ihre wichtigste Komponente. Erstellen Sie Varianten für primäre (gefüllt), sekundäre (umrissen) und verschiedene Größen. Minimales Tap-Ziel: 44x44px für Mobilgeräte.
• Textblock: Überschrift + Körpertext mit automatischem Layout. Richten Sie die Typografie-Skala Ihrer Marke ein.
• Fußzeile: Soziale Links + Abmelden + physische Adresse (erforderlich von CAN-SPAM). Halten Sie es in allen E-Mails konsistent.

Mit Figma-Variablen

Mit Figma-Variablen können Sie Ihre Design-Token - Farben, Abstand, Typografie - an einem Ort definieren. Wenn Ihre Marke aktualisiert seine orange von #FF4F00 In einen etwas anderen Farbton ändern Sie die Variable einmal und jede Komponente aktualisiert sich sofort.

Für E-Mail-Vorlagen Variablen definieren für:

• Markenfarben (primär, sekundär, Akzent)
• Textfarben (Überschrift, Körper, gedämpft)
• Hintergrundfarben (primär, sekundär, Karte)
• Abstandswerte (Abschnittpolsterung, Elementlücken)
• Randradius (Tasten, Karten, Bilder)

Der Figma-to-Email Workflow

Sobald Ihr Design fertig ist, müssen Sie es in Ihre E-Mail-Plattform bringen. Es gibt zwei Hauptansätze:

Ansatz 1: Exportieren als HTML

Plugins wie Emailify können Ihr Figma-Design in HTML-Code konvertieren, den Sie direkt in den benutzerdefinierten Code-Editor von Klaviyo einfügen. Der vorteil ist live-text, der durchsuchbar, übersetzbar und zugänglich ist. Der Nachteil ist das Rendern von Inkonsistenzen - was in Figma perfekt aussieht, kann im dunklen Modus von Outlook oder im Rendern mit Fallback-Schriften brechen.

Dieser Ansatz eignet sich am besten für textlastige E-Mails (Newsletter, Bildungsinhalte, Transaktions-E-Mails), bei denen der Textinhalt wichtiger ist als pixelgenaues Design.

Ansatz 2: Exportieren als Bilder (Split und Upload)

Exportieren Sie Ihr Design als Vollbild, schneiden Sie es in horizontale Abschnitte, komprimieren Sie jeden Abschnitt und laden Sie es als Bildblöcke in Klaviyo hoch. Der Vorteil ist Pixel-perfektes Rendering in jedem E-Mail-Client einschließlich Dark Mode. Der Nachteil ist, dass Text in Bildern nicht durchsuchbar oder übersetzbar ist.

Dieser Ansatz ist das, was die meisten E-Commerce-Marken für Marketingkampagnen verwenden - Produkteinführungen, saisonale Verkäufe, Marken-Storytelling - wo visuelles Design das Engagement fördert. Für einen tiefen Tauchgang in die Bildkompression, Überprüfen Sie unseren Image Compression Guide.

Ansatz 3: Hybrid

Verwenden Sie bildbasierte Abschnitte für visuell wichtige Bereiche (Held, Produktpräsentation) und HTML-kodierte Abschnitte für dynamische Inhalte (personalisierte Produktempfehlungen, Text mit Merge-Tags). Der Editor von Klaviyo unterstützt das Mischen beider in einer einzigen E-Mail.

Häufige Figma E-Mail Design Fehler

Selbst erfahrene Designer machen diese Fehler beim Entwerfen von E-Mails in Figma:

• Design breiter als 600px: Es scheint einschränkend, aber 600px ist die maximale sichere Breite. Alles breitere wird beschnitten oder löst horizontales Scrollen in vielen E-Mail-Clients aus.
• Verwendung nicht unterstützter CSS-Funktionen: Flexbox, CSS-Raster, Positionsabsolut, Hintergrundbilder - keines davon funktioniert zuverlässig in E-Mails. Wenn Sie nach HTML exportieren, entwerfen Sie mit tabellenbasierten Layouts.
• Mobile vergessen: Über 60% der E-Mails werden mobil geöffnet. Wenn Ihr 2-Säulen-Produktraster auf schmalen Bildschirmen nicht zu einer einzigen Spalte gestapelt wird, verlieren Sie die Mehrheit Ihrer Zielgruppe.
• Übergroße Bilder: Exportieren eines Heldenbildes bei 3000px Breite, wenn es nur 1200px sein muss (600px bei 2x für Retina). Größere Exporte = größere Dateigrößen = langsameres Laden. Siehe unseren Klaviyo Bildgrößenführer für exakte Dimensionen.
• Nicht mit Komponenten: Der Neuaufbau von Buttons, Headern und Produktkarten für jede Kampagne ist eine massive Zeitverschwendung. Investieren Sie eine Stunde in den Aufbau einer Komponentenbibliothek und sie zahlt sich sofort aus.
• Prüfung im Dunkelmodus: Ihr Figma-Design zeigt immer Lichtmodus. Aber 80% + der mobilen Benutzer haben den dunklen Modus aktiviert. Testen Sie, wie Ihre E-Mail vor dem Senden rendert. Lesen Sie unseren Dark Mode E-Mail Guide für detaillierte Strategien.

Kostenlose Figma E-Mail-Vorlagen zum Einstieg

Wenn du bei Null anfängst, Figma Gemeinschaft hat ausgezeichnete kostenlose E-Mail-Vorlagensammlungen. Suchen Sie nach "E-Mail-Vorlage E-Commerce" und suchen Sie nach Sammlungen, die enthalten:

• Mehrere Kampagnentypen (Willkommen, Promotion, Transaktional)
• Komponentenbibliotheken (nicht nur Flat Designs)
• Sowohl Desktop- als auch mobile Varianten
• E-Commerce-spezifische Layouts (Produktraster, Warenkorbzusammenfassungen)

Duplizieren Sie eine Community-Datei, passen Sie die Farben und die Typografie an Ihre Marke an und Sie haben in weniger als einer Stunde ein produktionsbereites Vorlagensystem.

Häufige Fragen

Welche Breite sollte ich für E-Mail-Vorlagen in Figma verwenden?

Verwendung a 600px breiter Rahmen. Dies ist der Industriestandard, der alle E-Mail-Clients korrekt darstellt. Verwenden Sie für den Inhaltsbereich 540-560px, um eine bequeme Seitenpolsterung zu hinterlassen.

Kann ich benutzerdefinierte Schriftarten in E-Mail-Vorlagen verwenden?

Wenn Sie als HTML exportieren, funktionieren benutzerdefinierte Schriftarten nur in Apple Mail und einigen anderen Clients. Gmail und Outlook greifen auf Systemfonts wie Arial zurück. Wenn Sie die Bildbasierter Ansatz (Exportieren als Bilder), jede Schriftart wird perfekt dargestellt, da sie in die Bildpixel eingebrannt ist.

Gibt es kostenlose Figma E-Mail-Vorlagen?

Ja - die Figma Community hat Dutzende von kostenlosen Sammlungen. Suchen Sie nach "E-Mail-Vorlagen-E-Commerce" und suchen Sie nach Dateien mit Komponentenbibliotheken, nicht nur nach flachen Mockups.

Wie bekomme ich mein Figma-Design in Klaviyo?

Zwei Ansätze: (1) Exportieren als HTML mit einem Plugin und Einfügen in den Code-Editor von Klaviyo oder (2) Exportieren als Bilder, Abschnitt in Abschnitte und Hochladen als Bildblöcke. Der bildbasierte Ansatz ist schneller und macht kundenübergreifend konsistenter.

Sollte ich Mobile- und Desktop-Versionen separat entwerfen?

Für HTML-E-Mails, Design beide. Für bildbasierte E-Mails, Design bei 600px und es skaliert proportional auf dem Handy. Die meisten E-Commerce-Marken entwerfen eine 600px-Version, die sowohl auf dem Desktop als auch auf dem Handy funktioniert.