iPhone・Mac・ウェブサービス・文房具について「生活に活かせる実用的な活用術」を提供するメディア

XDでパディングを設定!テキストの長さに合わせて可変する要素の作り方

この記事のURLとタイトルをコピーする
xd-padding

例えばウェブサイトでボタンを作るとき、横幅を200pxで指定するのではなく、テキストの長さに応じて長さが変わるような書き方をするケースがあります。

XDでボタンを作るとき、普通に作ると、「ボタンの枠」と「テキスト」を組み合わせたてグループする形になります。

しかしこれだと、テキスト量が多くなるとボタンの枠をはみ出すため、枠の長さもいちいち変更しなくてはなりません。これはとても面倒です。

xd-padding_1

そこで今日は「テキスト量に応じて要素が可変(伸び縮み)させる方法」をご紹介します。ワイヤーフレームやデザイン制作に役立つと思いますよ。

xd-padding_3

グループにパディングを設定する方法

「テキスト量に応じて要素が可変(伸び縮み)させる方法」を、XDでの操作方法としては「パディング」と言います。

まず最初にボタンのデザインを作成します。四角ツールに枠線と影を入れてボタンを作り、その上にテキストを乗せます。

xd-padding_1

次にこの2つをグループ化します。ショートカットキーはcommandGです。

xd-padding_2

そうしたら右メニューの中の「レイアウト」から「パディング」を選び、これをオンにします。作業自体はこれで完了です。

xd-padding_3

パディング(余白)を変更する方法

パディング(余白)の空き具合を調整するときは、必ずグループ化したグループそのものを選択した状態にします。

xd-padding_4

すると右のメニューの「パディング」に数値が表示されます。

4つの数字は、テキストの上・右・下・左の余白を表した数値です。この数値を変更すると、テキストの周囲の余白が変わります。

xd-padding_5
xd-padding_2

上下左右の余白を個別に設定せず、共通で「周囲50px空ける」という場合は、アイコンの左側を選択します。

xd-padding_6

ボタンのテキストを変更してみます。すると、先ほど設定した余白の長さを守りながら、ボタンのデザイン自体が伸び縮みします。

xd-padding_3

テキスト量に応じて変更になるデザインを作りたいときは活用しましょう。

今日も来てくれて、ありがとうございます!

記事への感想や質問Twitterでいただけると喜びます。返信します。フォローはしなくてもいいけど、してくれたらもっと嬉しいです!

この記事のURLとタイトルをコピーする
当ブログの管理人
ばんか (bamka)
ばんか (bamka)ウェブディレクター・ブログ運営
iPhone・iPad・Mac。Evernoteなどのウェブサービス。ときどき文房具など。これらを使った『生活に活かせる実用的な活用術』をご提供しています。 管理人は当ブログの運営の他に、ウェブディレクター・ライター・セミナー講師など、いろいろな分野で活動しています。詳細は当ブログのプロフィールページをご覧ください。 各種仕事のご依頼も承っておりますので、ご希望の方はお問い合わせフォームからご連絡ください。
執筆著書
    SNSでフォローする