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 wir 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.

Inhalt:

Einführung in Design Tokens & Material Design 3
Tokens in Figma verwalten (Tokens Studio Plugin)
Export & Transformation via Style Dictionary
Ausgabe als CSS Custom Properties
Hands-on: Eigene Token-Dateien anlegen und in CSS übersetzen
Diskussion: Herausforderungen, Tools & Best Practices
Einbindung der Tokens in Angular-Styling
Erstellung themenfähiger Komponenten mit Standalone API & Signals
Aufbau einer UI-Bibliothek mit Token-basiertem Theming
Integration von Storybook zur Dokumentation & Vorschau
Live-Demo: Theme-Switching, Variablen live ändern
Austausch zu Stolpersteinen, Alternativen und Projektintegration

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. 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
4. Design Systems Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem
5. Schon einmal probiert ein Haus ohne Bauplan zu bauen? Warum überhaupt? Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem
6. • 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
7. • 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
8. 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
9. Which ones do exist? Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem
10. 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
12. 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
13. 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
14. 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
15. 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
16. 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
17. 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
18. 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
19. 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
20. Beispielanwendung animieren HANDS-ON
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. Web Components Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
26. … aber basierend auf Web Standards Kein eigener Web-Standard… Custom Elements ES Modules Shadow DOM HTML Templates Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
27. So werden sie definiert Custom Elements Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
28. document node node node Shadow Host Shadow DOM Shadow Root node node node Shadow DOM Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
29. Vanilla oder Library? Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
30. Frameworks Libraries Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
31. Komponenten schneiden Architektur Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Componentss
32. Input Element Ein naiver erster Wurf … Verwendung Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
33. Vorteile Ein naiver erster Wurf … • Properties können „straight forward“ übrgeben werden • Styling ist vollständig durch Shadow-DOM gekapselt • Einfache Verwendung der Komponente Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
34. Nachteile Ein naiver erster Wurf … • Wir ”verstecken” bzw. kapseln alles in der Komponente • Soll die komponente später erweitert werden wächst auch die Anzahl der „Input-Parameter“ → Input-Hell • Bei Elementen die im Formular-Kontext verwendet werden sollen → Frameworks und native Forms erkennen die Komponente nicht automatisch als Formular-Element Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
35. Nutze die Power von Slotting / Contentprojection Ein zweiter Anlauf … Verwendung Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
36. Vorteile Ein zweiter Anlauf … • Die ”nativen” HTML Elemente bleiben im Light-DOM ✓ Default Verhalten bleibt erhalten ✓ Barrerefreiheit kann gewärleistet werden ✓ Keine Wrapper für Frameworks nötig • Höhere Flexibilität der Komponente ✓ Keine ”Input-Hell” ✓ Einfachere Erweiterbarkeit ✓ Komponente gibt die Struktur vor Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
37. Nachteile Ein zweiter Anlauf … • Erhört die „Komplexität“ der Komponente Aufgrund von verteiltem Content • “Slotted“ Elements weden im Context des „Hosts“ gestyled und verbleiben im Light-DOM Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
38. Web Component für native Forms registrieren Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
39. • Property-Driven-Ansatz eignet sich ideal für Kleine, leichtgewichtige Komponenten, bei denen nur das “Verhalten” beeinflussen • Content-Driven-Ansatz eignet sich für Komponenten die auf eine flexible Komposition von ”Content” angewiesen sind. Oder für Komponenten die in einem Form-Context eingesetzt werden → Bspw. Layouts, Container, Cards etc. Empfehlung Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
40. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön!
41. Beispielanwendung animieren HANDS-ON