【Figma】オートレイアウトで簡単にボタンを作成する方法

こんにちは。仙人です。

今回は、Figmaのオートレイアウト機能で、ボタンを作成する方法について紹介します。

オートレイアウトを使うことで、テキストを入力しても、周りの幅に合わせて、上手に調整してくれます。

それでは紹介していきます。

Figmaでオートレイアウトを設定する方法

テキストボックスを作成（Tをタップして、テキストを入力）した後に、Shift+Aで、オートレイアウトを追加することができます。

マージン（幅）や、周りの色も調節することができます。

ボタンのようなアイコンを作る際、背景とテキストをオートレイアウトで設定すると、ボタン内の文字を入力する際に、周りの幅も調節してくれます。

①	Rをタップして、長方形を作成して、右上のHの下にあるカーブの値を調節して角を丸くする。
②	Tをタップして、テキストを入力する。
③	テキストを作成したボタンの、真ん中に持ってくる。
④	テキストとボタン背景の両方を選択して、Shift+Aを入力する。
⑤	テキスト周囲の幅を変更するには、ボタン背景をタップして、｜□｜のマークをタップして、幅を調整することができます。