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
640

デザインシステムの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
800
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
Avatar for Masatoshi Kubode kubode
0
330
技術を根付かせる / How to make technology take root
Avatar for Masatoshi Kubode kubode
1
340
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
Avatar for Masatoshi Kubode kubode
0
420
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
Avatar for Masatoshi Kubode kubode
1
1.2k
Make your Android app into Multiplatform app
Avatar for Masatoshi Kubode kubode
0
140
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
Avatar for Masatoshi Kubode kubode
1
1k
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
Avatar for Masatoshi Kubode kubode
0
740
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
Avatar for Masatoshi Kubode kubode
0
350

Other Decks in Technology

See All in Technology
CSS polyfill とその未来
Avatar for ken7253 ken7253
0
130
コードの考古学 〜労務システムから発掘した成長の糧〜
Avatar for Kenta SEKINE kenta_smarthr
0
220
他チームへ越境したら、生データ提供ソリューションのクエリ費用95%削減へ繋がった話 / Cross-Team Impact: 95% Off Raw Data Query Costs
Avatar for yamamoto-yuta yamamotoyuta
0
170
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
230
Node−RED で Ollama を使ったローカルLLM（node-red-contrib-ollamaを利用） / ビジュアルプログラミングIoTLT vol.20
Avatar for you（@youtoy） you
PRO
0
130
KMP導⼊において、マネジャーとして考えた事
Avatar for SansanTech sansantech
PRO
1
190
“⾞が通れるほど⼤きな”セキュリティーホールを抑えながらログインしたい
Avatar for taiseiue taiseiue
0
130
Oracle Cloud Infrastructure：2025年5月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
310
Rebase エンジニアリング組織の現状とこれから
Avatar for 株式会社Rebase_エンジニアリング rebase_engineering
0
130
ゴリラ.vim #36 ~ Vim x SNS ~ スポンサーセッション
Avatar for yasunori yasunori0418
1
260
君だけのオリジナル async / await を作ろう / TSKaigi 2025
Avatar for Susisu susisu
17
13k
データ戦略部門 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.1k

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
56
9.4k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
92
6k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
46
14k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.6k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
178
9.7k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.4k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.4k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k

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