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
600
デザインシステムの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
技術を根付かせる / How to make technology take root
kubode
1
240
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
310
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
kubode
1
1k
Make your Android app into Multiplatform app
kubode
0
100
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
1
820
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
kubode
0
540
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
kubode
0
310
ウォンテッドリーでのKMPワークフロー / KMP workflow at Wantedly
kubode
0
1.6k
ComposeでのShared Element Transition / Shared Element Transition in Compose
kubode
0
480
Other Decks in Technology
See All in Technology
Building Products in the LLM Era
ymatsuwitter
10
4.4k
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
660
SCSAから学ぶセキュリティ管理
masakamayama
0
140
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
事業継続を支える自動テストの考え方
tsuemura
0
300
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
0
100
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
A Tale of Four Properties
chriscoyier
158
23k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Pragmatic Product Professional
lauravandoore
32
6.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
YesSQL, Process and Tooling at Scale
rocio
171
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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に関わる人の共通言語 • 実装プラットフォームとデザインシステムの差分をいかに吸収 するかが実装者の手腕