FigmaでUIを組む際、オートレイアウトは欠かせない機能です。
ボタンの余白調整から複雑なカードレイアウトまで、整然としたデザインを素早く構築できます。

しかし、通知バッジや閉じるボタンのように「要素の上に少し重ねたい」場面で手が止まったことはないでしょうか。
オートレイアウトの中にそのまま要素を追加すると、横のテキストや画像が押し出されて全体のレイアウトが崩れてしまいます。

そこで活躍するのが、Figmaの絶対配置（Absolute position）です。
本記事では、絶対配置の基本的な設定場所から、親フレームの伸縮に追従させる制約（Constraints）のルール、実務で頻出する3大パターンの作り方まで分かりやすく解説します。

なぜオートレイアウトで「重ねる」と崩れてしまうのか？

オートレイアウトは、Web標準のFlexbox（フレキシブルボックス）と同じ考え方で設計されています。
フレーム内の子要素に対して「横並び（水平）」または「縦並び（垂直）」の方向性を与え、一定の余白（Gap）を保って順番に並べるのが基本動作です。

この仕組み上、フレーム内にあるすべての要素はレイアウトの専有面積を持ちます。
そのため、アバターの右上に通知用の小さな赤丸を置こうとすると、オートレイアウトはその赤丸を「並列に並ぶ1つの要素」として認識し、隣のユーザー名テキストを横へ押し出してしまうのです。

絶対配置機能が実装される以前は、この課題を回避するために無理な工夫が必要でした。
バッジを配置するためだけに余計なフレームを何重にもネストしたり、マイナスマージンを使って強引に位置を戻したりしていた方も多いのではないでしょうか。

自分自身も過去の実務で、複雑にネストされたフレームを組んでしまい、後からの修正でデータ構造が破綻して手戻りになった経験があります。
絶対配置を活用すれば、不要なフレームのネストを排除し、極めてシンプルな構造で重ね合わせを実現できます。

Figmaの「絶対配置（Absolute position）」はどこにある？基本操作と有効化手順

絶対配置を使いこなす第一歩は、設定アイコンの正確な位置を把握することです。
機能自体は非常にシンプルですが、アイコンの場所が少し控えめなため、初見では見落としやすい位置にあります。

設定ボタンは、オートレイアウトフレーム内の子要素を選択した際、右サイドバーの「Frame」または「Position」プロパティの右上に表示されます。
四角形の上に十字のクロスヘアが重なったようなアイコンが目印です。

1. 重ねたい子要素を選択する: オートレイアウトフレーム内にあるバッジやアイコンを選択します。
2. 位置・サイズ指定欄を確認する: 右サイドバー最上部のプロパティ（X, Y, W, H）を見ます。
3. 「絶対配置」アイコンをクリックする: 欄の右上にある「四角と十字のアイコン（Absolute position）」をクリックします。

アイコンをクリックすると、その要素の枠線表示が通常の水色から青い点線（または制約ライン付きの枠）に変化します。
左サイドバーのレイヤーパネルでも、通常のレイヤーアイコンから「十字マーク付きのアイコン」に切り替わり、絶対配置が有効になったことが確認できます。

絶対配置をオンにした瞬間、その要素は親フレームの整列計算から完全に切り離されます。
キャンバス上でドラッグして好きな位置に動かしても、周囲のテキストやボタンが押し出されることは一切ありません。

また、位置の微調整は矢印キー（カーソルキー）で行えます。
Shift + 矢印キー で10px単位、矢印キー単体で1px単位で移動できるため、アバターのフチにぴったり重なる位置へ正確に配置できます。

レスポンシブでずらさない！「制約（Constraints）」の連動ルール

絶対配置を使った直後に最も多くの人が直面するトラブルが、「親フレームの横幅を変えたら、バッジが変な位置に取り残される」という問題です。
せっかくカードの右上にバッジを置いたのに、カード幅を広げるとバッジだけが左側に固定されたまま動かない現象が起きます。

