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
720
0

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

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

Avatar for Masatoshi Kubode

Masatoshi Kubode

August 01, 2023

More Decks by Masatoshi Kubode

See All by Masatoshi Kubode
3リポジトリーを2ヶ月でモノレポ化した話 / How I turned 3 repositories into a monorepo in 2 months
Avatar for Masatoshi Kubode kubode
0
170
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
Avatar for Masatoshi Kubode kubode
2
1.3k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
Avatar for Masatoshi Kubode kubode
0
690
技術を根付かせる / How to make technology take root
Avatar for Masatoshi Kubode kubode
1
470
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
Avatar for Masatoshi Kubode kubode
0
610
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
Avatar for Masatoshi Kubode kubode
1
1.4k
Make your Android app into Multiplatform app
Avatar for Masatoshi Kubode kubode
0
220
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
Avatar for Masatoshi Kubode kubode
1
1.4k
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
Avatar for Masatoshi Kubode kubode
0
1.1k

Other Decks in Technology

See All in Technology
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
16
410k
試されDATA SAPPORO [LT]Claude Codeで「ゆっくりデータ分析」
Avatar for Satoru Ishikawa ishikawa_satoru
0
370
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.9k
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
380
幾億の壁を超えて/Beyond Countless Walls(JP)
Avatar for 小田中育生 ikuodanaka
0
120
数案件を同時に進行するためのコンテキスト整理術
Avatar for sutetotanuki sutetotanuki
1
210
ストライクウィッチーズ2期6話のエイラの行動が許せないのでPjMの観点から何をすべきだったのかを考える
Avatar for nakamichi ichimichi
1
350
ふりかえりがなかった職能横断チームにふりかえりを導入してみて学んだこと 〜チームのふりかえりを「みんなで未来を考える場」にするプロローグ設計〜
Avatar for Masahiro Shimokawa masahiro1214shimokawa
0
350
Databricksを用いたセキュアなデータ基盤構築とAIプロダクトへの応用.pdf
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
300
AI環境整備はどのくらい開発生産性を変えうるか？ #AI駆動開発 #AI自走環境
Avatar for HisayaUchida ucchi0909
0
130
Claude Teamプランの選定と、できること/できないこと
Avatar for ふくだ（fukuda ryu） rfdnxbro
1
2.2k
さくらのクラウドでつくるCloudNative Daysのオブザーバビリティ基盤
Avatar for Taisuke Okamoto a.k.a BigBaBy b1gb4by
0
160

Featured

See All Featured
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
160
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.3k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
260
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.4k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
190
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
110
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k

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