コラム

こんにちは、ここです。

デザインが完成したと思ったら、せっかく配置した要素の内容が変わったり、ボタンの文言が変更になったりしたことってありますよね。そもそもデザインの段階では、どのような要素を掲載するのか未確定な場合もあります。そのたびに変更した要素に対して余白を調整するのは効率的ではありません。
今回は、要素の内容が変更されても余白を保ったままデザインできる、AdobeXDのスタック機能とパディング機能をご紹介していきます！

スタック機能の使い方

まず、スタック機能とは同じグループ内の要素同士の余白を管理する機能です。 スタック機能を有効にしたグループ内では、要素の修正や追加、並べ替えをした際にも指定の余白を保持したまま要素の編集をすることができます。

スタック機能は同じグループ内の要素に有効です。ですので、まずは余白を管理したい要素をグループ化します。
レイヤーパネル上でグループ化したい要素を選択し、右クリックのメニューから「グループ化」を選択、もしくはショートカットコマンド「Ctrl+G」(macの場合はcommand+G)を用います。
この時、レイアウト内の「レスポンシブサイズ変更」が有効になっているかどうかを確認してください。グループ化した時点で自動的に有効化されるのでほとんどの場合は問題ありません。

レスポンシブコントロール内にあるスタックにチェックをいれ余白の値を設定します。
スタックは垂直方向と水平方向が選択できます。また、グループ内に要素が二つ以上無い場合は適用されません。
余白の値の変更は入力欄から変更する方法と、ドラッグで変更する方法があります。ドラッグで余白を調整する場合、一箇所なら指定の箇所をドラッグしすべてに適用したい場合はShiftを押しながらドラッグします。

パディング機能の使い方

スタック機能で設定する余白は、要素の外側だったのに対して、パディング機能は内側（要素内）の余白を設定します。テキストの長さが異なるボタンを作成するときなど、同じ余白を持たせつつ内容や文言が変動する要素をデザインする場合に重宝する機能です。

スタック機能と同様に適用したい要素をグループ化し、レスポンシブサイズ変更が有効化されている必要があります。
レスポンシブコントロール内にあるパディングにチェックを入れるとパディング機能が有効になります。

パディング機能では余白の設定方法は2種類あります。4方向を一括で設定する方法と個別に数値を入力して設定する方法です。2つ並んでいるアイコンのうち左側を選択すると一括、右側を選択すると個別になります。
パディング機能で余白を設定すると、前面の要素に変更があった場合、自動的に背面の要素が変形されます。

デザインする上で、急な変更は避けられません。
余白が設定できれば柔軟に対応することができます。XDの様々な機能を活用していきたいですね。