このズレを防ぐ鍵となるのが、制約（Constraints）の設定です。
絶対配置を有効にした要素は、通常のオートレイアウト設定（FillやHug）ではなく、親フレームのどの端を基準に固定するかという「制約」によって位置が決まります。

右サイドバーの「Constraints」セクションを開くと、上下左右の固定位置を指定するボックスが表示されます。
意図した挙動を実現するために、配置したい場所に合わせて以下の基準を設定してください。

例えばカード右上に閉じるボタンを配置する場合、制約を「Top」かつ「Right」に設定します。
こうすることで、親フレームの横幅をどれだけ伸縮させても、常にカードの「右上端からの距離」が一定に保たれ、美しいレスポンシブ動作が維持されます。

また、親フレーム自体の設定が「Hug contents（中身に合わせる）」か「Fill container（親に合わせる）」かも確認しておきましょう。
親フレームが適切に伸縮する設定になっていれば、絶対配置された要素も意図した基準点に完璧に追従します。

実務で即効！絶対配置を使う3大定番パターン

ここからは、実務のUIデザインで絶対配置を日常的に活用する3つの定番パターンと、具体的な作成手順を紹介します。
いずれもコンポーネント化して汎用的に使い回せる設計です。

1. アバター・ベルアイコンの通知バッジ（右上固定）

ユーザーのプロフィールアイコンやヘッダーの通知ベルに、未読を知らせる赤いドットや数字バッジを重ねるパターンです。
ベースとなるアイコン自体をオートレイアウト化しておくと、最小限の手順で構築できます。

1. アバター画像を用意する: 40×40pxのアバター画像を配置し、フレーム化しておきます。
2. 通知ドットを作成する: 10×10pxの赤い円形シェイプを作り、白で2pxの枠線をつけておきます。
3. アバターのフレーム内に入れる: 作成したドットをアバターのフレーム内へドラッグします。
4. 「Absolute position」をオンにする: ドットを選択し、右サイドバーで絶対配置ボタンをクリックします。
5. 制約を「Top & Right」にする: Constraints（制約）で右上固定を指定します。
6. 右上の角へ配置する: アバターの右上端に少し重なる位置へ移動させます。

ドットの外側に親フレームの背景色と同じ色（白など）で2px程度の枠線（Stroke）をつけておくと、重なった境界がくっきりと見やすくなり、視認性が大幅に向上します。
アバターの画像が変更されても、バッジの重ね位置は常に右上に固定されます。

2. カード右上のフローティングアクション（お気に入り・閉じる）

プロダクト一覧カードの右上にお気に入り（ハート）ボタンを置いたり、モーダルカードの右上に閉じる（×）ボタンを配置する構成です。
カード全体を1つのオートレイアウトフレームで組みながら、ボタンだけを独立して浮かせる手法をとります。

1. カードの土台を組む: カード全体のオートレイアウトフレーム（縦並び・Padding 16px等）を用意します。
2. アクションボタンを作る: 32×32pxの丸型ボタン（ハートアイコン等）を作成します。
3. カードフレーム内に入れる: ボタンをカードのオートレイアウト内へドラッグして配置します。
4. 「Absolute position」をオンにする: ボタンを選択し、右サイドバーで絶対配置ボタンを有効化します。
5. 制約を「Top & Right」にする: Constraintsで右上固定を指定します。
6. 右上の定位置に合わせる: カードの右上端から12pxや16pxの内側余白を開けた位置へ配置します。

この設計の大きなメリットは、カード内のテキスト本文が何行に増減しても、右上のボタン位置がコンテンツ量に影響を受けない点にあります。
タイトルが2行から3行に伸びても、お気に入りボタンは常にカード右上の定位置に留まり続けます。

3. ステータスタグ・リボンの重ね配置（左上はみ出し）

ECサイトの商品カードや記事カードでよく見られる、「NEW」「おすすめ」「SALE」といったラベルをカードのフチに重ねるパターンです。
カードの内側余白を無視して、少し外側へはみ出させるようなリッチな表現も簡単に作れます。

