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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Masatoshi Kubode Masatoshi Kubode
August 01, 2023
Technology
730
0

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

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

Avatar for Masatoshi Kubode

Masatoshi Kubode

August 01, 2023

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
220
ウォンテッドリーの「ココロオドル」モバイル開発 / 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
720
技術を根付かせる / How to make technology take root
Avatar for Masatoshi Kubode kubode
1
500
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
Avatar for Masatoshi Kubode kubode
0
640
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
230
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
Avatar for Masatoshi Kubode kubode
1
1.5k
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
新規事業を牽引する技術選定 〜フルスタックTypeScript開発の実践事例〜
Avatar for Katsuma Narisawa nullnull
3
380
スキルと MCP ツール、責務をどう分けるか？ AI が迷わないインターフェース設計の戦略
Avatar for CData Software Japan cdataj
1
920
MCP Appsを作ってみよう
Avatar for iwamot iwamot
PRO
4
480
Kubernetesにおける学習基盤とLLMOpsの概要
Avatar for ry ry
1
230
脆弱性対応、どこで線を引くか
Avatar for ryoji miyamoto rymiyamoto
0
350
JSAI2026 オーガナイズドセッションOS-27「不動産とAI」趣旨説明 / JSAI2026 Organized Session OS-27 “Real Estate and AI”: Statement of Purpose
Avatar for Kiyota Yoji, Ph.D. ykiyota
0
220
On-behalf-of Token exchange with AgentCore Identity
Avatar for iganin hironobuiga
2
140
ルールやカスタム機能、どう活かす?ハンズオンで体感するIBM Bobの出力コントロール
Avatar for mu (Mizuho Uehara) muehara
1
130
LLMにもCAP定理があるという話
Avatar for Haruka Sakihara harukasakihara
0
280
就職⽀援サービスにおけるキャリアアドバイザーのシフトスケジューリング
Avatar for Recruit recruitengineers
PRO
1
130
チームで進めるAI駆動アジャイル×ウォーターフォール
Avatar for 熊井悠 kumaiu
0
150
Microsoft Build Keynoteふりかえり
Avatar for tomokusaba tomokusaba
0
120

Featured

See All Featured
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
720
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
290
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
270
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
320
Leo the Paperboy
Avatar for Maya Tellez mayatellez
7
1.8k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
250
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.7k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
400

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に関わる人の共通言語 • 実装プラットフォームとデザインシステムの差分をいかに吸収 するかが実装者の手腕