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
650

デザインシステムの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
910
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
Avatar for Masatoshi Kubode kubode
0
370
技術を根付かせる / How to make technology take root
Avatar for Masatoshi Kubode kubode
1
350
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
Avatar for Masatoshi Kubode kubode
0
430
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
150
ウォンテッドリーにおけるモバイルアプリ開発 / 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
780
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
監視のこれまでとこれから/sakura monitoring seminar 2025
Avatar for FUJIWARA Shunichiro fujiwara3
10
2.9k
新卒3年目の後悔 〜機械学習モデルジョブの運用を頑張った話〜
Avatar for camay kameitomohiro
0
400
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方（JaSST'25 Kansai）
Avatar for みずのり mizunori
0
160
白金鉱業Meetup_Vol.19_PoCはデモで語れ！顧客の本音とインサイトを引き出すソリューション構築​
Avatar for BrainPad brainpadpr
2
490
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
Avatar for 晴れ井戸 pal4de
3
1.1k
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
Avatar for k.muguruma mtpooh
2
300
キャディでのApache Iceberg, Trino採用事例　-Apache Iceberg and Trino Usecase in CADDi--
Avatar for recruiting@caddi.jp caddi_eng
0
180
Agentic DevOps時代の生存戦略
Avatar for KAMEGAWA Kazushi kkamegawa
0
1.1k
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
150
生成AIでwebアプリケーションを作ってみた
Avatar for tajimon tajimon
2
130
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
160
GeminiとNotebookLMによる金融実務の業務革新
Avatar for abenben abenben
0
170

Featured

See All Featured
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
277
23k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
350
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
124
52k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k

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