Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Design Systems: Implementation with Angular Mat...

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

Konstantin Denerz

June 28, 2023
Tweet

More Decks by Konstantin Denerz

Other Decks in Programming

Transcript

  1. What is new in Material 3? Our goals Design Systems:

    Implementation with Angular Material & Google's Material 3
  2. How can I use Material 3 in my Angular app?

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

    DESIGN SYSTEM Patterns, Components & Styleguide
  4. 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
  5. 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
  6. 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
  7. Components • Buttons • Form Fields • Navigation • Progress,

    Indicators & Notifications • Dialogs • … Material Design Systems: Implementation with Angular Material & Google's Material 3
  8. 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
  9. 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
  10. • 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
  11. 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
  12. 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
  13. Types Design Tokens Design Systems: Implementation with Angular Material &

    Google's Material 3 Value Reference Token System Token Component Token
  14. Design Systems: Implementation with Angular Material & Google's Material 3

    DESIGN TOKENS🍿 Project, Material 3 & Theming
  15. Material 3 • 5 Roles • Design tokens support •

    Angular Material provides Sass theming API Typography Design Systems: Implementation with Angular Material & Google's Material 3
  16. 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
  17. Design Systems: Implementation with Angular Material & Google's Material 3

    TYPOGRAPHY 🍿 Material 3 & Angular Material 16
  18. 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
  19. 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
  20. Material 3 • Personal color preferences • Dynamic Color •

    Theming • Emphasis support • Contrast checks Colors Design Systems: Implementation with Angular Material & Google's Material 3
  21. Material Theme Builder (Site & Figma Plugin) Colors Design Systems:

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

    STATES🍿 Tokens, Mixin & Sample Navigation Item
  23. Custom Content Hierarchy -> Spaces (--md-sys-size-{1-13}) Responsive Layout -> Breakpoints

    Layout Design Systems: Implementation with Angular Material & Google's Material 3
  24. 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
  25. Design Systems: Implementation with Angular Material & Google's Material 3

    CUSTOM COMPONENTS🍿 Typography, States, Colors & Layout
  26. ℹ 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
  27. Material 3 + Angular Material = 👍😊👍 Resumee Design Systems:

    Implementation with Angular Material & Google's Material 3