1. ステータスラベルを作る: テキスト・背景色・角丸を組み合わせた「NEW」などのラベルコンポーネントを作成します。
2. 対象カード内へ配置する: ラベルを商品カードや記事カードのフレーム内へ入れます。
3. 「Absolute position」をオンにする: ラベルを選択し、右サイドバーで絶対配置を有効化します。
4. 制約を「Top & Left」にする: Constraintsで左上固定を指定します。
5. カード角にはみ出して配置する: カードの左上角に合わせ、少し外側へはみ出るよう座標を調整します。

少し左上にはみ出させる場合は、X座標やY座標に負の数値（マイナス値）を指定するか、カードの左上角（X: 0, Y: 0）にぴったり揃えます。
絶対配置であれば、カード本体のパディング（内側余白）に干渉されることなく、狙った位置へ自由にレイアウトできます。

重なり順（Z-index）とレイヤー管理のポイント

絶対配置を使う際、もう1つ知っておくべき仕様が「重なり順（スタッキング順序）」のコントロールです。
配置したバッジが画像やテキストの下に隠れてしまい、表面に出てこないトラブルを防ぐ知識を押さえておきましょう。

レイヤーパネルの並び順と表示の優先度

Figmaでは、左サイドバーのレイヤーパネルにおいて「上にあるレイヤーほど画面の手前（前面）」に表示されるのが基本原則です。
絶対配置した要素が他のコンテンツの背面に隠れてしまう場合は、レイヤーパネルでその要素をフレーム内の最上位にドラッグして移動させてください。

また、オートレイアウトフレーム全体の設定としてCanvas stacking（キャンバスの重なり順）が存在します。
オートレイアウトの詳細設定（「…」アイコン）内にある「Canvas stacking」で、以下のいずれかが選択可能です。

• Last on top（デフォルト）: 後から並んだ要素（レイヤーパネルで下にある要素）が手前に重なる
• First on top: 先に並んだ要素（レイヤーパネルで上にある要素）が手前に重なる

通常はデフォルトのままで問題ありませんが、アバターの重ね合わせ表示などと併用する際は、この設定が意図した表示順になっているか確認してください。

エンジニア連携を見据えたレイヤー命名

デザインデータを開発チームへ引き渡す際、絶対配置を使った要素のレイヤー名が整っていると、実装が非常にスムーズになります。
Figmaの絶対配置は、CSSにおける position: absolute; と1対1で対応しています。

レイヤー名を単なる「Frame 12」や「Ellipse 4」のまま放置せず、badge-unread や btn-close のように役割が一目で分かる名前に整えておきましょう。
Dev Mode（開発モード）を参照するエンジニアも、親フレームに対する相対配置関係を迷わずコードへ落とし込めるようになります。

次のステップ：あわせて深掘りしたいFigma設計術

オートレイアウトの絶対配置を習得した後は、オートレイアウト全体の構造設計や、カードUIにおける情報設計をあわせて学ぶことで、コンポーネント設計の完成度が一段と高まります。

オートレイアウトの基本原則やネストの破綻を防ぐルールについては、以下の記事で体系的にまとめています。

Figmaオートレイアウト完全ガイド！崩れないネストと余白設計

オートレイアウトの基礎からネスト構造、余白設計までを体系的に解説した完全ガイド。

また、絶対配置を活用する代表格である「カードUI」の枠線・影・余白のバランス設計については、こちらの解説もぜひ参考にしてください。

カード型UIの設計ルール｜枠線・影・余白の使い分けと情報整理術

カードUIの枠線・影・余白の使い分けと、破綻しない情報設計のルールを徹底解説。

終わりに

最後までお読みいただき、ありがとうございます！

Figmaのオートレイアウトは、並列の配置だけでなく「絶対配置」と「制約」を組み合わせることで、真の柔軟性を発揮します。
通知バッジや閉じるボタンを無理なフレーム分割で作っていた方は、ぜひ今日から絶対配置を取り入れてみてください。

データの構造が非常にシンプルになり、日々のレイアウト調整や修正作業がスムーズになるはずです。

