Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザインシステムのCompose実装 / Design system Compose impl...
Search
Masatoshi Kubode
August 01, 2023
Technology
0
640
デザインシステムのCompose実装 / Design system Compose implementation
https://teamlab.connpass.com/event/289576/
Masatoshi Kubode
August 01, 2023
Tweet
Share
More Decks by Masatoshi Kubode
See All by Masatoshi Kubode
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
2
780
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
320
技術を根付かせる / How to make technology take root
kubode
1
340
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
420
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
kubode
1
1.2k
Make your Android app into Multiplatform app
kubode
0
140
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
1
1k
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
kubode
0
740
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
kubode
0
350
Other Decks in Technology
See All in Technology
[JAWS-UG 栃木 #2]AWS FISはドSなのか?システムに試練を与えて強くする!
sh_fk2
1
260
継続戦闘能⼒
sansantech
PRO
0
190
TerraformとGitHub Actionsで手軽に実装するECSのCI/CD
k___tkg
0
230
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
3
1.5k
The Ultimate Showdown of Database Migration Tools
asm0dey
0
150
Oracle Database オプティマイザ・ヒントの活用
oracle4engineer
PRO
1
130
Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
0
330
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
24k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
Contract One Dev Group 紹介資料
sansan33
PRO
0
5.9k
型がない世界に生まれ落ちて 〜TypeScript運用進化の歴史〜
narihara
1
190
AIコードエディタは開発を変えるか?Cursorをチームに導入して1ヶ月経った本音
ota1022
1
570
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
We Have a Design System, Now What?
morganepeng
52
7.6k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Facilitating Awesome Meetings
lara
54
6.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Agile that works and the tools we love
rasmusluckow
329
21k
Scaling GitHub
holman
459
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
The Pragmatic Product Professional
lauravandoore
34
6.6k
Transcript
© 2023 Wantedly, Inc. デザインシステムの Compose実装 モバイル勉強会 #10 2023/08/01 久保出雅俊
© 2023 Wantedly, Inc.
© 2023 Wantedly, Inc. デザインシステムは UIに関わる人の共通言語
© 2023 Wantedly, Inc. Agenda Wantedlyでの取り組みの紹介 • デザインシステムとは • Compose実装
© 2023 Wantedly, Inc. デザインシステムとは
© 2023 Wantedly, Inc. デザインシステム デザインの一貫性を保つ仕組み
© 2023 Wantedly, Inc. デザインシステム ユーザー視点: Web, iOS, Androidどれを使っても 同じプロダクトと認識
開発視点: デザイナーとエンジニアの共通認識
© 2023 Wantedly, Inc. Wantedlyにおけるデザインシステムとは WantedlyのUIをデザインする上での共通の考え方とツール& アセットでありエンジニアとデザイナーが効率よくコミュニケーショ ンするための共通言語
© 2023 Wantedly, Inc. Wantedlyにおけるデザインシステムとは デザインシステム Figma実装 React実装 SwiftUI実装 Jetpack
Compose実装 デザインシステム React実装 SwiftUI実装 Jetpack Compose実装 Figma
© 2023 Wantedly, Inc. Toastといえば?
© 2023 Wantedly, Inc. Android Wantedly的には
© 2023 Wantedly, Inc. Compose実装
© 2023 Wantedly, Inc. 公式ドキュメント カスタムデザインシステムについての公式ドキュメント • 拡張 • 置き換え
• ✅フルカスタム
© 2023 Wantedly, Inc. Why フルカスタム Materialではカバーしきれないから
© 2023 Wantedly, Inc. カスタムだけどMaterialベース 使えるものは使う • TextやIcon • RippleEffect
• LocalContentColor, LocalContentAlpha
© 2023 Wantedly, Inc. Elevationの例 • 0でも影あり • 光の向きが違う ◦
上方向の影がはっきり • 色は薄め
© 2023 Wantedly, Inc. Elevationの例 • 最初はCompose標準の Elevationで実装 • 0の場合Borderで表現
デザイナー:数字合ってる? と無駄なコミュニケーション 独自実装へ
© 2023 Wantedly, Inc. Elevationの実装
© 2023 Wantedly, Inc. Elevationの実装
© 2023 Wantedly, Inc. Elevationの実装
© 2023 Wantedly, Inc. Elevationの実装
© 2023 Wantedly, Inc. Elevationの実装
© 2023 Wantedly, Inc. Elevationの実装
© 2023 Wantedly, Inc. まとめ
© 2023 Wantedly, Inc. まとめ • デザインシステムはUIに関わる人の共通言語 • 実装プラットフォームとデザインシステムの差分をいかに吸収 するかが実装者の手腕