Adobe XD・Zeplin・Xcode連携で、iOSアプリのデザイン実装フロー効率化
はじめに
もう先月の話になりますが、Adobe XDのユーザーグループが開催しているAdobe XDやUI/UXに関わる勉強・交流会「仙台 Adobe XD Meeting #3（今は名前変わってAdobe XD ユーザーグループ仙台 ）」に参加してきまして、LT枠でちょっとだけお話ししてきました。
今日はこちらで喋ります～ - 仙台 Adobe XD Meeting #3 https://t.co/tm2CAFUPhC #xdug #xdug_sendai
— asmz (@_asmz) 2019年2月25日
Adobe XDはアプリの簡単なワイヤーフレーム的なやつとその画面遷移を作ったくらいしか経験なくて、どちらかと言うと社内のデザイナーさんがXDでゴリゴリ作ったアプリUIデザインを共有してもらい、自分はXcodeで本実装と言うのをやってました。
なので、XDの便利な使い方とかはそんなに話せないけど、そこからアプリに本実装するまでの流れとかをiOSエンジニア観点で話すことはできるかな、と思い今回LTに手を上げてみました。
話したこと
こちらです。
POINT
- デザイナーさんでデザインを作ってもらった後、何らかの方法でエンジニアに共有する必要がある
- デザイン共有において手作業が多いと、お互いコストがかかるしコミュニケーションロスも発生しやすく、結果手戻りになる場合がある
- XD、Zeplin、Xcodeを連携することで、デザイン共有作業から極力手作業は排除
- 「デザイナー」「エンジニア」という違う職種間のやりとりであり、お互いの文化も異なるので、デザイン共有は漏れなく無駄なく
補足
なんか途中からXDと言うよりZeplinの宣伝みたいな感じになってしまった。。
Adobe XDのデザインスペックも、ちょっと前まではコメント機能や画像書き出し機能は無かったらしいですが、UserVoiceをどんどん取り込んで機能追加されているようなので、今後Zeplinを介すことなくより密に開発者ツールと連携できるようになることを期待しています。
当日の勉強会について
自分は完全にXD初心者として参加していたこともあり、本セッションであるまつえりさんの「コツを押さえてもっと時短！Adobe XD使いこなしレシピ」は、目からウロコなTIPS満載でとても有意義でした。
大阪のXDユーザーグループ主宰のまつえりさんのセッション。
— asmz (@_asmz) 2019年2月25日
XDのサンプルデータを事前に用意してくれていて、実際にXD操作をスクリーンで見せながらTIPS紹介。わかりやすい…！ #xdug #xdug_sendai pic.twitter.com/OFKkHi4V9G
XDで遷移アニメーションだけでなくマイクロインタラクション的なのも作れるのか。#xdug #xdug_sendai
— asmz (@_asmz) 2019年2月25日
Googleスプレッドシートからリピートグリッドのダミーテキスト作れるやつ、めっちゃ便利では #xdug #xdug_sendai
— asmz (@_asmz) 2019年2月25日
また、今回はXDユーザグループということで、いつもと違ってデザイン系やディレクター系の人とお話しすることができたのもおもしろかったですね。
追記：XDユーザグループのオフィシャルページに今回のイベントレポートが載ってました。当日の雰囲気などこちらでご確認ください〜
おわりに
LT発表前にアルコール入れてしまい、発表で自分が思ってるより舌が回らなかったことを深く反省いたします。。
