Tweet
Tweet

Slide 1

Slide 1 text

© 2023 Wantedly, Inc. デザインシステムの Compose実装 モバイル勉強会 #10 2023/08/01 久保出雅俊

Slide 2

Slide 2 text

© 2023 Wantedly, Inc.

Slide 3

Slide 3 text

© 2023 Wantedly, Inc. デザインシステムは UIに関わる人の共通言語

Slide 4

Slide 4 text

© 2023 Wantedly, Inc. Agenda Wantedlyでの取り組みの紹介 ● デザインシステムとは ● Compose実装

Slide 5

Slide 5 text

© 2023 Wantedly, Inc. デザインシステムとは

Slide 6

Slide 6 text

© 2023 Wantedly, Inc. デザインシステム デザインの一貫性を保つ仕組み

Slide 7

Slide 7 text

© 2023 Wantedly, Inc. デザインシステム ユーザー視点： Web, iOS, Androidどれを使っても 同じプロダクトと認識 開発視点： デザイナーとエンジニアの共通認識

Slide 8

Slide 8 text

© 2023 Wantedly, Inc. Wantedlyにおけるデザインシステムとは WantedlyのUIをデザインする上での共通の考え方とツール＆ アセットでありエンジニアとデザイナーが効率よくコミュニケーショ ンするための共通言語

Slide 9

Slide 9 text

© 2023 Wantedly, Inc. Wantedlyにおけるデザインシステムとは デザインシステム Figma実装 React実装 SwiftUI実装 Jetpack Compose実装 デザインシステム React実装 SwiftUI実装 Jetpack Compose実装 Figma 󰢃 󰢏

Slide 10

Slide 10 text

© 2023 Wantedly, Inc. Toastといえば？

Slide 11

Slide 11 text

© 2023 Wantedly, Inc. Android Wantedly的には

Slide 12

Slide 12 text

© 2023 Wantedly, Inc. Compose実装

Slide 13

Slide 13 text

© 2023 Wantedly, Inc. 公式ドキュメント カスタムデザインシステムについての公式ドキュメント ● 拡張 ● 置き換え ● ✅フルカスタム

Slide 14

Slide 14 text

© 2023 Wantedly, Inc. Why フルカスタム Materialではカバーしきれないから

Slide 15

Slide 15 text

© 2023 Wantedly, Inc. カスタムだけどMaterialベース 使えるものは使う ● TextやIcon ● RippleEffect ● LocalContentColor, LocalContentAlpha

Slide 16

Slide 16 text

© 2023 Wantedly, Inc. Elevationの例 ● 0でも影あり ● 光の向きが違う ○ 上方向の影がはっきり ● 色は薄め

Slide 17

Slide 17 text

© 2023 Wantedly, Inc. Elevationの例 ● 最初はCompose標準の Elevationで実装 ● 0の場合Borderで表現 デザイナー：数字合ってる？ と無駄なコミュニケーション 独自実装へ

Slide 18

Slide 18 text

© 2023 Wantedly, Inc. Elevationの実装

Slide 19

Slide 19 text

© 2023 Wantedly, Inc. Elevationの実装

Slide 20

Slide 20 text

© 2023 Wantedly, Inc. Elevationの実装

Slide 21

Slide 21 text

© 2023 Wantedly, Inc. Elevationの実装

Slide 22

Slide 22 text

© 2023 Wantedly, Inc. Elevationの実装

Slide 23

Slide 23 text

© 2023 Wantedly, Inc. Elevationの実装

Slide 24

Slide 24 text

© 2023 Wantedly, Inc. まとめ

Slide 25

Slide 25 text

© 2023 Wantedly, Inc. まとめ ● デザインシステムはUIに関わる人の共通言語 ● 実装プラットフォームとデザインシステムの差分をいかに吸収 するかが実装者の手腕