オンラインイベント「XD Trail 部屋キャンプ」の第一弾！
Adobe XD に興味があって、実際に簡単なデザイン作業を試してみたい人のために、シンプルなモバイルサイトのデザインおよびプロトタイプ制作の手順を全4パートにまとめたワークショップです。
ワークショップの内容
簡単なモバイルサイト（3ページ程度）を制作します。ワイヤーフレームから始めてスタイルを適用し、さらにインタラクションの設定と、デザインの共有を行います。
（詳細は、動画再生エリアの右側に表示されるタイムラインを参照してください）
【 1. ワイヤーフレームの作成】
XDの描画ツールやテキストツールを使って、ワイヤーフレームを作成します。
【 2. スタイルの適用】
ワイヤーフレームにスタイルを適用し画像を配置します。
【 3. プロトタイプの作成】
実際に画面遷移の操作ができるようにインタラクションを設定します。
【 4. コラボレーション】
画像の書き出しや共同編集によるデザイン作業を行います。
当日のQ&A
☆テキストのfont-family, font-sizeの継承ができないことが多いです｡テキストを選んで文字ツールでクリックしてから次のテキストを入力しようとするのですが､うまくいきません。
文字を選択しただけでは、次のテキスト入力にスタイルが引き継がれません。XDでは、最後にテキストのスタイルを「変更」したときのスタイルが記憶されます。よく使用する文字スタイルは、アセットパネルに登録しておくようにすると便利です。
☆カーニングはできますか？
Illustratorのようなカーニングは残念ながらありませんが、全体、もしくは、選択した文字間を調整することはできます。
☆よく使うショートカットキーを教えて欲しいです
- 選択したものを画面いっぱいに表示 →
Ctrl/Cmd+3 - リピートグリッド化 →
Ctrl/Cmd+R - シェイプでマスク →
Ctrl/Cmd + Shift + M - サイズ調整 →
Alt/Cmd＋矢印キー
をよく使います。ショートカットキーの一覧も参考に！
☆オーバーレイで開いた画面を閉じるにはどうすればいいでしょうか？
オーバーレイを設定したアートボードには、タップすると「前のアートボードに戻る」設定が自動的に行われます。そのため、たとえば、「閉じる」ボタンを押した時のみオーバーレイ表示した画面を閉じたいといった場合を除き、特に設定する必要はありません。
☆「ひとつ前のアートボード」のインタラクションでは、遷移する前の表示位置（クリックしたときに表示されていた位置）に戻すことはできますか？
こちらは現在はできません。
☆背景のぼかし具合や動きをつける部分（ホバーすると色が変わる等）などの情報はどのようにコーダーに共有するのが良いでしょうか？（デザインスペックでは共有できる部分に限りがあるようなので…）
ホバーを含むコンポーネントのステート関連の情報は、現在デザインスペックには表示されません。 コンポーネントのステートはすべてアセット用のアートボードに並べて伝えるという方法があります。 アニメーションの情報については、トリガーをタップで代用して共有することができます。
☆リピートグリッドで配置した画像を書き出すときの面倒さを解消できる方法はありますか？
リピートグリッドにドラッグ&ドロップで配置した画像は、リピートグリッドを解除しても書き出し対象として記録されているため、これを活用すると最初から設定をやり直さなくても済みます。