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
620
デザインシステムの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
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
240
技術を根付かせる / How to make technology take root
kubode
1
310
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
390
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
kubode
1
1.2k
Make your Android app into Multiplatform app
kubode
0
130
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
1
930
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
kubode
0
680
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
kubode
0
340
ウォンテッドリーでのKMPワークフロー / KMP workflow at Wantedly
kubode
0
1.7k
Other Decks in Technology
See All in Technology
SDカードフォレンジック
su3158
1
550
Classmethod AI Talks(CATs) #21 司会進行スライド(2025.04.17) / classmethod-ai-talks-aka-cats_moderator-slides_vol21_2025-04-17
shinyaa31
0
520
食べログが挑む!飲食店ネット予約システムで自動テスト無双して手動テストゼロを実現する戦略
hagevvashi
3
340
AIエージェントの地上戦 〜開発計画と運用実践 / 2025/04/08 Findy W&Bミートアップ #19
smiyawaki0820
28
8.9k
YOLOv10~v12
tenten0727
4
910
Vision Pro X Text to 3D Model ~How Swift and Generative Al Unlock a New Era of Spatial Computing~
igaryo0506
0
260
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
12
4.1k
技術者はかっこいいものだ!!~キルラキルから学んだエンジニアの生き方~
masakiokuda
2
230
50人の組織でAIエージェントを使う文化を作るためには / How to Create a Culture of Using AI Agents in a 50-Person Organization
yuitosato
6
3.3k
Automatically generating types by running tests
sinsoku
2
640
大AI時代で輝くために今こそドメインにディープダイブしよう / Deep Dive into Domain in AI-Agent-Era
yuitosato
1
310
ウォンテッドリーにおける Platform Engineering
bgpat
0
190
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
How STYLIGHT went responsive
nonsquared
99
5.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
For a Future-Friendly Web
brad_frost
176
9.7k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Done Done
chrislema
183
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Docker and Python
trallard
44
3.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
RailsConf 2023
tenderlove
30
1.1k
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に関わる人の共通言語 • 実装プラットフォームとデザインシステムの差分をいかに吸収 するかが実装者の手腕