Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザインシステムのCompose実装 / Design system Compose impl...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Masatoshi Kubode Masatoshi Kubode
August 01, 2023
Technology
0
710

デザインシステムのCompose実装 / Design system Compose implementation

https://teamlab.connpass.com/event/289576/

Avatar for Masatoshi Kubode

Masatoshi Kubode

August 01, 2023
Tweet

More Decks by Masatoshi Kubode

See All by Masatoshi Kubode
3リポジトリーを2ヶ月でモノレポ化した話 / How I turned 3 repositories into a monorepo in 2 months
Avatar for Masatoshi Kubode kubode
0
150
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
Avatar for Masatoshi Kubode kubode
2
1.3k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
Avatar for Masatoshi Kubode kubode
0
670
技術を根付かせる / How to make technology take root
Avatar for Masatoshi Kubode kubode
1
460
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
Avatar for Masatoshi Kubode kubode
0
590
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
Avatar for Masatoshi Kubode kubode
1
1.4k
Make your Android app into Multiplatform app
Avatar for Masatoshi Kubode kubode
0
210
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
Avatar for Masatoshi Kubode kubode
1
1.4k
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
Avatar for Masatoshi Kubode kubode
0
1.1k

Other Decks in Technology

See All in Technology
AWS DevOps Agent vs SRE俺 / AWS DevOps Agent vs me, the SRE
Avatar for SMS tech sms_tech
3
840
OCI Security サービス 概要
Avatar for oracle4engineer oracle4engineer
PRO
2
13k
最強のAIエージェントを諦めたら品質が上がった話 / how quality improved after giving up on the strongest AI agent
Avatar for kt2 kt2mikan
0
190
身体を持ったパーソナルAIエージェントの 可能性を探る開発
Avatar for yoko / Naoki Yokomachi yokomachi
1
120
Claude Code Skills 勉強会 (DevelersIO向けに調整済み) / claude code skills for devio
Avatar for MasahiroKawahara masahirokawahara
1
21k
ランサムウエア対策してますか？やられた時の対策は本当にできてますか？AWSでのリスク分析と対応フローの泥臭いお話。
Avatar for ひろのぶ hootaki
0
140
JAWSDAYS2026 [C02] 楽しく学ぼう！AWSとは？AWSの歴史 入門
Avatar for 平賀博司 hiragahh
0
160
わからなくて良いなら、わからなきゃだめなの？
Avatar for kota oue kotaoue
1
360
AIエージェント時代に備える AWS Organizations とアカウント設計
Avatar for Hajime KOSHIRO kossykinto
3
1k
ガバメントクラウドにおけるAWSの長期継続割引について
Avatar for takeda_h takeda_h
2
250
AI時代のSaaSとETL
Avatar for Shu Suzuki shoe116
1
150
AI実装による「レビューボトルネック」を解消する仕様駆動開発（SDD）/ ai-sdd-review-bottleneck
Avatar for Rakus_Dev rakus_dev
0
140

Featured

See All Featured
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
240
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
3
400
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
84
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.3k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
130
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
150
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
800
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k

Transcript

  1. © 2023 Wantedly, Inc. デザインシステムの Compose実装 モバイル勉強会 #10 2023/08/01 久保出雅俊

  2. © 2023 Wantedly, Inc.

  3. © 2023 Wantedly, Inc. デザインシステムは UIに関わる人の共通言語

  4. © 2023 Wantedly, Inc. Agenda Wantedlyでの取り組みの紹介 • デザインシステムとは • Compose実装

  5. © 2023 Wantedly, Inc. デザインシステムとは

  6. © 2023 Wantedly, Inc. デザインシステム デザインの一貫性を保つ仕組み

  7. © 2023 Wantedly, Inc. デザインシステム ユーザー視点： Web, iOS, Androidどれを使っても 同じプロダクトと認識

    開発視点： デザイナーとエンジニアの共通認識

  8. © 2023 Wantedly, Inc. Wantedlyにおけるデザインシステムとは WantedlyのUIをデザインする上での共通の考え方とツール＆ アセットでありエンジニアとデザイナーが効率よくコミュニケーショ ンするための共通言語

  9. © 2023 Wantedly, Inc. Wantedlyにおけるデザインシステムとは デザインシステム Figma実装 React実装 SwiftUI実装 Jetpack

    Compose実装 デザインシステム React実装 SwiftUI実装 Jetpack Compose実装 Figma 󰢃 󰢏

  10. © 2023 Wantedly, Inc. Toastといえば？

  11. © 2023 Wantedly, Inc. Android Wantedly的には

  12. © 2023 Wantedly, Inc. Compose実装

  13. © 2023 Wantedly, Inc. 公式ドキュメント カスタムデザインシステムについての公式ドキュメント • 拡張 • 置き換え

    • ✅フルカスタム

  14. © 2023 Wantedly, Inc. Why フルカスタム Materialではカバーしきれないから

  15. © 2023 Wantedly, Inc. カスタムだけどMaterialベース 使えるものは使う • TextやIcon • RippleEffect

    • LocalContentColor, LocalContentAlpha

  16. © 2023 Wantedly, Inc. Elevationの例 • 0でも影あり • 光の向きが違う ◦

    上方向の影がはっきり • 色は薄め

  17. © 2023 Wantedly, Inc. Elevationの例 • 最初はCompose標準の Elevationで実装 • 0の場合Borderで表現

    デザイナー：数字合ってる？ と無駄なコミュニケーション 独自実装へ

  18. © 2023 Wantedly, Inc. Elevationの実装

  19. © 2023 Wantedly, Inc. Elevationの実装

  20. © 2023 Wantedly, Inc. Elevationの実装

  21. © 2023 Wantedly, Inc. Elevationの実装

  22. © 2023 Wantedly, Inc. Elevationの実装

  23. © 2023 Wantedly, Inc. Elevationの実装

  24. © 2023 Wantedly, Inc. まとめ

  25. © 2023 Wantedly, Inc. まとめ • デザインシステムはUIに関わる人の共通言語 • 実装プラットフォームとデザインシステムの差分をいかに吸収 するかが実装者の手腕