【AdobeXD】パディングを応用したコンポーネント作成

こんにちは、シキラボのデザイナーでXD大好きなyuhです。
今回は、Adobe XDのパディング機能を使用したコンポーネント作成について書いていきたいと思います。

パディング

パディングは、グループ内の周囲の余白を固定する機能です。
この機能をオンにすると、グループ内の要素の大きさに変化が起きても、
固定した数値の幅の余白を常に保ってくれます。

ボタンやカード等、中のコンテンツに合わせて
背景の大きさを自動で変更して欲しい時に便利です。

パディングをオンにした際に余白の数値は自動的に取ってくれますが、
勿論後からでも変更できます。
上下左右全て同じ数値にしたい、全て個別に設定したい等の設定は
アイコンで切り替えることができます。

上の画像は、パディングを設定する際に個人的に分かりやすいとかなと思うレイヤー構造です。
簡潔に言うと、
1.「背景」と「それ以外」の２つのフォルダに分ける
2.２つをグループ化したものにパディングを設定する
です。
こうすることで「要素」の変化に応じて「背景」を自動的に変えられる、という事が
分かりやすくなります。
「背景」は四角形など単一のオブジェクトだけではなく、
背景の要素をひとまとめにしたフォルダでも問題ない、というところが応用のポイント。

それでは、実際にパディングを応用したコンポーネントを作成してみましょう！

パディングを応用したコンポーネント作成

今回は、テキストに応じて変化するコンポーネントを作例として紹介します。

【テキスト＋ボーダーのコンポーネント】

レイヤー構成は単純ですが、ボーダーと一緒に塗り＆線が透明な長方形を一緒に入れるのがミソ。（画像では分かりやすいように青色にしています）
透明な長方形とボーダーをグループ化し、これを背景として使用します。
テキストと背景フォルダを更にグループ化して、パディングを適用。

これで、テキストに合わせてボーダーが変化するようになりました！

【吹き出しのコンポーネント】

基本形状を保ちつつ、サイズの変更と同時に
三角部分が常に中央に来るような吹き出しのコンポーネントを作ります。
一見先ほどより複雑に見えますが、構造は変わりません。

吹き出しのパスは、角丸と三角のシェイプを「合体」して作成します。
こうすることで、それぞれのパーツを別々に制御できるようになる為、
パーツが歪んだりすることなくサイズ変更が可能になるのです。

逆に三角部分を固定したい場合は、三角パーツのみ
右側のレイアウトで位置の設定をしましょう。

まとめ

パディングはもっと色々応用出来そうな気がするので、
より使いやすいコンポーネントの作成方法など今後も個人的に研究していこうかなぁと思っています。
効率よく仕事が出来たら楽しいですしね！
次回はスタック機能の小ワザ的なものを紹介できたら良いなと思います。
それでは、ここまで読んでいただきありがとうございました！