クリエイティブ

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

akihiro kamijo

04-02-2020

X X Logo LinkedIn LinkedIn Logo Facebook Facebook Logo Copy Copy to Clipboard

連載

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

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

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

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. pic.twitter.com/p5fSHyUUaQ

— Elaine Chao (@elainecchao)

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

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

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

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

— Elaine Chao (@elainecchao)

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

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

— Elaine Chao (@elainecchao)

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

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

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

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

— Elaine Chao (@elainecchao)

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

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

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. pic.twitter.com/7I6sYAKDSx

— Elaine Chao (@elainecchao)

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

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

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

— Elaine Chao (@elainecchao)

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

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

次回をお楽しみに！

クリエイティブUI/UX & Web