01_Mac 02_アプリの使い方・活用方法

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

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

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

関連キーワードからさらに見る

\ この情報をシェアしよう! /

-01_Mac, 02_アプリの使い方・活用方法
-, , , ,

Copyright© あなたのスイッチを押すブログ , 2020 All Rights Reserved.