The post Figmaオートレイアウトの絶対配置｜バッジを崩さず重ねる実務設定 first appeared on デザペディア.

テキストの打ち替えやパーツ追加のたびに余白が崩れると、手作業による再調整が発生します。
オートレイアウトを活用すれば、コンテンツの増減に合わせてフレームが自動伸縮し、手動修正の工数を大幅に削減できます。

本記事では、実務で破綻しないオートレイアウトの基礎知識と、レスポンシブなネスト（入れ子）設計の手順を整理して解説します。

そもそもオートレイアウトとは？（通常フレームとの決定的な違い）

Figmaのオートレイアウトは、フレーム内の要素に対して規則的な並び順と余白ルールを適用し、コンテンツ量に応じてサイズを自動調整する機能です。
通常のフレームとの最大の違いは、「絶対座標（X, Y）」から「要素間の相対的な関係性」への変化にあります。

従来のグループや通常フレームは、キャンバス上の固定位置に要素を配置するため、文字数が増えても周囲のパーツは連動しません。
一方、オートレイアウトを適用したフレームは、テキストが増加するとフレームの高さが自動で拡張され、下部のパーツも自然に押し出されます。

この仕組みは、Webやアプリ開発におけるCSSの「Flexbox」と同様のレイアウトモデルに基づいています。
そのため、オートレイアウトを用いたデザイン設計は、エンジニアへの正確な実装意図の伝達に直結します。

オートレイアウトの適用と解除で使用する基本ショートカットキーは以下の2つです。

• オートレイアウトの追加: Shift + A
• オートレイアウトの解除: Option + Shift + A（Mac） / Alt + Shift + A（Windows）

要素を選択して Shift + A を実行すると、選択要素が即座にオートレイアウトフレームへ変換されます。
実務でUIパーツを作成する際は、要素を選択して Shift + A を適用する操作が標準的な手順になります。

なぜ実務で必須なのか？オートレイアウトを使う2大メリット

実務でオートレイアウトを使用するメリットは、主に「レスポンシブ対応の効率化」と「AI・MCP連携時の精度向上」の2点です。

① デザイナー視点：画面幅の伸縮やテキスト変更に柔軟に対応できる

Webサイトやアプリは、PC・タブレット・スマートフォンなど複数の画面幅で表示されます。
また、多言語展開などによってテキストの文字数が大きく変動するケースもあります。

オートレイアウトで構築しておけば、親フレームの幅を伸縮させるだけで、内部のカードやテキストが自動追従します。
画面幅ごとに個別のデザインをゼロから作り直す必要がなくなり、レスポンシブ検証の工数を削減できます。

② 開発・AI連携視点：MCPやCursorがレイアウト構造を正確に解釈できる

最近の実務では、MCP（Model Context Protocol）経由でFigmaのデザインデータをClaudeやCursorなどのAIツールに連携し、コードを自動生成する手法が普及しています。
この連携において重要になるのが、デザインの親子関係とレイアウト構造です。

座標のみで配置されたデータの場合、AIは要素同士の前後関係を推測できず、不要なタグが乱立したコードを出力しがちです。
適切にオートレイアウトが組まれていれば、AIはFlexboxの方向や余白サイズを正確に認識し、実務で再利用しやすいコンポーネントコードを出力できます。

Figmaレイヤー整理と命名規則｜AI実装とチーム開発で破綻しない設計ルール【2026】

Figmaでレイヤー名が「Frame 123」で散らかる悩みを解消！ClaudeやMCP、Cursor連携で破綻しない「AIレディ」な命名規則と整理ルールを徹底解説。コピペで使える実践ネーミング一覧とAI自動リネーム用プロンプト付き。

オートレイアウトを「使うべき場面・使わない場面」

オートレイアウトは有用な機能ですが、キャンバス上の全要素に適用する必要はありません。
用途に応じて、「使うべき場面」と「あえて使わない場面」を明確に切り分ける運用が実務に適しています。

オートレイアウトを使うべき場面

