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

by Konstantin Denerz

Slide 1

Slide 1 text

Design Systems Implementa)on with Angular Material & Google's Material 3 Konstantin Denerz @kdenerz Consultant

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Components • Buttons • Form Fields • Navigation • Progress, Indicators & Notiﬁcations • Dialogs • … Material Design Systems: Implementation with Angular Material & Google's Material 3

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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 conﬁguration possible Angular Material (v16.1) Design Systems: Implementation with Angular Material & Google's Material 3

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

• 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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Material 3 • 5 Roles • Design tokens support • Angular Material provides Sass theming API Typography Design Systems: Implementation with Angular Material & Google's Material 3

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

ℹ 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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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