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
440
デザインシステムの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
ComposeでのShared Element Transition / Shared Element Transition in Compose
kubode
0
170
K2への完全移行結果 / Results of complete migration to K2
kubode
1
2k
Data Bindingの移行を楽にする / Easier migration of Data Binding
kubode
0
450
Compose Shadow Alternative
kubode
0
160
アイコンをComposeにする / Compose the Icons
kubode
0
360
KMMのCI/CD
kubode
3
690
WantedlyでのCompose導入 / Introducing Jetpack Compose at Wantedly
kubode
1
380
DroidKaigi/conference-app-2022へのContributionが楽しかった話 / Contributing DroidKaigi app was fun!
kubode
0
940
継続的な依存性のアップデートにより得られたこと / What we have learned from continuous dependency updates
kubode
0
390
Other Decks in Technology
See All in Technology
One engineer company with Ruby on Rails
rstankov
2
280
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
490
アクセス制御にまつわる改善 / Improving access control
itkq
0
560
生産性向上チームの紹介
cybozuinsideout
PRO
1
880
AWS学習者向けにAzureの解説スライドを作成した話
handy
2
100
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
620
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
390
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.7k
Building Dashboards as a Hobby
egmc
0
300
Janus
bkuhlmann
1
490
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
BBQ
matthewcrist
80
8.8k
Practical Orchestrator
shlominoach
182
9.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Infographics Made Easy
chrislema
238
18k
4 Signs Your Business is Dying
shpigford
175
21k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
What's new in Ruby 2.0
geeforr
337
31k
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に関わる人の共通言語 • 実装プラットフォームとデザインシステムの差分をいかに吸収 するかが実装者の手腕