• ボタンやタグ・バッジ: ラベルとアイコン間の間隔（Gap）やPaddingを一定に保ち、アイコンの有無や状態（バリアント）の切り替えによる崩れを防ぐ
• 入力フォームや検索バー: 先頭・末尾のアイコン、プレースホルダー、クリアボタンなどの配置間隔を均等に保ち、親コンテナの幅に連動して伸縮（Fill）させる
• カードUI、記事リスト、ナビゲーションバー: 反復する要素を等間隔（Gap）で整列させ、項目の追加・削除や並び替えをワンアクションで行う
• レスポンシブな画面全体のレイアウト: デバイス幅の変更に合わせて、内部のセクションやカラムを自動で伸縮・再配置させる
• デザインシステムの共通アセット: チーム全体でパーツを再利用する際、手動調整によるレイアウトの崩れを防ぎ一貫性を担保する

あえてオートレイアウトを使わない場面

• 初期のアイデア出し・自由なブレスト: 構造や余白を固定せず、直感的にメモや参考画像を配置する段階
• イラストレーションやアイコン作成: 幾何学図形やベクターパスを自由な重なり順や角度で配置する場合
• キービジュアルや自由配置のコラージュ: 規則的な並び順ではなく、非対称に配置するグラフィック表現

まずはボタンやカードなど、規則的に並べるパーツから適用するのが扱いやすい進め方です。

オートレイアウトの「3大基本パラメーター」

オートレイアウトを適用すると、右側のプロパティパネルに専用の設定項目が表示されます。
基本となる設定は、「方向」「余白」「間隔」の3つです。

① 方向（Direction）：縦積みと横並びの指定

方向は、フレーム内の子要素をどの向きに整列させるかを決定する設定です。
UIの構成要素は、基本的に以下の2つの向きを組み合わせて設計します。

• 垂直方向（Vertical layout）: 要素を上から下へ縦方向に積み重ねます（記事リスト、入力フォーム、カードの上下パーツなど）。
• 水平方向（Horizontal layout）: 要素を左から右へ横方向に並べます（アイコン付きボタン、ナビゲーションメニュー、タグの並びなど）。

パネル上の矢印アイコン（↓ / →）を選択することで、いつでも向きの切り替えが可能です。

② 余白（Padding）：外枠と要素間のスペース

パディングは、オートレイアウトフレームの内側と、内部の要素との間に設ける余白です。
例えばボタンを作成する場合、ラベルテキストの上下左右に配置するスペースをこのパディングで定義します。

Figmaでは、上下・左右の一括設定と、4方向を個別に指定する方法を選択できます。
デザインの一貫性を確保するため、8の倍数（8px、16px、24pxなど）を基準とした数値設計が広く用いられています。

③ 間隔（Gap / Spacing between items）：要素間の距離

間隔（Gap）は、フレーム内に並ぶ要素同士の距離を指定する数値です。
リストアイテム間の距離や、ボタン内のアイコンとテキスト間のスペースを均等に保つ際に指定します。

間隔設定には、数値を指定する固定モードのほかに、「Auto（自動 / Space between）」設定があります。
Autoを指定すると、フレーム全体の幅や高さに応じて、子要素が両端に均等に離れて配置されます。

ヘッダーの左端にロゴ、右端にメニューボタンを配置するレイアウトなどで活用されます。

3つのリサイズ挙動（Hug・Fill・Fixed）の使い分け

オートレイアウトでレイアウト崩れが発生する主な要因は、親要素と子要素のリサイズ設定の不一致です。
Figmaでは、幅（W）と高さ（H）のそれぞれに対して3種類のリサイズ挙動を指定できます。

この3つの挙動は、言葉で理屈を追うよりも、実際にFigma上でテスト用のフレームを作り、親要素の端を左右にドラッグしてみるのが最も直感的に把握できます。
まずはそれぞれの役割と挙動の違いを整理します。

1. Hug contents（コンテンツを内包）

Hug contentsは、フレーム内部のコンテンツサイズに合わせて、外枠が追従して伸縮する設定です。
テキストの文字数に応じて、フレームの幅や高さが自動的に伸縮します。

