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

Adobe XDをもっと使いこなすヒント！

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

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

#AdobeXD #ProTip Stacks are available for any group, and can be set on nested groups as well. Simply select the group and turn it on in the property inspector. @AdobeXD pic.twitter.com/XeOhjxCSZ3

— Elaine Chao (@elainecchao) July 31, 2020

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

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

#AdobeXD #ProTip Once in a stack, objects and groups on the same level of the group can be swapped just by dragging in the direction of the stack. @AdobeXD pic.twitter.com/xFjqqdziDs

— Elaine Chao (@elainecchao) August 3, 2020

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

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

#AdobeXD #ProTip With the stack selected, hover over any gap in the direction of your stack to adjust the padding between elements. @AdobeXD pic.twitter.com/kfTHpiRQDG

— Elaine Chao (@elainecchao) August 4, 2020

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

#AdobeXD #ProTip If you want the padding to be equivalent across each element of your stack, hold down shift while adjusting the padding to adjust them together. You can then adjust them independently afterward. @AdobeXD pic.twitter.com/ncuBd9SHG0

— Elaine Chao (@elainecchao) August 6, 2020

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

#AdobeXD #ProTip Hover works while you’re in the edit context, but if you’re outside of the edit context (have the group and not the contents selected), you can hold down the letter S to access the padding between elements in your stack. @AdobeXD pic.twitter.com/ZwLXwHMKON

— Elaine Chao (@elainecchao) August 10, 2020

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

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

#AdobeXD #ProTip Add elements to your stack by either drawing or pasting into it. All of your elements will be pushed in the direction of your stack (either horizontal or vertical) @AdobeXD pic.twitter.com/txGUT8c3Sq

— Elaine Chao (@elainecchao) August 5, 2020

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

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

#AdobeXD #ProTip The default direction of your stack is automatically calculated based on the content inside your group. You can then duplicate items inside the stack and resize them. @AdobeXD pic.twitter.com/inXxdlTXPM

— Elaine Chao (@elainecchao) August 7, 2020

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

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

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

次回をお楽しみに！