https://teamlab.connpass.com/event/289576/
© 2023 Wantedly, Inc.デザインシステムのCompose実装モバイル勉強会 #102023/08/01 久保出雅俊
View Slide
© 2023 Wantedly, Inc.
© 2023 Wantedly, Inc.デザインシステムはUIに関わる人の共通言語
© 2023 Wantedly, Inc.AgendaWantedlyでの取り組みの紹介● デザインシステムとは● Compose実装
© 2023 Wantedly, Inc.デザインシステムとは
© 2023 Wantedly, Inc.デザインシステムデザインの一貫性を保つ仕組み
© 2023 Wantedly, Inc.デザインシステムユーザー視点:Web, iOS, Androidどれを使っても同じプロダクトと認識開発視点:デザイナーとエンジニアの共通認識
© 2023 Wantedly, Inc.WantedlyにおけるデザインシステムとはWantedlyのUIをデザインする上での共通の考え方とツール&アセットでありエンジニアとデザイナーが効率よくコミュニケーションするための共通言語
© 2023 Wantedly, Inc.WantedlyにおけるデザインシステムとはデザインシステムFigma実装React実装SwiftUI実装Jetpack Compose実装デザインシステムReact実装SwiftUI実装Jetpack Compose実装Figma
© 2023 Wantedly, Inc.Toastといえば?
© 2023 Wantedly, Inc.Android Wantedly的には
© 2023 Wantedly, Inc.Compose実装
© 2023 Wantedly, Inc.公式ドキュメントカスタムデザインシステムについての公式ドキュメント● 拡張● 置き換え● ✅フルカスタム
© 2023 Wantedly, Inc.Why フルカスタムMaterialではカバーしきれないから
© 2023 Wantedly, Inc.カスタムだけどMaterialベース使えるものは使う● TextやIcon● RippleEffect● LocalContentColor, LocalContentAlpha
© 2023 Wantedly, Inc.Elevationの例● 0でも影あり● 光の向きが違う○ 上方向の影がはっきり● 色は薄め
© 2023 Wantedly, Inc.Elevationの例● 最初はCompose標準のElevationで実装● 0の場合Borderで表現デザイナー:数字合ってる?と無駄なコミュニケーション独自実装へ
© 2023 Wantedly, Inc.Elevationの実装
© 2023 Wantedly, Inc.まとめ
© 2023 Wantedly, Inc.まとめ● デザインシステムはUIに関わる人の共通言語● 実装プラットフォームとデザインシステムの差分をいかに吸収するかが実装者の手腕