• 主な用途: ボタン、ラベルタグ、ステータスバッジなど
• 特徴: パディング数値を維持したまま、中身のサイズに応じてフレームが動的に変化します。

2. Fill container（コンテナに合わせて拡大）

Fill containerは、親フレームの余剰スペースを埋めるように、子要素が自動で拡大する設定です。
レスポンシブな画面設計において中心となる挙動です。

• 主な用途: カード内の本文テキスト、全幅バナー、レスポンシブな入力フォームなど
• 特徴: 親フレームの幅を変更した際、内部の要素が連動して拡大・縮小します。

3. Fixed size（固定サイズ）

Fixed sizeは、中身のコンテンツ量や親フレームの大きさに関わらず、指定した幅や高さを固定する設定です。

• 主な用途: アイコン（例: 24×24px）、アバター画像（例: 48×48px）など
• 特徴: 親フレームの伸縮に影響されず、要素の寸法を維持します。

実務で参照しやすい推奨設定の組み合わせは以下の通りです。

設定で迷ったときは、親フレームの端をドラッグして伸縮させてみてください。
意図した通りに追従しない場合は、親要素と子要素のW/H設定（Hug / Fill / Fixed）を1階層ずつ確認します。
Fillに指定すべき要素がFixedやHugのままになっているケースが大半です。

破綻しない「ネスト（入れ子）構造」の組み立て手順

複数のパーツで構成されるUIは、最小単位の要素から順にオートレイアウトを組み、外側のフレームへネスト（入れ子）していく構造をとります。

ここでは、実務で頻出するメディアカードUIを例に組み立て手順を解説します。

Step 1: アイコンとラベルの最小パーツを作る（横並び）

アイコンと「保存する」というラベルテキストを選択し、Shift + A で横並びのオートレイアウトを適用します。
幅・高さともに「Hug」に設定し、要素間の間隔（Gap）を4pxに設定します。

Step 2: ユーザー情報ヘッダーを作る（横並び）

アバター画像（Fixed: 40×40px）とユーザー名テキストを選択し、Shift + A を適用します。
方向を水平（横並び）にし、ユーザー名テキストの幅を「Fill container」に設定します。
テキスト幅をFillにしておくことで、ユーザー名の長さに応じて柔軟にスペースが確保されます。

Step 3: タイトルと本文テキストをまとめる（縦並び）

見出しテキストと本文テキストを選択し、Shift + A で縦並びのフレームを作成します。
見出しと本文の両方の幅を「Fill container」に指定します。
幅をFillに設定することで、カード全体の横幅を変更した際にも文章が自動で折り返されます。

Step 4: 外枠フレームへ統合する

作成した各グループ（ヘッダー、画像、テキスト、ボタン）を選択し、再度 Shift + A を押して外枠フレームを作成します。
カードフレームの方向を垂直（縦並び）にし、内側のパディング（例: 16px）と要素間の間隔（例: 12px）を指定します。

内部に含まれる各グループの幅をすべて「Fill container」に切り替えます。
外枠フレームの幅を左右にドラッグして伸縮させ、内部の画像やテキストが追従して伸縮すれば設定完了です。

参考になる公式コンポーネントライブラリ（Material Design / HIG）

コンポーネントのレイヤー構成やネスト設計の参考として、公式のデザインシステムライブラリを活用するのが有効です。

Figma Communityでは、Google公式の「Material 3 Design Kit」や、Apple公式の「Apple Design Resources」が無償公開されています。
実際のコンポーネントのレイヤー構造を確認することで、実務で通用する設計手法を参照できます。

• Google Material Design 3: ボタンやダイアログにおけるPadding・Gapのルールや、ネスト階層の整理手法が確認できます。
  Figmaリンク: Material 3 Design Kit（Figma Community）
• Apple HIG (Human Interface Guidelines): ナビゲーションバーやリストアイテムなど、可変テキストに対応するレイアウト構造が参考になります。
  Figmaリンク: Apple Design Resources – iOS 18 and iPadOS 18（Figma Community）

