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

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

Avatar for Masatoshi Kubode Masatoshi Kubode
August 01, 2023
Technology
0
660

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

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

Avatar for Masatoshi Kubode

Masatoshi Kubode

August 01, 2023
Tweet

More Decks by Masatoshi Kubode

See All by Masatoshi Kubode
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
Avatar for Masatoshi Kubode kubode
2
1k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
Avatar for Masatoshi Kubode kubode
0
460
技術を根付かせる / How to make technology take root
Avatar for Masatoshi Kubode kubode
1
370
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
Avatar for Masatoshi Kubode kubode
0
450
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
Avatar for Masatoshi Kubode kubode
1
1.3k
Make your Android app into Multiplatform app
Avatar for Masatoshi Kubode kubode
0
160
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
Avatar for Masatoshi Kubode kubode
1
1.1k
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
Avatar for Masatoshi Kubode kubode
0
840
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
Avatar for Masatoshi Kubode kubode
0
360

Other Decks in Technology

See All in Technology
React Server ComponentsでAPI不要の開発体験
Avatar for polidog polidog
PRO
0
240
Eval-Centric AI: Agent 開発におけるベストプラクティスの探求
Avatar for Asei Sugiyama asei
0
120
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
Avatar for puku0x puku0x
0
570
UDDのススメ - 拡張版 -
Avatar for マグロ隊長kinTV maguroalternative
1
530
Kiroでインフラ要件定義～テスト
 を実施してみた
Avatar for nagisa_53 nagisa53
3
360
Lambda management with ecspresso and Terraform
Avatar for Michael H. Oshita ijin
2
160
Segment Anything Modelの最新動向：SAM2とその発展系
Avatar for TakatoYoshikawa tenten0727
0
760
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
Avatar for 風音屋 (Kazaneya) kazaneya
PRO
22
5.2k
10年以上続くプロダクトで今取り組んでること、取り組もうとしていること
Avatar for SansanTech sansantech
PRO
2
110
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする～遊びやすさと競技性の両立～
Avatar for Cygames cygames
PRO
1
370
猫でもわかるQ_CLI(CDK開発編)+ちょっとだけKiro
Avatar for Hiroo Katoh kentapapa
0
3.5k
「Roblox」の開発環境とその効率化 ～DAU9700万人超の巨大プラットフォームの開発 事始め～
Avatar for Keita Tanji keitatanji
0
120

Featured

See All Featured
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
65k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k

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に関わる人の共通言語 • 実装プラットフォームとデザインシステムの差分をいかに吸収 するかが実装者の手腕