Figma勉強ノート・オートレイアウト機能解説
こんにちは！hamaです。
今回は、Figmaのスキルをさらに向上させるため、Figma特有のオートレイアウト機能について勉強ノートとしてまとめました。この機能を使いこなせるようになると、デザインの効率が大幅にアップします！
最近、Figmaのアップデートでボタンの位置や設定方法が一部変更されたので、今回は最新情報をもとに解説していきます。それでは始めましょう！
オートレイアウト（Auto Layout）とは？
オートレイアウトは、名前の通り、フレーム内の要素を 規則的に並べたり、自動でサイズを調整 したりできる機能です。例えば、以下のような場面で役立ちます：
ボタンのテキストを変更しても、自動で幅が調整される。
横幅を変えても、カードデザインなどが崩れない。
異なるデバイスでのデザインにも対応しやすい。
さらに、フレーム内の要素に合わせてフレームサイズを自動で変更したり、逆にフレームのサイズに合わせて要素のサイズを変更することもできます。
オートレイアウトの基本操作
それでは、文字数に応じて幅が自動調整されるボタンを作りながら、オートレイアウトを実際に説明します。
ボタンを作る
まずはテキスト「❖」「コンポーネン」とボタンっぽい長方形フレームを作成します。
※テキストの位置は勝手に置く！（オートレイアウトに任せましょう！）
オートレイアウトを追加
2つの要素を重ねた状態で、すべての要素を選択します。
右クリック > 「オートレイアウトを追加」をクリック。
ショートカットキー
Shift + A
オートレイアウトの並べ方とや間隔を調整
ボタンを選択すると、右側のプロパティパネルに「オートレイアウト」セクションが表示されます。このセクションで設定を調整することで、ボタンらしいデザインに仕上げることができます。
基本的な設定項目は以下の通りです：
並べる方向の指定（縦・横・折り返し＊）
並べた時の要素同士の間隔の指定
並べた時の要素のアラインの指定（上下左右・中央）
フレームに対する余白の指定（上下左右）
＊フレーム内の折り返し設定
「アイテムを折り返す」を押すと、指定した幅に収まらない場合でも、要素が下段に移動します。
サイズの調整
「オートレイアウト」セクションの「サイズ変更」項目で、「W」（幅）や「H」（高さ）をクリックすることで、ボタンのサイズを細かく調整できます。
固定
「W」や「H」に数値を指定でき、それらの数値がそのまま幅や高さとなります。バウンディングボックスを変更した場合もこの設定になります。
コンテンツを内包
「W」や「H」に数値を指定することができません。テキストであればテキストの幅（高さ）と水平パディング（垂直パディング）を合わせた幅（高さ）になります。右サイドバーの表示上では「内包」の表記となります。
最小・最大幅の設定
「最小幅」や「最大幅」を設定することで、要素が極端に細くなったり広がりすぎたりするのを防ぐことが可能です。特にレスポンシブデザインを考慮したボタン作成で役立ちます。