Adobe XDをもっと使いこなすヒント! 第53回 スタックで簡単レイアウト

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、スタックを使った便利なレイアウト方法に関連する7つのツイートを紹介します。

Tip 1. スタックグループの作成

スタックは、グループ内のレイアウト変更をとても容易にしてくれる機能です。スタックを有効にするには、カンバス上のグループを選択し、プロパティインスペクタのレイアウトパネルに配置されているスタックのチェックボックスをオンにします。

Tip 2. スタック内のオブジェクトの移動

スタックが有効になったグループは、オブジェクトの順番の入れ替えがとても簡単です。グループをダブルクリックして編集状態にして、移動したいオブジェクトをドラッグすると、一度の作業で並び順を変更できます。並び替えるオブジェクトを一つひとつ位置合わせする必要はありません。

Tip 3. スタック内のホワイトスペース調整

スタックが有効な状態でカーソルをオブジェクトの間に移動すると、下の領域がピンクになります。そのままドラッグすると、オブジェクト間のパディングを調整できます。

全オブジェクト間のパディングを同じにしたい場合は、Shiftキーを押しながらピンクの領域をドラッグします。すると、すべてのパディングが同時に調整されます。調整後は全オブジェクトが等間隔に並ぶので、一部だけ変更したい場合は、後から個別に調整します。

グループが編集状態になっていなくても、グループを選択していればパディングを調整できます。ホワイトスペースにカーソルを移動して、Sキーを押しながらドラッグしてみましょう。

Tip 4. スタックへの新規オブジェクト作成

スタック内に新規オブジェクトを追加すると、その大きさの分だけ他のオブジェクトが押し出され、追加するオブジェクトのための領域が自動的に用意されます。追加後に、新しいオブジェクトのサイズ調整をしてみましょう。

Tip 5. スタックの重なりの向きを指定

スタックの向きは、機能を有効にすると自動的に判断され、縦か横が設定されます。スタックの方向を指定するアイコンをクリックすると、後から方向を変更できます。

上の動画では、縦方向のスタックが設定されているグループ内に横方向のスタックを利用してボタンを追加しています。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2020.08.27