$30 off During Our Annual Pro Sale. View Details »

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

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

デザインシステムの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
1.2k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
Avatar for Masatoshi Kubode kubode
0
610
技術を根付かせる / How to make technology take root
Avatar for Masatoshi Kubode kubode
1
420
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
Avatar for Masatoshi Kubode kubode
0
540
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
190
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
Avatar for Masatoshi Kubode kubode
1
1.3k
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
Avatar for Masatoshi Kubode kubode
0
980
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
Avatar for Masatoshi Kubode kubode
0
390

Other Decks in Technology

See All in Technology
MySQLとPostgreSQLのコレーション / Collation of MySQL and PostgreSQL
Avatar for とみたまさひろ tmtms
1
540
20251219 OpenIDファウンデーション・ジャパン紹介 / OpenID Foundation Japan Intro
Avatar for OpenID Foundation Japan oidfj
0
140
CARTAのAI CoE が挑む「事業を進化させる AI エンジニアリング」 / carta ai coe evolution business ai engineering
Avatar for CARTA Engineering carta_engineering
0
1.9k
AI時代のワークフロー設計〜Durable Functions / Step Functions / Strands Agents を添えて〜
Avatar for やくも yakumo
3
300
AIプラットフォームにおけるMLflowの利用について
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
170
ウェルネス SaaS × AI、1,000万ユーザーを支える 業界特化 AI プロダクト開発への道のり
Avatar for hacomono Inc. hacomono
PRO
0
140
評価駆動開発で不確実性を制御する - MLflow 3が支えるエージェント開発
Avatar for Databricks Japan databricksjapan
1
210
NIKKEI Tech Talk #41: セキュア・バイ・デザインからクラウド管理を考える
Avatar for Ryosuke Sekido sekido
PRO
0
150
AIの長期記憶と短期記憶の違いについてAgentCoreを例に深掘ってみた
Avatar for やくも yakumo
4
430
ChatGPTで論⽂は読めるのか
Avatar for Spatial AI Network spatial_ai_network
11
29k
Amazon Bedrock Knowledge Bases × メタデータ活用で実現する検証可能な RAG 設計
Avatar for Tomoaki tomoaki25
1
110
SREには開発組織全体で向き合う
Avatar for k-nagase koh_naga
0
370

Featured

See All Featured
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.3k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k

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