Cooperate with Adobe XD, Zeplin and Xcode

Adobe XD・Zeplin・Xcode連携で、iOSアプリのデザイン実装フロー効率化

Talked at 仙台 Adobe XD Meeting #3

Transcript

1. Adobe XD・Zeplin・Xcode連携で、 iOSアプリのデザイン実装フロー効率化 2019/02/25 仙台 Adobe XD Meeting #3 Akira Shimizu / asmz
2. 2 誰なのか？ • Akira Shimizu / asmz (@_asmz) • https://asmz.beer/ • 株式会社ビデオマーケット 仙台オフィス • iOSエンジニア • 個人開発：IT勉強会検索アプリ「EVENTech」 ◦ https://eventech.asmz.beer/
3. 今日話すこと
4. アプリ開発におけるデザイン実装フロー デザイン設計 デザイン共有 デザイン実装 • デザイナーさんにてデザイン設計、そのデザインをエ ンジニアへ共有し、エンジニアが実装 主にAdobe XDが活躍 本日お話しする範囲
5. デザイナー・エンジニア間の アプリデザイン共有
6. デザインの共有・連携方法 • ちょっと前までは... ◦ デザイン全体のイメージ画像・カンプ（PDFとかPNGとかJPGとか） ◦ 各パーツ画像切り出し（PNGとかJPGとか） ◦ カラーガイド・スタイルガイド（別ドキュメントで） よろ〜 あいよ SPEC
7. デザインの共有・連携方法 • 発生しうる問題 MarginとかFont weightとか色味 とか... 思ってたんと 違う... MarginとかFont weightとか色味 とか... なるほど、 わからん
8. デザインの共有・連携方法 • なぜなのか？ ◦ バラバラに共有された情報を組み合わせるコスト ◦ レイアウトと各リソースの対応づけ見誤り ◦ そもそもデザイン指示に漏れ ◦ ： →足りない部分は都合がいい方法で実装しがち →結果、手戻り
9. Adobe XDの デザインスペック
10. Adobe XDのデザインスペック • XDで作成したデザイン がそのまま指示書に！ デザイン・スタイル指示の箇所とその指示内容 が一目でわかる！
11. Adobe XDのデザインスペック • スペックから直接画像 の書き出しが出来る！ その箇所に対応する画像ファイルを別途探す必 要がない！
12. Adobe XDのデザインスペック • その他メリット ◦ デザイン変更によるファイル差し替え不要 ▪ デザインスペックの更新だけで済む ◦ 不明な点はデザインスペック上でコメント可 ▪ 不毛なメールのやりとりが不要 これだけでも充分な機能だが…
13. Adobe XD・Zeplin・Xcode 連携
14. Zeplinとは • https://zeplin.io/ • デザインファイル共有ツール ◦ XDのデザインスペック機能に特化したようなツール • Web / デスクトップアプリで動作 • 各種デザイン作成ツールに対応 ◦ Sketch, Adobe XD CC, Figma, Adobe Photoshop CC
15. Xcodeとは • Apple公式iPhone/iPadアプリ開発ツール
16. Xcodeとは • グラフィカルに画面レイ アウトを作成できる 「Inteface Builder」を内 包
17. 連携方法（Adobe XD→Zeplin） • デスクトップアプリをインストールするだけ！ これが増える
18. 連携方法（Zeplin→Xcode） • Zeplin Extension追加 ◦ https://extensions.zeplin.io/
19. デザイン指示書 • 概ねXDと同レベル ◦ 画像書き出し ◦ コメント機能
20. スタイルガイド作成 • 画面から必要なカラーやスタ イルを追加することでスタイ ルガイドが作れる
21. 画像リソース連携 • Zeplinの画像リソースをそのままXcodeプロジェクトへ！
22. 画像リソース連携 ファイルをダウンロード→zip解凍→Xcodeプロジェクトへコピー、 みたいな作業が不要！
23. カラーパレット連携 • カラーパレットもそのままXcodeプロジェクトへ！
24. カラーパレット連携
25. コード生成 • Swiftソースコードも自動的生成
26. POINT・TIPS • アセット命名 ◦ カラー名やスタイル名はソースコードとしてそのまま利用されるため 「lowerCamelCase」で ◦ 画像やカラーが何を意味しているのかを命名 ▪ ❌ 色：white, black　画像：leftTriangle, redCircle ▪ ⭕ 色：primary, accent　画像：playButton, recordingButton • iOSのベクター画像の扱い ◦ PDF形式が利用可能 ◦ Retina用の@2x、@3xファイルが不要になる
27. デザイン実装フローが どう変わるか
28. ちょっと前まで 画像差し替え です〜 あいよ ・画像差し替え 　→画像ファイル書き出し 　→リネーム 　→zip圧縮 　→メール添付 　→メール送信 ・画像ダウンロード 　→zip解凍 　→Xcodeアセットに追加
29. XDデザインスペック共有 画像差し替え です〜 あいよ ・画像ダウンロード 　→zip解凍 　→Xcodeアセットに追加 ・アートボード更新
30. XD・Zeplin・Xcode連携 画像差し替え です〜 あいよ ・アートボード更新 ・画像取り込み（半自動） 手作業がほとんど入らない
31. まとめ
32. デザイン共有の重要性 「漏れなく、ムダなく」の意識 • 「デザイナー」「エンジニア」という職種の異なる人同士の やりとり ◦ 技術・文化などの違いがあるので、漏れなく • 手作業を極力減らし「仕組み化」 ◦ 人間誰しも間違えることはある ◦ ここのコストはあまり工数換算されないのでムダなく
33. 2019/02/25 仙台 Adobe XD Meeting #3 Akira Shimizu / asmz Enjoy Creating！
34. 34 [PR] 個人開発アプリのご紹介 • ITイベント・勉強会検索アプリ「EVENTech」 ◦ 実際のところはconnpassクライアント ◦ https://eventech.asmz.beer/