FigmaのAuto Layoutガイド：レスポンシブなコンポーネント設計と実践テクニック

FigmaのAuto Layout機能は、コンポーネントをコンテンツに応じて自動的にサイズ変更・整列させるためのCSSのFlexboxに相当する機能です。Auto Layoutを適切に使うことで、テキストが長くなっても崩れないボタン・動的なリストコンポーネント・レスポンシブなレイアウトをFigmaで再現できます。本記事では、Auto Layoutのすべての機能と実践的な使い方を解説します。

Auto Layoutの基本概念

Auto Layoutとは：

フレームにAuto Layoutを設定すると、子要素を自動的に一定の方向（水平または垂直）に整列・配置します。コンテンツが増減してもレイアウトが崩れず、一貫したスペーシングが保たれます。

設定方法：

フレームを選択して Shift + A またはDesignパネルの「Auto Layout」ボタンで有効にします。

主要な設定オプション

Direction（方向）：

• 横（Horizontal）: 子要素を横並びに配置（CSSのflex-direction: row）
• 縦（Vertical）: 子要素を縦並びに配置（CSSのflex-direction: column）
• Wrap: 折り返し（CSSのflex-wrap: wrap）

Spacing between items（アイテム間のスペース）：

子要素の間隔をpxで設定します。「Space between（均等分布）」モードにすると両端に要素を配置して等間隔に並べます（CSSのjustify-content: space-between）。

Padding（内側の余白）：

コンテナの内側の余白を設定します。上下左右で個別に設定できます（Top/Right/Bottom/Left）。

Alignment（整列）：

子要素の整列（先頭・中央・末尾・ストレッチ）を水平・垂直で設定します。

Resizing（サイズ変更）の設定

Fixed（固定）：

コンテンツに関わらず指定サイズを維持します。Min/Max Widthと組み合わせると効果的です。

Hug Contents（コンテンツに合わせる）：

子要素のサイズに合わせてフレームが自動リサイズします。ボタンのようなコンポーネントにテキストを入れるとき、テキスト長に応じてボタン幅が変わります。

Fill Container（コンテナに合わせる）：

親フレームのサイズに合わせて伸縮します（CSSのflex: 1）。カードの中でテキストエリアがスペースを最大限に使うような設計に有効です。

Min/Max Width・Height

Auto Layoutのフレームに最小・最大幅を設定できます。

例: 「テキストに応じて広くなるが最低160px・最大400px」というボタン：

• Resizing: Hug Contents（Width）
• Min Width: 160
• Max Width: 400

これにより、ラベルが短くても最低幅を維持し、長くても限界を超えない柔軟なボタンが実現します。

ネストされたAuto Layout

Auto Layoutは入れ子にできます。カードコンポーネントの実装例：

Card（Vertical Auto Layout）
  ├── Image（Fixed 100%幅・Hug）
  ├── Content（Vertical Auto Layout, Padding: 16px）
  │    ├── Title（Text・Fill Container）
  │    └── Description（Text・Fill Container）
  └── Footer（Horizontal Auto Layout）
       ├── Price（Text）
       └── Button（Horizontal Auto Layout）

ネストを深くすることで、コンテンツが変化しても崩れない複雑なコンポーネントが作れます。

Auto LayoutとVariantsの組み合わせ

ボタンのVariantsにAuto Layoutを適用することで：

• ラベルが変わっても自動リサイズ
• アイコン付き/なしのバリアントを切り替えても整列が崩れない
• サイズバリアント（Small/Medium/Large）のPaddingをVariantで変える

の実装が可能になります。

よくある使い方

ボタンコンポーネント：

Horizontal Auto Layout、Hug Contents、Padding: 10px 20px、子要素: アイコン（任意・boolean property）+ テキスト、Spacing: 8px

リストアイテム：

Horizontal Auto Layout、Fill Container（Width）・Fixed Height、Padding: 12px 16px、子要素: アイコン + テキストエリア（Fill Container）+ アクション

タグ・チップ：

Horizontal Auto Layout、Hug Contents、Padding: 4px 12px、Corner Radius: 100px（丸め）、子要素: テキスト（Hug）

まとめ

Auto LayoutはFigmaでレスポンシブなコンポーネントを作るための核心機能です。方向・スペーシング・パディング・Resizingの設定を理解し、Min/Max Width・ネストを活用することで、エンジニアが実装したときと同じ挙動をFigmaで再現できるコンポーネントが完成します。UI ZUKANではFigma活用のUIサンプルを掲載しています。