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. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Sascha Lehmann Consultant @ Thinktecture AG  @derLehmann_S  https://www.linkedin.com/in/sascha-lehmann  sascha.lehmann@thinktecture.com  https://www.thinktecture.com/thinktects/sascha-lehmann/
3. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Repo https://github.com/thinktecture-labs/systematisch-schoen-angular-days-fall-2025
4. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Design Systems
5. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Warum überhaupt? Schon einmal probiert ein Haus ohne Bauplan zu bauen?
6. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Was ist ein Designsystem? • Eine Sammlung von Erfahrungswerten (Do’s & Don’ts) • Patterns, Komponenten und Richtlinien die für Konsistenz sorgen • Single Source of Truth für Teams • Bildet eine einheitliche Designsprache
7. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Was sind die Ziele • 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)
8. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Aus was besteht ein Designsystem? Tokens Typography Display md.sys.color.primary Colors Elevations Primary 0dp Headline md.sys.typescale.display-s Title Body Layout Gaps enabled Margins md.sys.color.on-primary md.sys.typescale.display-l States Secondary 1dp disabled Paddings Border-Radius Tertiary 2dp Background 3dp Motion Design
9. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Which ones do exist?
10. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Design Tokens
11. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Was sind Design Tokens?
12. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Was sind Design Tokens? • Sie sind die (Lego-) Bausteine des Designs • Beinhalten wiederverwendbare Style-Properties • Farben, Abstände, Typography, Timings • Verbessern das Management und die Skalierbarkeit von Designsystems • Bei der Umsetzung / Design müssen keine Vermutungen aufgestellt werden
13. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Aufbau von Tokens Jedes Token beinhaltet eine bestimmte Information Token Value blue/400 #00B0F0 spacing-3 16 rem font Arial
14. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Aufbau von Tokens Nutzung von Tokens Token Value blue/400 #00B0F0 Button
15. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Aufbau von Tokens Tokens mit Bedeutung versehen  User Button  Card Token Value blue/400 #00B0F0
16. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Aufbau von Tokens Tokens mit Bedeutung versehen  User Button  Card Token Value blue/400 #00E5F0
17. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Aufbau von Tokens Tokens mit Bedeutung versehen  User Button  Token Value blue/400 #00B0F0 blue/100 # 00E5F0 Card
18. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Aufbau von Tokens Tokens mit Bedeutung versehen Container  Button Component Token Semantic Token button/primary color/primary Primitive Token Value blue/400 #00B0F0
19. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Aufbau von Tokens Button Component Token Semantic Token button/primary color/primary Primitive Token Value blue/400 #00B0F0  • Primitive Tokens: • Welche Properties und Werte existieren im gesamten System • Werden ausschließlich von anderen Tokens referenziert und nicht direkt 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. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Material Design 3 als Token-Architektur Drei Ebenen, dasselbe Prinzip wie unsere Tiers M3-Ebene Beispiel Unser Tier Reference md.ref.palette.primary40 Primitive Token (blue/400) System md.sys.color.primary, md.sys.typescale.body-large Semantic Token (color/primary) Component md.comp.filled-button.container-color Component Token (button/primary) • Jeder Wert hat eine Rolle (primary, on-primary, surface, on-surface), nicht nur eine Farbe • Light und Dark sind Varianten der System-Ebene, die Component-Ebene bleibt unverändert • Angular Material 3 nutzt dieselbe Struktur als --mat-sys-*, dazu später mehr
21. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Von der Seed Color zum Farbschema Material Design 3: Tonal Palettes primary (Dark) 0 10 20 30 40 primary (Light) 50 60 70 80 90 95 99 100 • Eine Markenfarbe (Seed) erzeugt fünf Tonal Palettes: primary, secondary, tertiary, neutral, neutral-variant • Jede Palette hat 13 Tonstufen (0–100); Rollen greifen auf feste Stufen zu: primary = Stufe 40 im Light-, Stufe 80 im Dark-Theme • Kontrast ist eingebaut: on-primary liegt immer 60 Stufen von primary entfernt • Werkzeuge: Material Theme Builder (Figma-Plugin), @material/material-color-utilities (npm), ng generate @angular/material:theme-color • Hands-on-Idee: Palette aus einer eigenen Farbe erzeugen und als Primitive Tokens exportieren
22. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Tokens in Figma
23. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Figma Variables oder Tokens Studio? Zwei Wege, Tokens in Figma zu verwalten Figma Variables Tokens Studio (Plugin) Herkunft nativ in Figma, seit 2023 Community-Plugin, Free- und Pro-Version Token-Typen Color, Number, String, Boolean alle DTCG-Typen, auch Typography, Shadow, Composition Themes Modes pro Collection, Anzahl je nach Plan begrenzt beliebig viele Sets und Themes Weg ins Repo REST API nur im Enterprise-Plan, sonst Plugins direkter Sync zu GitHub, GitLab, Azure DevOps, Bitbucket Format eigenes JSON eigenes JSON, per sd-transforms DTCG-kompatibel • Im Workshop: Tokens Studio, weil der Weg ins Repo ohne Enterprise-Plan funktioniert • Beides lässt sich kombinieren: Tokens Studio kann Variables exportieren und importieren
24. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Tokens Studio: Sets, Themes und Sync Der Weg von Figma ins Repo Figma Tokens Studio Git-Repo Style Dictionary CSS Angular tokens/*.json Build Custom Properties Komponenten • Token Sets: eine JSON-Datei pro Set, z. B. global, semantic-light, semantic-dark, components • Themes kombinieren Sets und legen fest, welches Set aktiv ist ($themes.json) • Referenzen mit {color.blue.400} werden beim Export aufgelöst oder als var() erhalten • Sync: Push und Pull gegen einen Branch; jede Änderung wird ein Commit, Review per Pull Request • Stolperstein: Tokens Studio schreibt eigenes JSON, Style Dictionary v4 erwartet DTCG ($value, $type) → @tokens-studio/sd-transforms übersetzt
25. Beispielanwendung animieren HANDS-ON
26. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Style Dictionary • 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)
27. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Design Tokens Community Group Format • 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
28. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Ausgabe als CSS Custom Properties Was am Ende aus Style Dictionary herausfällt // build/css/tokens.css :root { --color-blue-400: #00b0f0; --color-blue-100: #00e5f0; --spacing-3: 1rem; } • Eine Datei pro Plattform und Theme: tokens.css, tokens-dark.css • outputReferences: true behält die Kette Primitive → Semantic → Component als var() bei --color-primary: var(--color-blue-400); --color-on-primary: #ffffff; • Ohne Referenzen werden Werte aufgelöst: weniger CSS, aber kein Theming zur Laufzeit --button-primary-background: var(--color-primary); --button-primary-padding: var(--spacing-3); • Namen entstehen aus dem Pfad: color.blue.400 → --color-blue-400 • Custom Properties kaskadieren: ein Override auf einem Element wirkt auf den ganzen Teilbaum
29. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Warum SCSS und nicht nur CSS? • Modulare Architektur 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
30. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Theming-Techniken in CSS Sechs Werkzeuge, die zusammenspielen data-theme-Attribut prefers-color-scheme color-scheme + light-dark() [data-theme="dark"] { --colorprimary: … } @media (prefers-color-scheme: dark) { … } --color-bg: light-dark(#fff, #111); Explizit und per JS schaltbar. Mehrere Brands und Themes nebeneinander möglich. Folgt dem Betriebssystem. Ohne JS kein Opt-out für den Nutzer. Ein Token, zwei Werte, der Browser wählt. Baseline seit 2024. @property @layer Teilbaum-Theming @property --color-primary { syntax: "<color>"; … } @layer tokens, components, app; <section data-theme="dark"> Schichten statt Spezifitätskampf: AppStyles gewinnen immer, ohne !important. Tokens auf einem Element überschreiben wirkt nur darunter: dunkle Karte auf heller Seite. Typisierte Custom Properties: animierbar, mit Fallback bei ungültigen Werten.
31. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Theme-Switch ohne Service color-scheme am Root reicht /* tokens.css */ :root { color-scheme: light dark; --color-surface: light-dark(#fff, #1c1b1f); --color-on-surface: light-dark(#1c1b1f, #eee); --color-primary: light-dark(#0061a4, #9ecaff); } • Kein Theme-Service, kein Signal, kein effect() nötig • Default ist das System-Theme, der Switch ist ein Override • Browser passt native UI mit an: Scrollbars, <select>, Formularfelder • Teilbaum: color-scheme: dark auf einem Container dreht nur diesen Bereich // Umschalten: eine Zeile document.documentElement.style .colorScheme = 'dark'; // oder 'light' • Grenze: light-dark() kennt nur zwei Werte. Brands oder High-Contrast weiter per data-theme // zurück zur Systemeinstellung document.documentElement.style.colorScheme = ''; • Persistenz: localStorage per InlineScript vor dem ersten Frame lesen
32. Pause
33. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Tokens in Angular
34. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Tokens und View Encapsulation Custom Properties gehen durch jede Kapselung /* styles.css (global) */ @import 'tokens/tokens.css'; /* button.component.css (Emulated) */ :host { display: inline-flex; background: var(--button-primary-background); padding: var(--button-primary-padding); } :host([variant='outlined']) { background: transparent; border: 1px solid var(--color-primary); } • Encapsulation kapselt Selektoren, nicht Werte: Custom Properties vererben sich über Shadow-Grenzen • Tokens einmal global laden, Komponenten lesen sie per var() • Die Komponente definiert keine Farben, nur welche Token-Rolle sie nutzt • :host ist die Grenze: hier Component Tokens auf Semantic Tokens mappen • Varianten als Attribute statt Klassen, dann läuft dasselbe CSS auch als Web Component
35. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Themenfähige Komponente mit Signals Varianten als Attribute, Styles als Tokens @Component({ selector: 'ds-button', template: `<ng-content />`, styleUrl: './button.component.css', host: { '[attr.variant]': 'variant()', '[attr.size]': 'size()', '[class.is-loading]': 'loading()', }, }) export class ButtonComponent { variant = input<ButtonVariant>('filled'); size = input<'s' | 'm' | 'l'>('m'); loading = input<boolean>(false); } • input() statt @Input: typsicher, readonly, kein ngOnChanges • Host-Bindings schreiben Attribute, das CSS reagiert mit :host([variant]) • Kein Styling-Code in TypeScript: die Komponente kennt nur Rollen, nie Farben • computed() nur, wenn eine Variante von mehreren Inputs abhängt • Content Projection statt label-Input: Icons, Text, alles möglich
36. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Angular Material 3 an eigene Tokens anbinden System-Variablen aus mat.theme() überschreiben // styles.scss @use '@angular/material' as mat; html { color-scheme: light dark; @include mat.theme(( color: mat.$azure-palette, typography: Roboto, density: 0, )); /* eigene Tokens gewinnen */ --mat-sys-primary: var(--color-primary); --mat-sys-on-primary: var(--color-on-primary); --mat-sys-surface: var(--color-surface); } • Seit Angular 19: mat.theme() schreibt alle Werte als --mat-sys-* • Namen folgen Material Design 3: md.sys.color.primary wird --matsys-primary • Eigene Tokens darauf mappen: Material und eigene Komponenten teilen eine Quelle • Light/Dark läuft über color-scheme, kein zweites Theme nötig • Feinjustierung pro Komponente: mat.button-overrides(...)
37. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Storybook
38. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Storybook für die Komponentenbibliothek Jede Variante sichtbar, dokumentiert und testbar // button.stories.ts const meta: Meta<ButtonComponent> = { title: 'Components/Button', component: ButtonComponent, tags: ['autodocs'], argTypes: { variant: { control: 'select', options: ['filled', 'outlined', 'text'] } }, render: (args) => ({ props: args, template: `<ds-button [variant]="variant" />` }), }; export default meta; export const Filled: StoryObj = { args: { variant: 'filled' } }; export const Outlined: StoryObj = { args: { variant: 'outlined' } }; • Setup: npx storybook@latest init erkennt Angular • Tokens einmal in preview.ts laden, dann sehen alle Stories das echte Theme • Autodocs erzeugt die Doku-Seite aus Inputs und JSDoc • Controls machen jede Variante klickbar: ideal für die Review mit Design • Stories sind der Vertrag: eine pro Variante und Zustand
39. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Theme-Toolbar und Token-Doku in Storybook Light, Dark und Brand per Klick umschalten // .storybook/preview.ts import '../src/tokens/tokens.css'; • Globals erzeugen den Toolbar-Eintrag, der Decorator setzt das Attribut: jede Story im gewählten Theme export const globalTypes = { theme: { toolbar: { icon: 'paintbrush', items: ['light', 'dark', 'brand-b'] } }, }; • Token-Übersicht: storybook-designtoken liest tokens.css und rendert Farb- und Spacing-Tabellen export const decorators = [ (story, { globals }) => { document.documentElement .setAttribute('data-theme', globals.theme); return story(); }, ]; • addon-a11y prüft Kontraste pro Story und Theme • Ausblick: Visual Regression (Chromatic, Playwright), eine Baseline pro Theme
40. Beispielanwendung animieren HANDS-ON
41. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Web Components
42. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Kein eigener Web-Standard… … aber basierend auf Web Standards Custom Elements Shadow DOM ES Modules HTML Templates
43. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Custom Elements So werden sie definiert
44. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Shadow DOM Shadow DOM document node Shadow Root Shadow Host node node node node node
45. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Vanilla oder Library?
46. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Libraries Frameworks
47. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Komponenten schneiden Architektur
48. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Ein naiver erster Wurf … Input Element Verwendung
49. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Ein naiver erster Wurf … Vorteile • Properties können „straight forward“ übergeben werden • Styling ist vollständig durch Shadow-DOM gekapselt • Einfache Verwendung der Komponente
50. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Ein naiver erster Wurf … Nachteile • 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
51. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Ein zweiter Anlauf … Nutze die Power von Slotting / Contentprojection Verwendung
52. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Ein zweiter Anlauf … Vorteile • Die ”nativen” HTML Elemente bleiben im Light-DOM ✓ Default Verhalten bleibt erhalten ✓ Barrierefreiheit kann gewährleistet werden ✓ Keine Wrapper für Frameworks nötig • Höhere Flexibilität der Komponente ✓ Keine ”Input-Hell” ✓ Einfachere Erweiterbarkeit ✓ Komponente gibt die Struktur vor
53. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Ein zweiter Anlauf … Nachteile • Erhöht die „Komplexität“ der Komponente Aufgrund von verteiltem Content • “Slotted“ Elements werden im Context des „Hosts“ gestyled und verbleiben im Light-DOM
54. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Web Component für native Forms registrieren
55. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Empfehlung • 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.
56. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Tokens als Package Sobald mehr als ein Team die Tokens nutzt Eigenes npm-Package SemVer für Tokens $deprecated statt löschen @firma/design-tokens mit tokens.css, tokens.scss und tokens.json. Apps pinnen eine Version, kein Überraschungs-Update. Neues Token: minor. Wert geändert: patch. Token umbenannt oder entfernt: major, mit Alias als Übergang. DTCG erlaubt "$deprecated": "Nutze color.primary". Build warnt, Figma zeigt es an, Teams haben Zeit zum Umstellen. Review im Pull Request Kontrast automatisch prüfen Wer besitzt die Tokens? Jeder Token-Push aus Figma ist ein PR. Diff zeigt, was sich ändert, Storybook-Preview zeigt, wie es aussieht. Ein Script über alle Semantic-Paare (primary / on-primary) gegen WCAG AA. Schlägt fehl, bevor es in die App kommt. Primitive und Semantic: Design. Component: Entwicklung. Beides in einem Repo, damit die Historie zusammenbleibt.
57. Systematisch schön Mit Design Tokens & Angular auf dem Weg zum skalierbaren Designsystem Diskussion Stolpersteine, Alternativen und eure Projekte 1 2 3 Wer pflegt die Tokens bei euch: Design, Entwicklung oder beide? Und wer entscheidet bei Konflikten? Figma Variables oder Tokens Studio? Was spricht in eurem Setup für das eine oder andere? Wie viele Token-Ebenen braucht ein Projekt wirklich? Reichen Primitive und Semantic? 4 5 6 Bestehende App mit hartcodierten Farben: wie migriert man schrittweise auf Tokens? Eigene Komponentenbibliothek oder Angular Material themen? Wo liegt die Grenze? Was hat euch bei der Umsetzung heute am meisten überrascht oder gestört?
58. Dankeschön! Sascha Lehmann sascha.lehmann@thinktecture.com