Webサイトの構成やデザインをXDで作成してみようかな？と検討中の方向けに、おすすめの機能や使い方をまとめています。
アートボードの準備
ポイント1：「表示領域の高さ」
まずはアートボードを新規作成。アートボードの大きさは簡単に伸び縮みさせることができます。
縦に伸ばしてみると、点線が現れました！この高さ＝表示領域の高さです。ファーストビューでどこまで表示されるのか、大体の目安がわかるので便利です。特に、SP版のサイトデザインや、アプリのUIデザインをする際に重宝しそうですね。
ポイント2：「グリッド」
Photoshopほど細かくガイドを引くことはできませんが、こんな感じのレイアウトグリッドを表示させることができます。
図形を描いてみよう
長方形と楕円が作成できます。作成した図形をダブルクリックすると、パスの変形ができます。
図形同士の合体や型抜きもできます。
複雑な図形や作り込みたいパーツはPhotoshopやIllustratorを使用したほうが良いですが、簡単なボタンなどはXDだけで作れますね。
とりあえず仮置きでパーツを配置しておきたい、というときに、さくっと作れて便利！
画像を配置する
作成した図形の上に、画像ファイルをドラッグ＆ドロップすると、図形が画像で塗りつぶされたような状態になります。
画像の大きさは自動で調整されます。
マスクをつくることもできます。マスクを掛けたい画像の上に図形をおいて、右クリック→「シェイプでマスク」を選択します。
画像の配置や大きさなど、任意で調整できます。
