【Figma】オートレイアウトの使い方を理解する

オートレイアウトとは、要素の配置や間隔の調整を自動で行う機能です。

Figmaでよく使用する機能であるため、本記事ではオートレイアウトの使い方や活用例をまとめていきます。

オートレイアウトの基本

オートレイアウトは、要素を追加した状態でshift + Aで追加することができます。（もしくは右クリック→「オートレイアウトを追加」）

オートレイアウトを追加することで、要素に対する詳細な設定を行うことができます。例えば、四角の枠に対して以下を設定することで、文字量に応じて四角の幅が変わっていきます。

オートレイアウトの主な特徴は以下です。

特徴	内容
自動整列と配置	要素を自動的に整列させ、指定した方向（縦または横）に配置します。
間隔の自動調整	要素間の間隔を自動で調整し、均等に配置します。
レスポンシブデザイン	コンテナのサイズ変更に応じて、中身の要素を自動的に広げたり縮めたり、折り返したりすることができます。
柔軟なレイアウト	要素の数が増えても自動的にレイアウトを調整し、コンテナ幅に応じて折り返すこともできます。
ネスト（入れ子）構造	オートレイアウトのフレームを他のオートレイアウトフレーム内にネストすることで、複雑なインターフェースを作成できます。
サイズ指定	コンテンツ幅を「固定」「内包」「拡大」から選択でき、最小/最大幅や高さも設定可能です。
余白設定	要素間の間隔や、フレーム内の余白を細かく設定できます。

オートレイアウトの主な特徴

このように、オートレイアウトを使用することで、デザインの一貫性を保ちながら効率的にレイアウトを作成・調整することができるため、さまざまなシーンで役立ちます。

オートレイアウトの具体的な使い方や活用例を紹介します。

ボタンやフィルター内の文字量が変わっても、余白が維持される状態で作成することができます。

ボタンのオートレイアウトは、以下のように設定します。（例）

また、フィルターも同様に文字量に応じてフィルターの幅が変わるように設定することができ、追加時には等間隔で複製できます。

フィルターのオートレイアウトは、以下のように設定します。（例）

ヘッダーやフッター、タブメニューなど、テキストが均等に配置される場所でオートレイアウトを使うことで、文字量が変わってもテキスト同士の間隔を保つことができます。

また、順番の入れ替えもドラッグアンドドロップで簡単にできるため、非常に便利です。

ナビゲーションのオートレイアウトは、以下のように設定します。（例）

オウンドメディアやサービスサイトなどでよくあるカードレイアウトでは、文字量に応じて可変できたり、要素を複製して一定間隔で数を増やすことができます。

オートレイアウトで要素を折り返すことで、画面幅に応じたレイアウトを作成することができます。

コンテナ幅にあわせて中身の要素が可変するレイアウトも作成することができます。

オートレイアウトの使い方や活用例について紹介しました。

オートレイアウトを使いこなせるようになることで、さまざまなレイアウトパターンにも柔軟に可変で対応できるため、トレーニングしていきましょう。