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
デザインシステムを利用したSwiftUIによるアプリ開発事情
Search
spycwolf
October 24, 2022
Programming
1
760
デザインシステムを利用したSwiftUIによるアプリ開発事情
spycwolf
October 24, 2022
Tweet
Share
More Decks by spycwolf
See All by spycwolf
アプリエンジニアのためのGraphQL入門.pdf
spycwolf
0
260
Other Decks in Programming
See All in Programming
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
iOS開発スターターキットの作り方
akidon0000
0
210
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.3k
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
300
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
110
AIともっと楽するE2Eテスト
myohei
9
3.2k
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
480
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
520
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Optimizing for Happiness
mojombo
379
70k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Embracing the Ebb and Flow
colly
86
4.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Practical Orchestrator
shlominoach
189
11k
Facilitating Awesome Meetings
lara
54
6.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Transcript
STORES 株式会社 2022/10/20 デザインシステムを利用したSwiftUIによ るアプリ開発事情
2 @neko 2022.03〜 STORES株式会社 STORES 予約 モバイルアプリエンジニア
3 現在の状況 • モバイルアプリエンジニア3名 ◦ チームにはその他、BEエンジニア、デザイナー、PdMが各1名ずつ • モバイルアプリエンジニア3名 ◦ 店舗のオーナーさん向けiOS/Androidアプリ
◦ 予約するユーザーさん向けiOS/Androidアプリ • リニューアルに伴い、利用技術を見直し ◦ iOS:Swift / SwiftUI ◦ Android:Kotlin / Jetpack Compose
4 デザインシステム導入の背景 1 • 宣言的UIとデザインシステムとの相性が良い ◦ 宣言的UIではコードのネストが深くなりがちだが、ネストが深くなりす ぎると、可読性が落ちていく ◦ 上記を避けるため、ビューの構成要素を分割していくが、どの単位で分
割するのか、エンジニア間で合意が必要 ◦ デザイナー組織を中心に全社的なデザインシステム導入の動きがあり、 実装側もそれにあわせることがスムーズと考えた
5 デザインシステム導入の背景 2 • デザイン <-> 開発コストの抑制 ◦ デザイナー側に、プラットフォームごとのコンポーネント表現の差、OS バージョンごとの仕様の差などを逐一把握してもらうことが難しい
◦ デザインシステムを双方で導入することにより、それが共通言語として の役割を果たしてくれる期待 ◦ それにより、お互いの認識齟齬を防ぎ、運用の蓄積によってデザイン・ 開発コストが抑制されていくのではないか
6 実装の進め方 • Foundation ◦ Color、Typographyなどを定義 • Component、Pattern ◦ Button、TextField、SegmentedControl、Dialog、TabViewなどを実装
• ライブラリとして開発 ◦ 各プロダクトにインポートして利用することを想定し、独立したライブ ラリとして開発
Color定義 サンプルコード 7 ※コードは公開用に編集してあり、実際のコードとは異なります
Typography定義 サンプルコード 8 ※コードは公開用に編集してあり、実際のコードとは異なります
Button定義 サンプルコード 9 ※コードは公開用に編集してあり、実際のコードとは異なります
10 チーム内での共有 • 実装したライブラリの内容を一覧できるアプリ ◦ ライブラリの内容が確認できるカタログアプリを開発 • デザイナーやPdMが実際の端末で確認できる ◦ 実際の端末での見え方や操作感を体験してもらえる
• iOS/Androidそれぞれのアプリを実装 ◦ プラットフォームやバージョンごとの差異が分かる
None
12 ここまでの課題 • バリエーションの実装方針が難しい ◦ 似ているが少し違うパターンをどのように実装するか ◦ 引数によって分岐させるか、別々のコンポーネントにするか • 想定外のパターンへの対応が難しい
◦ 実際の画面要件として想定外のパターンが出てきた場合、都度対応が必 要になってくる ◦ 事前にある程度、方向性を決めておくことが必要
13 開発スピードは向上 • 実際の画面を実装する際、事前に準備してあるコンポーネントを呼び出すだ けなのがかなり楽 • デザイナーとのコミュニケーションがスムーズになり、お互いのコスト削減 に役立っている実感がある
14 ありがとうございました