XDの機能活用-スタックとパディング-

弊社では主にxdを使用してWEBページのデザインを作成していますが、最近使用しているXDオススメの機能を紹介します。

その機能とは「スタックとパディング」です。

まずはパディングについて。
こちらはグループ化したオブジェクトに任意のパディングを設定できます。
オブジェクトの幅や高さを変更してもパディングは維持されたままなので、たとえばボタンの文字調節などの作業が後から入ってきても、手動でオブジェクトを可変する必要がありません。

参考:https://helpx.adobe.com/jp/xd/help/create-dynamic-designs-with-stacks.html

次はスタックについて。
まずスタックしたいコンテンツ群をグループ化します。その後、「プロパティインスペクター」にある「スタック」にチェックを入れれば完了です。
スタックの設定は縦軸・横軸があり、どちらかにチェックを入れた状態で動かしたいオブジェクトを選択して動かすと、選択した方向に自由に入れ替えが可能となります。
また、スタック内のコンテンツ間の余白などにカーソルを当て、キーの「S」を押しながら動かすことで余白も自由に調整できます。shift+Sを押すことで全ての余白を均一に調整する事も可能です。

参考:https://helpx.adobe.com/jp/xd/help/set-fixed-padding-for-components-groups.html

上記二つの機能を活用すれば、コンテンツが追加で入ってきた際やFB後の余白の調節・コンテンツの入れ替えなどの作業が短縮できます。

ただ、グループ化を解いてしまうとスタックやパディングは解除されますので、注意です。

WEBの案件はコンテンツの追加やこまめな修正なども多いと思いますので、こういった便利機能を使いこなして
無駄な作業を削り、デザインやUIのブラッシュアップなどに時間を割いていけると嬉しいですね。

さらなるXDの進化に期待です。