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
630

デザインシステムの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
1
270
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
Avatar for Masatoshi Kubode kubode
0
290
技術を根付かせる / How to make technology take root
Avatar for Masatoshi Kubode kubode
1
320
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
Avatar for Masatoshi Kubode kubode
0
400
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
130
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
Avatar for Masatoshi Kubode kubode
1
960
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
Avatar for Masatoshi Kubode kubode
0
710
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
問 1：以下のコンパイラを証明せよ（予告編） #kernelvm / Kernel VM Study Kansai 11th
Avatar for y_taka_23 ytaka23
2
320
250510 StepFunctionのテスト自動化始めました vol.1
Avatar for Takumi Abe east_takumi
1
150
AIエージェント開発手法と業務導入のプラクティス
Avatar for Yoshinori Kosaka ykosaka
9
2.7k
開発者とQAで協業するテックタッチの取り組み
Avatar for shutty shutty
0
100
Databricksで完全履修！オールインワンレイクハウスは実在した！
Avatar for Akihiro Kuwano akuwano
0
150
10ヶ月かけてstyled-components v4からv5にアップデートした話
Avatar for uhyo uhyo
5
460
AIと共に乗り越える、 入社後２ヶ月の苦労と学習の軌跡
Avatar for Sai Kaneko sai_kaneko
1
200
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
7
63k
OPENLOGI Company Profile
Avatar for OPENLOGI hr01
0
63k
C++26アップデート 2025-03
Avatar for Akira Takahashi faithandbrave
0
1.2k
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
26k
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
2
640

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
14
1.4k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Designing for Performance
Avatar for Lara Hogan lara
608
69k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2k
Code Review Best Practice
Avatar for Trisha Gee trishagee
67
18k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
6.5k
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
33k

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