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
86
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
300
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
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
160
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
810
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.2k
AWSでRAGを作る法方
sonoda_mj
1
140
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Design by the Numbers
sachag
277
18k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
BBQ
matthewcrist
82
9k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Unsuck your backbone
ammeep
666
57k
Scaling GitHub
holman
458
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
How to Ace a Technical Interview
jacobian
274
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Happy Clients
brianwarren
94
6.6k
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に関わる人の共通言語 • 実装プラットフォームとデザインシステムの差分をいかに吸収 するかが実装者の手腕