HFG Newsletter
Design System
A token-based, scalable newsletter system that lets the team build fast, consistent newsletters without starting from scratch every time.
Starting Point
The Problem
Newsletters were built manually with no consistent structure. Every new issue started from zero, spacing was inconsistent, colours were set by hand, and animations were missing entirely. This cost time and produced inconsistent results.
Solution 01
Token-Based
Architecture
The system was built from the ground up following Atomic Design. Design tokens form the foundation: colour, spacing and typography are defined as Figma variables and flow automatically into every component.
Changing a token updates the entire system. No manual searching, no forgotten elements.
Solution 02
Newsletter Toolkit
mit Figma Slots
Using Figma's new Slots feature, a modular toolkit was built. The team assembles newsletters like building blocks: components are dropped into slots, adapt automatically, and always stay within the system.
The result: consistent newsletters can be built independently, even without design experience.
Solution 03
Animations with
Jitter
I introduced Jitter to the team as an animation tool. Through the Figma plugin, elements can be animated directly in the design, exported as GIFs, and embedded into the newsletter.
The workflow is fully integrated into Figma: no switching between tools, no export chaos.
Result
What changed.
The team can build consistent newsletters independently without requesting design support. The system is actively in use and continuously evolving.
The Jitter integration also raised the visual quality of the newsletters. Animated elements are now the standard, not the exception.