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

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

Transcript

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

   View Slide

2. © 2023 Wantedly, Inc.
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. © 2023 Wantedly, Inc.
    Android Wantedly的には
    

    View Slide

12. © 2023 Wantedly, Inc.
    Compose実装
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. © 2023 Wantedly, Inc.
    Elevationの実装
    

    View Slide

19. © 2023 Wantedly, Inc.
    Elevationの実装
    

    View Slide

20. © 2023 Wantedly, Inc.
    Elevationの実装
    

    View Slide

21. © 2023 Wantedly, Inc.
    Elevationの実装
    

    View Slide

22. © 2023 Wantedly, Inc.
    Elevationの実装
    

    View Slide

23. © 2023 Wantedly, Inc.
    Elevationの実装
    

    View Slide

24. © 2023 Wantedly, Inc.
    まとめ
    

    View Slide

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

    View Slide