HFG Newsletter
Design System
Ein tokenbasiertes, skalierbares Newsletter-System das dem Team schnelles, konsistentes Erstellen ermöglicht, ohne jedes Mal bei null anzufangen.
Ausgangslage
Das Problem
Newsletter wurden manuell und ohne einheitliche Struktur gebaut. Jede neue Ausgabe startete von vorne, Abstände stimmten nicht überein, Farben wurden händisch gesetzt und Animationen fehlten komplett. Das kostete Zeit und produzierte inkonsistente Ergebnisse.
Lösung 01
Token-basierte
Architektur
Das System wurde von Grund auf nach Atomic Design aufgebaut. Design Tokens bilden die Basis: Farben, Abstände und Typografie sind als Variables in Figma definiert und fliessen automatisch in alle Komponenten ein.
Eine Änderung am Token aktualisiert das gesamte System. Keine manuelle Suche, keine vergessenen Elemente.
Lösung 02
Newsletter Baukasten
mit Figma Slots
Mit der neuen Figma Slots-Funktion wurde ein modularer Baukasten entwickelt. Das Team setzt Newsletter wie Bauklötze zusammen: Komponenten werden per Slot eingesetzt, passen sich automatisch an und bleiben immer im System.
Das Ergebnis: Auch ohne Designkenntnisse können konsistente Newsletter eigenständig gebaut werden.
Lösung 03
Animationen mit
Jitter
Ich habe Jitter als Animations-Tool ins Team eingeführt. Über das Figma-Plugin können Elemente direkt im Design animiert, als GIF exportiert und in den Newsletter eingebettet werden.
Der Workflow ist vollständig in Figma integriert: kein Wechsel zwischen Tools, kein Export-Chaos.
Ergebnis
Was sich verändert hat.
Das Team kann eigenständig konsistente Newsletter erstellen ohne Designunterstützung anzufragen. Das System ist produktiv im Einsatz und wird kontinuierlich weiterentwickelt.
Durch die Jitter-Integration hat sich auch die visuelle Qualität der Newsletter erhöht. Animierte Elemente sind jetzt Standard, nicht Ausnahme.