Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Masatoshi Kubode

August 01, 2023
Tweet

More Decks by Masatoshi Kubode

Other Decks in Technology

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