Systematisch schön: Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem

Designsysteme entfalten ihre volle Wirkung erst dann, wenn Design und Code nahtlos zusammenspielen. In diesem Workshop zeigt Sascha Lehmann, Consultant bei der Thinktecture AG, wie sich Design Tokens aus Figma effizient in Angular-Projekte integrieren lassen.

In diesem Hands-On Workshop bauen Sie gemeinsam eine themenfähige Komponentenbibliothek, die auf modernen Angular-Prinzipien wie Standalone Components und Signals basiert. Tools wie Style Dictionary und Storybook helfen dabei, Tokens nicht nur technisch nutzbar zu machen, sondern auch dokumentier- und testbar.

Transcript

1. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Sascha Lehmann @derLehmann_S Consultant
2. Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S https://www.linkedin.com/in/sascha-lehmann sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/     Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem
3. Design Systems Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem
4. Schon einmal probiert ein Haus ohne Bauplan zu bauen? Warum überhaupt? Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem
5. • Eine Sammlung von Erfahrungswerten (Do’s & Don’ts) • Patterns, Komponenten und Richtlienien die für Konsistenz sorgen • Single Source of Truth für Teams • Bildet eine einheitliche Designsprache Was ist ein Designsystem? Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem
6. • Visuelle Konsistenz von einer oder mehreren Anwendungen • Eine Einheitliche Gesprächsbasis für Product Owner, Marketing , Design und Entwicklung sein • Bildet eine Schnittstelle zwischen Design & Entwicklung • Einfachere und schnellere Umsetzung von neuen Features (Diskussionen müssen nicht jedesmal neu geführt werden) Was sind die Ziele Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem
7. Aus was besteht ein Designsystem? Tokens md.sys.color.primary md.sys.color.on-primary md.sys.typescale.display-l md.sys.typescale.display-s Typography Display Headline Title Body Colors Primary Secondary Tertiary Background Elevations 0dp 1dp 2dp 3dp States enabled disabled Layout Gaps Margins Paddings Border-Radius Motion Design Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem
8. Which ones do exist? Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem
9. Design Tokens Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem
10. Was sind Design Tokens? Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem
11. Was sind Design Tokens? Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem • Sie sind die (Lego-) Bausteine des Designs • Beinhalten wiederverwendbare Style-Properties • Farben, Abstände, Typography, Timings • Verbssern das Management und die Skalierbarkeit von Designsystems • Bei der Umsetzung / Design müssen keine Vermutungen aufgestellt werden
12. Jedes Token beinhaltet eine bestimmte Information Aufbau von Tokens Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Token Value #00B0F0 blue/400 spacing-3 16 rem font Arial
13. Nutzung von Tokens Aufbau von Tokens Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Token Value #00B0F0 blue/400 Button
14. Tokens mit Bedeutung versehen Aufbau von Tokens Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Token Value #00B0F0 blue/400 Button User   Card
15. Tokens mit Bedeutung versehen Aufbau von Tokens Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Token Value #00E5F0 blue/400 Button User   Card
16. Tokens mit Bedeutung versehen Aufbau von Tokens Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Token Value #00B0F0 blue/400 Button User   Card # 00E5F0 blue/100
17. Tokens mit Bedeutung versehen Aufbau von Tokens Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Primitive Token Value #00B0F0 blue/400 Button Container  Semantic Token color/primary Component Token button/primary
18. Aufbau von Tokens Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Primitive Token Value #00B0F0 blue/400 Button  Semantic Token color/primary Component Token button/primary • Primitive Tokens: • Welche Properties und Werte existieren im gesamten System • Werden ausschlileßlich von anderen Tokens referenziert und nicht direct verwendet • Semantic Tokens: • Geben den Kontext (Was? Warum? Wie? Wo?) das Token im Designsystem verwendet werden soll • Component Tokens: • Noch spezifischere Angaben zum Verwendungskontext • Bsp. button-primary-background-default, button-primary-background-hover
19. Beispielanwendung animieren HANDS-ON
20. Repo Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem https://github.com/thinktecture-labs/systematisch-schoen-angular-days-fall-2025
21. Style Dictionary Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem • Open-Source Tool zum Design-Token-Export • Unterstützt verschiedenste Plattformen • Web • IOS • Android • Etc. • Tokens müssen dazu im DTCG (Design Tokens Community Group) Format vorliegen (erst Seit Version 4)
22. Design Tokens Community Group Format Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem • Eine technische Spezifikation zur standardisierten Dateiform für den Austausch von Design Tokens zwischen Tools • token = Name + Wert ($value) Plus optionale Properties ($type, $description, $extensions, $deprecated
23. Warum SCSS und nicht nur CSS? Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem • Modulare Architectur durch @use • Die Verwendung von Mixins bietet Vorteile in Bezug auf Wiederverwendbarkeit, Wartbarkeit und Konsistenz • Mit Mixins können auch dynamische Styles erzeugt werden die sich je nach Parametrisierung anders verhalten
24. Pause
25. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön!
26. Beispielanwendung animieren HANDS-ON