Adobe XD

【Adobe XD】最小幅を持っているボタンの作り方

パディングを設定して作成したボタンは、中のテキストが短くなるとボタンの横幅が小さくなり過ぎてしまいます。

ボタンの最小幅を持たせることで、テキストが短い場合にボタンが小さくなりすぎない様にすることができます。

用意する素材


・ボタンのテキスト
・ボタンの最小幅(塗りなし、線なし)
・ボタンの背景

【手順1】テキストと最小幅をグループ化する

【手順2】ボタンの背景とグループ化して左右のみパディング設定する

【手順3】テキストが増えるとボタンが大きくなる

【2021/12/08追記】
「左右のパディングまで含めた幅=最小幅」となります。

 

以下のボタンからXDファイルをダウンロードできます。ご自由にお使いください。

min-width-btn.xd – ダウンロード