オンラインイベント「XD Trail 部屋キャンプ！」2回目の中級編は、Adobe XD を利用していて、より効率的な使い方を学びたい人のために、開発者がもらってうれしいデータのつくり方のあれこれをまとめたワークショップです。
ワークショップの内容
開発者が実際に苦労している点を紹介し、それぞれを解決するためのアプローチの例を紹介します。
（詳細は、動画再生エリアの右側に表示されるタイムラインを参照してください）
【 1. 開発者が嬉しいパーツをつくる】
アイコンなどのパーツ制作で気をつける点を確認し、開発者が嬉しいデータ作りを学びます。
【 2. 開発者が嬉しいレイアウトをつくる】
レイヤーや余白の管理方法など、XD でレイアウトするときに気をつける点を確認し、開発者が嬉しいデータ作りを学びます。
【 3. 開発者が嬉しい開発用データをつくる】
デザイナーから開発者へデータを渡す際に気をつける点を確認し、開発者が嬉しいデータ作りを学びます。
当日のQ&A（XDの使い方についての質問編）
☆レスポンシブデザインを行うとき、アートボードはどのように並べるのがお勧めでしょうか？
同じページのデザインをデバイス別に（例：PCとSPを）横に並べます。デザイン時に効率的に作業できるのはもちろん、開発者からも横並びが嬉しいとの意見がありました。
☆デザインファイルは、1つのサイトで1ファイルが基本ですか？ページごとに分ける場合もありますか？
基本的には1ファイルに収めます。ただし、大規模サイトの場合はコンポーネントを分けることもあります。またアートボードの数やデータサイズの問題で分けることもあると思います。
☆アイコンの下に透明な四角を配置するときに、意図しない整列になりました。イラストレーターのように、キーオブジェクトを選択出来ないのでしょうか?また、図形のサイズ変更時に、基準点は設定出来ますか?
XD用プラグイン Singariを使用することで解決できるかもしれません。
https://sttk3.com/blog/tips/xd/singari.html
☆四角を透明にするならレイヤーの順番を入れ替えなくても大丈夫？
操作性や開発者のことを考えると、デザインと同じようにアイコンの下に配置することをおすすめします。
☆下に四角を置いたアイコンをグループとして書き出すとサイズが揃うのですか？
はい。サイズを揃えることができます。
☆改行のないテキストを入力する時、行間の設定を忘れてしまい、あとで困ることがよくあります。これを防ぐうまい方法はありますか？
新規でテキストを作らず、アセットを適用するか、すでにある文字を複製して作業します。
☆linehightを考慮したいのですが、フォントによって余白が効かないものがあるのですが、、
フォントによっては、フォント自体が持っている余白が含まれてしまいます。 どうしても余白をリセットしたい場合は、MaskTextというプラグインでマスクをかけることができます。
☆Photoshopのようにレイヤーフォルダを一括で閉じたり開いたりしたいのですがXDではまだできない認識で合ってますでしょうか？
残念ながら現在は対応していません。
☆タグ追加の際、テキストに合わせて白い背景がきちんと伸びてくれるのはどうやってつくっているのですか？
パディングを使うと自動的に背景を伸ばせます。
☆３点リーダーを下揃えにできますか？
フォントによって3点リーダーの位置がことなります。XDの機能としてはありません。
☆「スクロール時に位置を固定」ですが、製作中に新しい要素がどんどん上に重なってしまい、プレビューを見る度に毎度最前面にする作業が手間になっています。レイヤーパネルでも最前面に固定とかできますか？
最前面に固定という機能はないため、常にレイヤーの一番上に配置することになります。
☆リピートグリッドで製作した要素に、テキストファイルやナンバリングした画像を流し込んで重宝していましたが、コンポーネントを要素としたリピートグリッドでは、流し込みに対応できないのでしょうか？
コンポーネントは流し込みができません。状況によってリピートグリッドと使い分けると良いです。
当日のQ&A（開発者への質問編）
☆開発者に渡すデータにデザイナーがマウスオーバーなどのアニメーションの指定をすることについてはどう思っているのでしょう？
開発者はデザイナさんがアニメーションを付けてくださると嬉しいです！ ボタンをクリックするときの操作の心地よさはユーザー体験（UX）の向上に繋がります。アニメーションはデザインの一部としてセットで考えてクオリティが担保できます。サイトの方向性や ゆっくりした感じ、キビキビした感じなどデザインイメージなど、 具体的なヒントをいただけると、エンジニアからアニメーションを提案しやすいです。
☆開発者として、XDデータをどのように共有されると嬉しいですか？
開発する立場としては、Xdデータをクラウド共有でいただけると嬉しいです。 理由は2つありまして、 1つ目の理由は、クラウドですと常に最新のデータを複数人で簡単に共有できる。 2つ目の理由は、画像書き出しやコーディングの際にレイヤーを表示・非表示することがあるためです。ご参考にお願いします。
☆使っていない色がいっぱいアセットされてるのって、開発者的には困りませんか？
アセットは使っている色だけにしていただけると、迷わずにすむので助かります。
☆開発者もXDの使い方を知ってる前提なのでしょうか？そのほうがベストなんでしょうかね。開発者はどのくらいわかっておくべきでしょうか？
開発する際に機能を知っている方が良い場合があります。XDは直感的に使えるのが良い点ですが、部屋キャンプの動画を見るといろんな使い方を知ることができます。