このレッスンでは、Adobe XDの便利なレイアウト機能「パディング」と「スタック」を解説します。これらの機能を使うと、オブジェクトの間隔を揃える作業や、オブジェクトの並び順の変更を効率的に行えます。
Adobe XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
パディング
パディングは、グループ内の要素とグループ外枠の間のパディングを指定された値に保ってくれる機能です。たとえば、パディングが設定されているボタンの場合、中のラベルを変更すると、新しいテキストの長さに合わせてボタンのサイズが自動的に調整されます。
パディングの値は、上下左右を個別に指定できます。また、全てのパディングの値を揃えることもできます。
スタック
スタックは、グループ内の要素の並べ替えや、要素間の間隔の調整を支援してくれる機能です。
スタックが設定されているグループは、ドラッグするだけで2つの要素の並び順を入れ替えることができます。その際、要素間の間隔は維持されます。
また、スタックが設定されているグループは、要素間のパディングをドラッグ操作で調整できます。カーソルを要素間に移動すると、余白がピンク色にハイライトされます。そのままドラッグするとパディングを広げたり狭めたりできます。Shiftキーを押しながらドラッグすると、グループ内のすべてのパディングを一度に設定できます。
スタックの方向は縦方向と横方向から選べます。スタック設定時に自動的に方向が選択されますが、手動で方向を指定するためのアイコンがプロパティインスペクターに用意されています。