デザインシステムのCompose実装 / Design system Compose implementation

https://teamlab.connpass.com/event/289576/

Transcript

1. © 2023 Wantedly, Inc. デザインシステムの Compose実装 モバイル勉強会 #10 2023/08/01 久保出雅俊
2. © 2023 Wantedly, Inc.
3. © 2023 Wantedly, Inc. デザインシステムは UIに関わる人の共通言語
4. © 2023 Wantedly, Inc. Agenda Wantedlyでの取り組みの紹介 • デザインシステムとは • Compose実装
5. © 2023 Wantedly, Inc. デザインシステムとは
6. © 2023 Wantedly, Inc. デザインシステム デザインの一貫性を保つ仕組み
7. © 2023 Wantedly, Inc. デザインシステム ユーザー視点： Web, iOS, Androidどれを使っても 同じプロダクトと認識 開発視点： デザイナーとエンジニアの共通認識
8. © 2023 Wantedly, Inc. Wantedlyにおけるデザインシステムとは WantedlyのUIをデザインする上での共通の考え方とツール＆ アセットでありエンジニアとデザイナーが効率よくコミュニケーショ ンするための共通言語
9. © 2023 Wantedly, Inc. Wantedlyにおけるデザインシステムとは デザインシステム Figma実装 React実装 SwiftUI実装 Jetpack Compose実装 デザインシステム React実装 SwiftUI実装 Jetpack Compose実装 Figma 󰢃 󰢏
10. © 2023 Wantedly, Inc. Toastといえば？
11. © 2023 Wantedly, Inc. Android Wantedly的には
12. © 2023 Wantedly, Inc. Compose実装
13. © 2023 Wantedly, Inc. 公式ドキュメント カスタムデザインシステムについての公式ドキュメント • 拡張 • 置き換え • ✅フルカスタム
14. © 2023 Wantedly, Inc. Why フルカスタム Materialではカバーしきれないから
15. © 2023 Wantedly, Inc. カスタムだけどMaterialベース 使えるものは使う • TextやIcon • RippleEffect • LocalContentColor, LocalContentAlpha
16. © 2023 Wantedly, Inc. Elevationの例 • 0でも影あり • 光の向きが違う ◦ 上方向の影がはっきり • 色は薄め
17. © 2023 Wantedly, Inc. Elevationの例 • 最初はCompose標準の Elevationで実装 • 0の場合Borderで表現 デザイナー：数字合ってる？ と無駄なコミュニケーション 独自実装へ
18. © 2023 Wantedly, Inc. Elevationの実装
19. © 2023 Wantedly, Inc. Elevationの実装
20. © 2023 Wantedly, Inc. Elevationの実装
21. © 2023 Wantedly, Inc. Elevationの実装
22. © 2023 Wantedly, Inc. Elevationの実装
23. © 2023 Wantedly, Inc. Elevationの実装
24. © 2023 Wantedly, Inc. まとめ
25. © 2023 Wantedly, Inc. まとめ • デザインシステムはUIに関わる人の共通言語 • 実装プラットフォームとデザインシステムの差分をいかに吸収 するかが実装者の手腕