Adobe XDをもっと使いこなすヒント！第48回パディングを指定するレイアウト

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

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、パディングを指定するレイアウトに関連する6つのツイートを紹介します。

Tip 1. パディングをオンにする

#AdobeXD #ProTip Turn on padding for groups to set the relationship between elements in a group. Any change to one of the elements will maintain the relationship between them. @AdobeXD pic.twitter.com/p5fSHyUUaQ

— Elaine Chao (@elainecchao) February 24, 2020

グループやコンポーネントのパディングをオンにすると、グループの要素の周囲のパディングが固定されます。上の動画を見ると、パディングをオンにした状態では、グループ内の要素の大きさが変わると、周囲のパディングを維持するために、グループの大きさも同時に変わることを確認できます。

このように、コンテンツに合わせたレイアウトを行いたいときに利用すると便利な機能です。

Tip 2. パディングの初期値

#AdobeXD #ProTip If your padding is asymmetric when you turn it on, XD will maintain that fixed amount. @AdobeXD pic.twitter.com/d45UxBeJhh

— Elaine Chao (@elainecchao) February 29, 2020

パディングの初期値は、パディングをオンにしたときの値が使われます。上の動画のようにグループ内の要素が左に偏って配置されていれば、パディングをオンにした後も、要素には左寄せの配置が維持されます。

#AdobeXD #ProTip Link your padding together by selecting the linked padding icon. Padding will then be applied to all sides equally. @AdobeXD pic.twitter.com/uIRf3RL3hF

— Elaine Chao (@elainecchao) February 27, 2020

4つのパディングの値を同じにするには、上の動画のように、パディング欄の左側のアイコンをクリックします。その際のパディングの初期値には、上端のパディングに指定されていた値が使われます。

パディング欄の右側のアイコンをクリックすれば、4つのパディングを個別に指定できる状態に戻ります。

Tip 3. パディングの値を調整する

#AdobeXD #ProTip Both the padding icon and the visible padding on the canvas will show you which padding value you’re editing. @AdobeXD pic.twitter.com/GUCDRwyGNg

— Elaine Chao (@elainecchao) February 26, 2020

2つのアイコンの右側には、パディングの値を示すフィールドが配置されています。ここに直接値を入力して、パディングの値を変更することができます。

フィールドに入力中は、上の動画のように、カンバス上の対応するパディングがピング色にハイライト表示されて、どこが変更されているのかを知らせてくれます。また、フィールドの左側のアイコンの形も、それに合わせて変わります。

#AdobeXD #ProTip Adjust the value of the padding directly in the property inspector. Don’t forget that you can nudge up and down using the arrow keys, and Shift+up and down arrow keys to jump by a larger amount. @AdobeXD pic.twitter.com/7I6sYAKDSx

— Elaine Chao (@elainecchao) February 25, 2020

上下の矢印キーを使って値を変更することも可能です。Shiftキーを押しながら矢印キーを押すと、値を10ずつ変更することができます。

Tip 4. グループ内に要素を追加する

#AdobeXD #ProTip Padding will also work if you duplicate objects in the same container at the same level. @AdobeXD pic.twitter.com/b6F2eIH4v6

— Elaine Chao (@elainecchao) March 2, 2020

グループ内の要素を複製、あるいは追加した場合、両方の要素がパディングの対象になります。上の動画では、テキストを複製して、それを右に移動した時の様子を表しています。

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