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 implementation
Search
Masatoshi Kubode
August 01, 2023
Technology
0
510
デザインシステムの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
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
kubode
0
85
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
kubode
0
110
ウォンテッドリーでのKMPワークフロー / KMP workflow at Wantedly
kubode
0
1k
ComposeでのShared Element Transition / Shared Element Transition in Compose
kubode
0
290
K2への完全移行結果 / Results of complete migration to K2
kubode
2
4.2k
Data Bindingの移行を楽にする / Easier migration of Data Binding
kubode
0
810
Compose Shadow Alternative
kubode
0
250
アイコンをComposeにする / Compose the Icons
kubode
0
440
KMMのCI/CD
kubode
3
740
Other Decks in Technology
See All in Technology
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8k
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
Azure AI ことはじめ
tsubakimoto_s
0
130
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
Featured
See All Featured
The Invisible Side of Design
smashingmag
294
50k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
How to Ace a Technical Interview
jacobian
274
23k
Ruby is Unlike a Banana
tanoku
96
10k
A Modern Web Designer's Workflow
chriscoyier
689
190k
What the flash - Photography Introduction
edds
65
11k
What's new in Ruby 2.0
geeforr
338
31k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
How to name files
jennybc
67
96k
What's in a price? How to price your products and services
michaelherold
239
11k
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に関わる人の共通言語 • 実装プラットフォームとデザインシステムの差分をいかに吸収 するかが実装者の手腕