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