Figmaオートレイアウト完全ガイド2026！手動調整ゼロのレスポンシブデザイン術

「Figmaのオートレイアウトって何？使いこなせれば何がいいの？」と思っていませんか？実はFigmaのオートレイアウトを使えば、テキストが変わっても自動でボタンが伸び縮みし、要素を追加するだけでリストが自動整列されます。手作業での位置調整がほぼゼロになります。

この記事では、オートレイアウトの基本設定から、レスポンシブデザインへの応用まで、実務で使える手順を解説します。

オートレイアウトとは？

オートレイアウトとはフレーム内の要素を自動的に整列・間隔調整・伸縮させるFigmaの機能です。CSSのflexboxに近い概念で、コンポーネントと組み合わせることでレスポンシブなUIを直感的に作れます。

オートレイアウトの設定方法

方法1：ショートカット 要素を選択→Shift + A

方法2：右パネル フレームを選択→右パネルの「+」ボタン（Auto layout）をクリック

よく使うオートレイアウトパターン3選

パターン1：自動伸縮ボタン
テキスト＋フレームをオートレイアウト化→方向：横・Padding：上下12 左右24→フレームサイズをHug Contents→テキストを変えても自動でボタン幅が調整される

パターン2：等間隔リスト
複数カードを縦方向にオートレイアウト→Direction：Vertical・Gap：16→カードを追加/削除すると自動で等間隔になる

パターン3：レスポンシブ横並びレイアウト
3カラムをオートレイアウト→Direction：Horizontal・Gap：24・各カラムFill Container→画面幅が変わると各カラムが均等に伸縮する

「Hug + Fill + Fixed の3つを理解したらオートレイアウトは完全にマスターできます」

オートレイアウト活用による作業効率化シミュレーター

document.addEventListener(‘DOMContentLoaded’, function() {
function run5005() {
var a = parseFloat(document.getElementById(‘s5005a’).value) || 3;
var b = parseFloat(document.getElementById(‘s5005b’).value) || 30;
var daily = a * b / 100;
var r1 = Math.round(daily * 20 * 10) / 10;
var r2 = Math.round(r1 * 0.2 * 10) / 10;
var r3 = Math.round((r1 – r2) * 12 * 10) / 10;
document.getElementById(‘s5005-r1’).textContent = r1;
document.getElementById(‘s5005-r2’).textContent = r2;
document.getElementById(‘s5005-r3’).textContent = r3;
document.getElementById(‘s5005-result’).style.display = ‘block’;
}
var btn = document.getElementById(‘s5005-btn’);
if (btn) btn.addEventListener(‘click’, run5005);
var rst = document.getElementById(‘s5005-reset’);
if (rst) rst.addEventListener(‘click’, function() { document.getElementById(‘s5005-result’).style.display = ‘none’; });
});

よくある質問（FAQ）

Q1. オートレイアウトとグリッドレイアウトの違いは？

オートレイアウトはフレーム内の子要素を動的に整列する機能です。グリッドはフレームに重ねて表示するガイド線で、デザインの基準として使います。両方を組み合わせて使うのが一般的です。

Q2. オートレイアウト内の特定の要素だけ固定できますか？

はい。オートレイアウト内の要素に「Absolute Position」を設定すると、オートレイアウトの流れから独立して絶対位置で配置できます。フローティングボタンや右上の閉じるボタンなどに使います。

Q3. ネスト（入れ子）のオートレイアウトは使えますか？

使えます。縦方向オートレイアウトの中に横方向のオートレイアウトをネストすることで、複雑なカードレイアウトも完全に自動化できます。これがFigmaの真の威力です。

Q4. 既存のフレームにオートレイアウトを後から追加できますか？

はい。Shift+Aで既存フレームにも追加できます。ただし既存の手動配置が崩れる場合があるため、一度バックアップを取ってから追加することをおすすめします。