【入門編】【2024年最新】Figmaのオートレイアウト完全攻略！レスポンシブデザインの極意 – UI/UX・デザインツール活用バイブル

こんにちは。UI/UXエンジニアの「現場の知恵」をあなたに伝えに来ました。

デザインツールをただの「お絵描きソフト」だと思っていませんか？もしそうなら、今日その認識を捨てましょう。現代のプロダクト開発において、Figmaは「ブラウザ上で動くコードの設計図」です。

その心臓部こそが、今回解説する「オートレイアウト（Auto Layout）」。

「要素を並べるのが楽になる機能でしょ？」……いいえ、違います。オートレイアウトを極めることは、CSSのFlexboxを操るエンジニアと同じ思考を手に入れ、「デバイスサイズが変わっても壊れない、強固なデザインシステム」を構築することを意味します。

これから、初心者のあなたが「明日から現場で無双できる」レベルまで、オートレイアウトの真髄を丁寧に、かつ濃密に伝授します。準備はいいですか？

—

1. なぜ「オートレイアウト」が最強の武器なのか？

従来の「座標で配置するデザイン」は、テキストが変わるたびに四角形のサイズを手動で調整し、要素が増えるたびに手作業で間隔を詰め直す必要がありました。これは「作業」であって「設計」ではありません。

オートレイアウトを導入すると、以下の魔法がかかります。

自動伸縮: 文字数が増えればボタンが勝手に伸びる。
秩序の維持: 要素を入れ替えても、設定した余白（Gap）が寸分狂わず維持される。
レスポンシブ対応: 画面幅を変えるだけで、要素が自動で折り返され、レイアウトが再構築される。

エンジニア視点で言えば、これは「デザインと実装（CSS）の乖離をゼロにする」行為です。

—

2. 【セットアップ】最初の一歩、”Hello Auto Layout”

まずは、最も基本となる「ボタン」を作ってみましょう。これがすべてのコンポーネントの最小単位です。

手順

1. テキストを書く: `T`キーを押して「Click Me」と入力します。
2. オートレイアウトを適用: テキストを選択した状態で `Shift + A` を押してください。

これが魔法のショートカットです。

3. スタイリング:

右サイドバーの「Fill（塗り）」で色をつけます。
「Selection colors」などで文字色を調整します。

ここが「設計」のポイント

右サイドバーのオートレイアウトパネルを見てください。

Padding (余白): 上下左右の余白を数値で管理します。これはCSSの `padding` そのものです。
Alignment (整列): ボックス内のどこに配置するかを決めます。

これで、テキストを「送信」に変えても「詳細はこちらをクリック」に変えても、設定した余白を保ったまま背景が自動で伸び縮みするボタンが完成しました。

—

3. 三大要素「固定・抱擁・充填」を理解する

オートレイアウトを使いこなせるかどうかの分かれ道は、「リサイズ（Resizing）」の理解にあります。

現場での極意：
親要素を「Fixed」や「Fill」にし、子要素を「Fill」に設定する。この連鎖を作ることで、ブラウザの幅を広げた時にググーッと伸びるレスポンシブな画面が出来上がります。

—

4. 【2024年の目玉】Wrap（折り返し）機能を攻略する

以前のFigmaでは、スマホ版とPC版で要素の並び（横並び⇔縦並び）を変える際、手動で設定を切り替える必要がありました。それを過去のものにしたのが 「Wrap」 です。

実践：レスポンシブなカードリスト

1. カード型のコンポーネントを3つ作ります。
2. 3つ選んで `Shift + A` でオートレイアウト化します。
3. 方向（Direction）のアイコンから 「Wrap」 を選択します。
4. Min Width（最小幅）を設定する:

各カードを選択し、幅の設定から「Add min width」を選択。例えば `300px` と入力します。

何が起きるか？
親フレームの幅を狭めていくと、カードが `300px` を維持できなくなった瞬間に、自動で下の段へ「カシャン」と落ちます。 まさにモダンなWebサイトの挙動そのものです。

—

5. ネスト（入れ子）の極意：複雑なUIを解剖する

一つのオートレイアウトで全てを作ろうとしてはいけません。「小さなオートレイアウトを組み合わせて、大きな構造を作る」のがプロの鉄則です。

例えば、SNSの投稿カードを作るなら：
1. 【アイコン】と【名前】を横並びのオートレイアウトにする。
2. 【1】と【投稿本文】を縦並びのオートレイアウトにする。
3. 【2】と【フッターのアクションボタン】をさらに縦並びにする。

このように「意味の塊」ごとにネストすることで、修正に強く、開発者が構造を理解しやすいデザインデータになります。

—

6. 開発者へバトンを渡す「Dev Mode」への配慮

あなたがオートレイアウトを駆使して作ったデザインは、エンジニアにとっての「宝の地図」です。

命名に魂を込める: `Frame 1243` ではなく `Card_Container` と名付けましょう。
Gapのルール化: 8px, 16px, 24pxなど、デザインシステムに基づいた一貫性のある数値を使います。

Figmaの Dev Mode を開いてみてください。あなたがオートレイアウトで組んだ設定は、そのまま `display: flex;` や `gap: 16px;` といったコードとして表示されます。これこそが、現代のデザイナーに求められる「実装を意識した設計力」です。

—

最後に：手を動かすあなたへ

オートレイアウトは、最初は少し理屈っぽくて難しく感じるかもしれません。しかし、これをマスターした先には、「一度作れば、どんなデバイスにも適応し、修正も一瞬で終わる」という至福の開発体験が待っています。

まずは今日、手元のボタン一つから `Shift + A` を始めてみてください。その小さな一歩が、世界に通用するプロダクトデザイナーへの大きな一歩になります。

「これ、どうやって組むのが正解ですか？」という疑問が湧いたら、いつでも戻ってきてください。現場の知見は、常にここにあります。

さあ、キャンバスを広げて、未来のUIを設計しましょう！