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
560
デザインシステムの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
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
kubode
0
64
Make your Android app into Multiplatform app
kubode
0
53
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
1
350
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
kubode
0
220
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
kubode
0
250
ウォンテッドリーでのKMPワークフロー / KMP workflow at Wantedly
kubode
0
1.5k
ComposeでのShared Element Transition / Shared Element Transition in Compose
kubode
0
400
K2への完全移行結果 / Results of complete migration to K2
kubode
2
5.7k
Data Bindingの移行を楽にする / Easier migration of Data Binding
kubode
0
1.3k
Other Decks in Technology
See All in Technology
UE5の雑多なテク
ryuichikawano
0
430
The People First Approach to Engineering Success - DevNot 2024
zikriyeurkmez
0
150
LINEヤフー新卒採用 コーディングテスト解説 アルゴリズム問題編
lycorp_recruit_jp
0
13k
tenntennはなんでnewmoにnew社したの? - YAPC::Hakodate 2024
tenntenn
PRO
0
290
トークナイザー入門
payanotty
2
990
シェルとPerlの使い分け、 そういった思考の道具は、どこから来て、どこへゆくのか?v1.1.0
fmlorg
0
520
テクニカルライターのチームで「目標」をどう決めたか / MVV for a Team of Technical Writers
lycorptech_jp
PRO
3
110
Low Latency Join Method for Distributed DBMS
yugabytejapan
0
180
Oracle Database 23ai 新機能#4 Rolling Maintenance
oracle4engineer
PRO
0
140
Develop to Survive - YAPC::Hakodate 2024 Keynote
moznion
8
2.8k
WSUSが非推奨に!? Windowsの更新管理を改めて勉強する!
ebibibi
0
200
普通の Web エンジニアのための様相論理入門 #yapcjapan / YAPC Hakodate 2024
ytaka23
6
1.6k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
38
7k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Atom: Resistance is Futile
akmur
261
25k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Happy Clients
brianwarren
97
6.7k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
110
6.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Statistics for Hackers
jakevdp
796
220k
Bash Introduction
62gerente
608
210k
We Have a Design System, Now What?
morganepeng
49
7.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
7
590
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に関わる人の共通言語 • 実装プラットフォームとデザインシステムの差分をいかに吸収 するかが実装者の手腕