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
Cooperate with Adobe XD, Zeplin and Xcode
Search
asmz
February 25, 2019
Technology
1
3k
Cooperate with Adobe XD, Zeplin and Xcode
Adobe XD・Zeplin・Xcode連携で、iOSアプリのデザイン実装フロー効率化
Talked at 仙台 Adobe XD Meeting #3
asmz
February 25, 2019
Tweet
Share
More Decks by asmz
See All by asmz
React Native+Expoで始めるWebフロント開発
asmz
0
230
UIデザインを考える全ての人たちに捧げる Apple Human Interface Guidelinesのススメ
asmz
1
2.2k
Overview of Swift and iOS App development
asmz
0
1.2k
How to get mobile app logs using Firebase Crashlytics
asmz
0
830
OK Google, Deploy the iOS app
asmz
1
860
phpconsen LT
asmz
0
720
SWWDC 39
asmz
1
230
Create voice assistant app by Dialogflow
asmz
0
830
SWWDC 34
asmz
0
710
Other Decks in Technology
See All in Technology
CSS polyfill とその未来
ken7253
0
140
アプリケーションの中身が見える!Mackerel APMの全貌と展望 / Mackerel APMリリースパーティ
mackerelio
0
440
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.2k
金融システムをモダナイズするためのAmazon Elastic Kubernetes Service(EKS)ノウハウ大全
daitak
0
120
Roo Codeにすべてを委ねるためのルール運用
pharma_x_tech
1
220
人とAIとの共創を夢見た2か月 #共創AIミートアップ / Co-Creation with Keito-chan
kondoyuko
1
690
Data Hubグループ 紹介資料
sansan33
PRO
0
1.7k
オープンソースのハードウェアのコンテストに参加している話
iotengineer22
0
520
“新卒らしさ”を脱ぎ捨てて 〜1年を経て学んだこと〜
rebase_engineering
0
130
Houtou.pm #1
papix
0
660
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
大事なのは、AIの精度だけじゃない!〜1円のズレも許されない経理領域とAI〜
jun_nemoto
10
5.1k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Building Adaptive Systems
keathley
41
2.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
4 Signs Your Business is Dying
shpigford
183
22k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Typedesign – Prime Four
hannesfritz
41
2.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Thoughts on Productivity
jonyablonski
69
4.7k
Transcript
Adobe XD・Zeplin・Xcode連携で、 iOSアプリのデザイン実装フロー効率化 2019/02/25 仙台 Adobe XD Meeting #3 Akira
Shimizu / asmz
2 誰なのか? • Akira Shimizu / asmz (@_asmz) • https://asmz.beer/
• 株式会社ビデオマーケット 仙台オフィス • iOSエンジニア • 個人開発:IT勉強会検索アプリ「EVENTech」 ◦ https://eventech.asmz.beer/
今日話すこと
アプリ開発におけるデザイン実装フロー デザイン設計 デザイン共有 デザイン実装 • デザイナーさんにてデザイン設計、そのデザインをエ ンジニアへ共有し、エンジニアが実装 主にAdobe XDが活躍 本日お話しする範囲
デザイナー・エンジニア間の アプリデザイン共有
デザインの共有・連携方法 • ちょっと前までは... ◦ デザイン全体のイメージ画像・カンプ(PDFとかPNGとかJPGとか) ◦ 各パーツ画像切り出し(PNGとかJPGとか) ◦ カラーガイド・スタイルガイド(別ドキュメントで) よろ〜
あいよ SPEC
デザインの共有・連携方法 • 発生しうる問題 MarginとかFont weightとか色味 とか... 思ってたんと 違う... MarginとかFont weightとか色味
とか... なるほど、 わからん
デザインの共有・連携方法 • なぜなのか? ◦ バラバラに共有された情報を組み合わせるコスト ◦ レイアウトと各リソースの対応づけ見誤り ◦ そもそもデザイン指示に漏れ ◦
: →足りない部分は都合がいい方法で実装しがち →結果、手戻り
Adobe XDの デザインスペック
Adobe XDのデザインスペック • XDで作成したデザイン がそのまま指示書に! デザイン・スタイル指示の箇所とその指示内容 が一目でわかる!
Adobe XDのデザインスペック • スペックから直接画像 の書き出しが出来る! その箇所に対応する画像ファイルを別途探す必 要がない!
Adobe XDのデザインスペック • その他メリット ◦ デザイン変更によるファイル差し替え不要 ▪ デザインスペックの更新だけで済む ◦ 不明な点はデザインスペック上でコメント可
▪ 不毛なメールのやりとりが不要 これだけでも充分な機能だが…
Adobe XD・Zeplin・Xcode 連携
Zeplinとは • https://zeplin.io/ • デザインファイル共有ツール ◦ XDのデザインスペック機能に特化したようなツール • Web /
デスクトップアプリで動作 • 各種デザイン作成ツールに対応 ◦ Sketch, Adobe XD CC, Figma, Adobe Photoshop CC
Xcodeとは • Apple公式iPhone/iPadアプリ開発ツール
Xcodeとは • グラフィカルに画面レイ アウトを作成できる 「Inteface Builder」を内 包
連携方法(Adobe XD→Zeplin) • デスクトップアプリをインストールするだけ! これが増える
連携方法(Zeplin→Xcode) • Zeplin Extension追加 ◦ https://extensions.zeplin.io/
デザイン指示書 • 概ねXDと同レベル ◦ 画像書き出し ◦ コメント機能
スタイルガイド作成 • 画面から必要なカラーやスタ イルを追加することでスタイ ルガイドが作れる
画像リソース連携 • Zeplinの画像リソースをそのままXcodeプロジェクトへ!
画像リソース連携 ファイルをダウンロード→zip解凍→Xcodeプロジェクトへコピー、 みたいな作業が不要!
カラーパレット連携 • カラーパレットもそのままXcodeプロジェクトへ!
カラーパレット連携
コード生成 • Swiftソースコードも自動的生成
POINT・TIPS • アセット命名 ◦ カラー名やスタイル名はソースコードとしてそのまま利用されるため 「lowerCamelCase」で ◦ 画像やカラーが何を意味しているのかを命名 ▪ ❌
色:white, black 画像:leftTriangle, redCircle ▪ ⭕ 色:primary, accent 画像:playButton, recordingButton • iOSのベクター画像の扱い ◦ PDF形式が利用可能 ◦ Retina用の@2x、@3xファイルが不要になる
デザイン実装フローが どう変わるか
ちょっと前まで 画像差し替え です〜 あいよ ・画像差し替え →画像ファイル書き出し →リネーム →zip圧縮 →メール添付 →メール送信
・画像ダウンロード →zip解凍 →Xcodeアセットに追加
XDデザインスペック共有 画像差し替え です〜 あいよ ・画像ダウンロード →zip解凍 →Xcodeアセットに追加 ・アートボード更新
XD・Zeplin・Xcode連携 画像差し替え です〜 あいよ ・アートボード更新 ・画像取り込み(半自動) 手作業がほとんど入らない
まとめ
デザイン共有の重要性 「漏れなく、ムダなく」の意識 • 「デザイナー」「エンジニア」という職種の異なる人同士の やりとり ◦ 技術・文化などの違いがあるので、漏れなく • 手作業を極力減らし「仕組み化」 ◦
人間誰しも間違えることはある ◦ ここのコストはあまり工数換算されないのでムダなく
2019/02/25 仙台 Adobe XD Meeting #3 Akira Shimizu / asmz
Enjoy Creating!
34 [PR] 個人開発アプリのご紹介 • ITイベント・勉強会検索アプリ「EVENTech」 ◦ 実際のところはconnpassクライアント ◦ https://eventech.asmz.beer/