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

Creative Cloud UI/UX & Web

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

次回をお楽しみに!

POSTED ON 2020.04.2