自分自身も、新しいコンポーネントを設計する際はMaterial DesignやHIGのレイヤー構造をリファレンスとして確認しています。

応用テクニック（Wrapと絶対配置）

基本の整列とネストに加えて、レイアウトの柔軟性を高める2つの実務向け設定があります。

① 折り返し（Wrap）：幅に応じた自動改行

タグ一覧や検索フィルターのボタンなど、画面幅が狭くなった際に自動で複数行へ改行させたい場面があります。
このレイアウトには「折り返し（Wrap）」を使用します。

水平方向のオートレイアウトを選択した状態で「Wrap」アイコンを有効にします。
親フレームの幅を狭めると、収まりきらない子要素が自動的に下段へ回り込みます。

② 絶対配置（Absolute Position）：特定位置への固定配置

オートレイアウトフレーム内で特定の要素を重ねて配置したい場合、「絶対配置（Absolute Position）」を使用します。
カード右上のバッジや、モーダルの閉じるボタンなどが対象になります。

対象の要素を選択し、プロパティパネルのオートレイアウト項目右上にある「重なりアイコン」をクリックします（UI3環境では「Ignore auto layout / オートレイアウトを無視」アイコンとして表示されます）。
その要素のみがオートレイアウトの整列計算から除外され、自由な座標へ配置できます。
Constraints（制約）を「Right」「Top」に設定しておくことで、親フレームが伸縮しても右上の位置が固定されます。

実務でよくあるトラブルと解決策

実務で遭遇しやすいトラブルと、その対処手順をまとめました。

トラブル1: テキストを打ち替えると枠を突き抜ける

• 原因: テキストレイヤーの幅が「Fixed」になっており、自動折り返しの設定が外れているケースがあります。
• 対処法: テキストレイヤーの幅を「Fill container」に変更し、テキストパネルの折り返し設定を「自動高さ（Auto height）」に指定します。

トラブル2: 親フレームを広げても中身が横に広がらない

• 原因: ネスト階層内の子要素の幅が「Fixed」または「Hug」のまま残っていることが原因です。
• 対処法: レイヤー階層を順に確認し、横幅を連動させたい要素の幅をすべて「Fill container」に統一します。

トラブル3: アイコンが縦横に歪んで伸び縮みする

• 原因: ベクターデータに直接Fill設定が適用されているか、縦横比の固定が外れています。
• 対処法: アイコンを24×24pxなどの固定サイズフレームでラップし、そのフレームの幅・高さを「Fixed」に指定します。

次のステップ：あわせて参照したい関連記事

オートレイアウトで作成したコンポーネントをエンジニアへ正確に引き渡すための「Dev Mode」の活用法については、以下の記事で解説しています。
余白やリサイズ設定がCSSコードにどのように反映されるかを把握することで、開発チームとの連携がスムーズになります。

Figma Dev Mode（開発モード）の使い方と料金体系｜できること・できないことと実装連携【2026】

こんにちは！ UIデザイナーの自分（Yuny）です。 エンジニアの方にデザインデータを引き渡した直後、Slackで「ここ…

PaddingやGapの数値をデザインシステムとして共通化する場合は、Figmaの「Variables（変数）」との連携が有効です。
余白ルールを変数化することで、デザイン全体の整合性を保ちやすくなります。

Figma Variables（変数）の使い方｜バリアント肥大化を防ぐ2層トークンと命名規則【2026】

FigmaのVariables（変数）を活用すると、ライト／ダークモードの切り替えやスペーシングの動的変更がスムーズに実…

終わりに

オートレイアウトは、ボタンやタグなどの最小パーツから段階的に適用していくことで、実務への導入がスムーズになります。
要素間の余白や並び順をルール化しておくことで、画面サイズやコンテンツ量の変更に伴う手作業の修正工数を大幅に削減できます。

まずは日常的なコンポーネント設計から活用し、レスポンシブなUI設計に役立ててみてください。
それでは、良いデザインライフを！

The post Figmaオートレイアウト完全ガイド！崩れないネストと余白設計 first appeared on デザペディア.