Design Systems: Implementation with Angular Material & Google's Material 3

Transcript

1. Design Systems Implementa)on with Angular Material & Google's Material 3 Konstantin Denerz @kdenerz Consultant
2. Konstantin Denerz Design Systems: Implementation with Angular Material & Google's Material 3
3. What is new in Material 3? Our goals Design Systems: Implementation with Angular Material & Google's Material 3
4. How can I use Material 3 in my Angular app? Our goals Design Systems: Implementation with Angular Material & Google's Material 3
5. Design Systems: Implementation with Angular Material & Google's Material 3 DESIGN SYSTEM Patterns, Components & Styleguide
6. Design Systems: Implementation with Angular Material & Google's Material 3 Lack of design system Results in • Inconsistency • No cohesive UX • Lack of shared communication foundation between product management, design & development • More complexity during development
7. Design Systems: Implementation with Angular Material & Google's Material 3 MATERIAL
8. https://material.io • Google’s Design System (since 2014) • v3 is the latest version • Millions of users • Figma design kit available • Already implemented on different platforms Goal: Use Material 3 for design & development Material Design Systems: Implementation with Angular Material & Google's Material 3
9. t Tokens Foundation Material t Typography t Colors t Elevations t States Layout Motion Design (Animations) Design Systems: Implementation with Angular Material & Google's Material 3
10. Components • Buttons • Form Fields • Navigation • Progress, Indicators & Notifications • Dialogs • … Material Design Systems: Implementation with Angular Material & Google's Material 3
11. Design Systems: Implementation with Angular Material & Google's Material 3 ANGULAR MATERIAL
12. https://material.angular.io/ • UI framework for Angular • Supports Material 2 • MDC Web under the hood • Expected Material 3 support later this year • theming API (colors, typography, density) • => Partial Material 3 style configuration possible Angular Material (v16.1) Design Systems: Implementation with Angular Material & Google's Material 3
13. Overview Design Systems: Implementation with Angular Material & Google's Material 3
14. Design Systems: Implementation with Angular Material & Google's Material 3 DEMO USE CASE
15. Demo Use Case Design Systems: Implementation with Angular Material & Google's Material 3
16. Rem (root ephemeral) • User preferences support • Relative to :root’s font-size :root { font-size: 100% } // 16px .layout { padding: 2rem } // 32px • Figma support Pixel • Fixed, absolute • Used in calculations (JS / TS) Rem vs Px Design Systems: Implementation with Angular Material & Google's Material 3
17. • Angular Material provides Sass theming API • Are different • ✅ Sass Nesting Sass Nesting vs CSS Nesting Design Systems: Implementation with Angular Material & Google's Material 3 transpilation
18. Design Systems: Implementation with Angular Material & Google's Material 3 DESIGN TOKENS
19. parameters, interface between design & development Design Tokens Design Systems: Implementation with Angular Material & Google's Material 3 tokens.json tokens.css Web Application(s) Tools Figma Variables
20. Structure (material.io) Design Tokens Design Systems: Implementation with Angular Material & Google's Material 3 Design Token CSS (Variable) a) Material Design (name) b) Type (reference, system, component) c) Design attribute d) Token’s purpose
21. Types Design Tokens Design Systems: Implementation with Angular Material & Google's Material 3 Value Reference Token System Token Component Token
22. Theming Design Tokens Design Systems: Implementation with Angular Material & Google's Material 3
23. Design Systems: Implementation with Angular Material & Google's Material 3 DESIGN TOKENS🍿 Project, Material 3 & Theming
24. Design Systems: Implementation with Angular Material & Google's Material 3 TYPOGRAPHY
25. Material 3 • 5 Roles • Design tokens support • Angular Material provides Sass theming API Typography Design Systems: Implementation with Angular Material & Google's Material 3
26. Mapping Material 3 Display large Display medium Display small Headline large Headline medium Headline small Title large Title small Label large Body large Body medium Body small Material 2 Headline 1 Headline 2 Headline 3 Headline 4 Headline 5 Headline 6 Subtitle 1 Subtitle 2 Button Body 1 Body 2 Caption Typography Design Systems: Implementation with Angular Material & Google's Material 3
27. Design Systems: Implementation with Angular Material & Google's Material 3 TYPOGRAPHY 🍿 Material 3 & Angular Material 16
28. Design Systems: Implementation with Angular Material & Google's Material 3 ELEVATIONS
29. Material 2 vs Material 3 • Shadows • 25 levels (0dp to 24dp) • Highlighting (Dark theme) • Colors • 6 levels (0 to 12dp) • No shadows Elevation Design Systems: Implementation with Angular Material & Google's Material 3
30. Angular Material • Only Material 2 support • SASS mixins • CSS classes (mat-elevation-z#), # = 0 to 24 • No design tokens Elevation Design Systems: Implementation with Angular Material & Google's Material 3
31. Design Systems: Implementation with Angular Material & Google's Material 3 COLORS
32. Material 3 • Personal color preferences • Dynamic Color • Theming • Emphasis support • Contrast checks Colors Design Systems: Implementation with Angular Material & Google's Material 3
33. Material Theme Builder (Site & Figma Plugin) Colors Design Systems: Implementation with Angular Material & Google's Material 3
34. Design Systems: Implementation with Angular Material & Google's Material 3 COLORS🍿 Ref & Sys Tokens, Material Theming
35. Design Systems: Implementation with Angular Material & Google's Material 3 STATES
36. Material 3 States Design Systems: Implementation with Angular Material & Google's Material 3
37. Design Systems: Implementation with Angular Material & Google's Material 3 STATES🍿 Tokens, Mixin & Sample Navigation Item
38. Design Systems: Implementation with Angular Material & Google's Material 3 LAYOUT
39. Custom Content Hierarchy -> Spaces (--md-sys-size-{1-13}) Responsive Layout -> Breakpoints Layout Design Systems: Implementation with Angular Material & Google's Material 3
40. Design Systems: Implementation with Angular Material & Google's Material 3 LAYOUT🍿 Sizes & Breakpoints
41. Design Systems: Implementation with Angular Material & Google's Material 3 CUSTOM COMPONENT
42. Preview Card and Active Project Card • Dark & Light Theme • Colors, States & Typography • Sizes, Elevation Custom Components Design Systems: Implementation with Angular Material & Google's Material 3
43. Design Systems: Implementation with Angular Material & Google's Material 3 CUSTOM COMPONENTS🍿 Typography, States, Colors & Layout
44. ℹ Angular Material: Design token support is in development ✅ Material 3 - Colors & Theming ✅ Material 3 - Typography ✅ Material 2 - Elevation ✅ Material 3 - States ✅ Custom - Breakpoints & Relative Sizes Key Findings Design Systems: Implementation with Angular Material & Google's Material 3
45. Material 3 + Angular Material = 👍😊👍 Resumee Design Systems: Implementation with Angular Material & Google's Material 3
46. Design Systems: Implementation with Angular Material & Google's Material 3 Thanks for your attention! ttlink.click/ux-ui