Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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. Design Systems
    Implementa)on with Angular Material &
    Google's Material 3
    Konstantin Denerz
    @kdenerz
    Consultant

    View Slide

  2. Konstantin Denerz
    Design Systems: Implementation with Angular Material & Google's Material 3

    View Slide

  3. What is new in Material 3?
    Our goals
    Design Systems: Implementation with Angular Material & Google's Material 3

    View Slide

  4. How can I use Material 3 in my Angular app?
    Our goals
    Design Systems: Implementation with Angular Material & Google's Material 3

    View Slide

  5. Design Systems: Implementation with Angular Material & Google's Material 3
    DESIGN SYSTEM
    Patterns, Components & Styleguide

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  10. Components
    • Buttons
    • Form Fields
    • Navigation
    • Progress, Indicators & Notifications
    • Dialogs
    • …
    Material
    Design Systems: Implementation with Angular Material & Google's Material 3

    View Slide

  11. Design Systems: Implementation with Angular Material & Google's Material 3
    ANGULAR MATERIAL

    View Slide

  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

    View Slide

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

    View Slide

  14. Design Systems: Implementation with Angular Material & Google's Material 3
    DEMO USE CASE

    View Slide

  15. Demo Use Case
    Design Systems: Implementation with Angular Material & Google's Material 3

    View Slide

  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

    View Slide

  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

    View Slide

  18. Design Systems: Implementation with Angular Material & Google's Material 3
    DESIGN TOKENS

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  23. Design Systems: Implementation with Angular Material & Google's Material 3
    DESIGN TOKENS🍿
    Project, Material 3 & Theming

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  27. Design Systems: Implementation with Angular Material & Google's Material 3
    TYPOGRAPHY 🍿
    Material 3 & Angular Material 16

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  32. Material 3
    • Personal color preferences
    • Dynamic Color
    • Theming
    • Emphasis support
    • Contrast checks
    Colors
    Design Systems: Implementation with Angular Material & Google's Material 3

    View Slide

  33. Material Theme Builder (Site & Figma Plugin)
    Colors
    Design Systems: Implementation with Angular Material & Google's Material 3

    View Slide

  34. Design Systems: Implementation with Angular Material & Google's Material 3
    COLORS🍿
    Ref & Sys Tokens, Material Theming

    View Slide

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

    View Slide

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

    View Slide

  37. Design Systems: Implementation with Angular Material & Google's Material 3
    STATES🍿
    Tokens, Mixin & Sample Navigation Item

    View Slide

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

    View Slide

  39. Custom
    Content Hierarchy -> Spaces (--md-sys-size-{1-13})
    Responsive Layout -> Breakpoints
    Layout
    Design Systems: Implementation with Angular Material & Google's Material 3

    View Slide

  40. Design Systems: Implementation with Angular Material & Google's Material 3
    LAYOUT🍿
    Sizes & Breakpoints

    View Slide

  41. Design Systems: Implementation with Angular Material & Google's Material 3
    CUSTOM COMPONENT

    View Slide

  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

    View Slide

  43. Design Systems: Implementation with Angular Material & Google's Material 3
    CUSTOM COMPONENTS🍿
    Typography, States, Colors & Layout

    View Slide

  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

    View Slide

  45. Material 3 + Angular Material = 👍😊👍
    Resumee
    Design Systems: Implementation with Angular Material & Google's Material 3

    View Slide

  46. Design Systems: Implementation with Angular Material & Google's Material 3
    Thanks for your attention!
    ttlink.click/ux-ui

    View Slide