オートレイアウトとは？
一度、余白や間隔などを設定すれば、中の要素サイズが変わってもレイアウトが維持されるので非常に便利です。
要素の数が増えても、コンテナ幅で自動で中身の要素を「折り返す」こともできます。
▼要素が増えてもOK！▼
▼幅が変わってもOK！▼
また、コンテナ幅の変更により、中身を広げる&縮める、または折り返すこともできるので、より実践的なレスポンシブデザインが可能です。
▼中身を広げる&縮める▼
▼中身を広げる&縮める ＋ 折り返す▼
今回は、「オートレイアウト」の基本から応用までを、初心者向けにやさしく解説します。
オートレイアウトの使い方（基本）
オートレイアウトは、要素の「整列」「配置・間隔の調整」を自動で行う機能です。
本記事では、基本的なレイアウトの作り方を例に、初心者の方向けに順を追って解説します。
カード形式のレイアウトの作成
まずは、カード形式のレイアウトを例に、基本的なオートレイアウトの使い方を解説します。
step
1要素を選択する
長方形とテキストを適当な場所に配置し、どちらも選択します。
参考
長方形 ： W 280 × H 200
テキスト： Inter Bold / サイズ 26
step
2要素にオートレイアウトを適用する
要素を選択した状態で、右クリック > 「オートレイアウトの追加」を選択する
ショートカットキー
どちらも、shift + A
次に、付与されたフレーム名（画面例「Frame 1」）をクリックしてオートレイアウト化した要素全体を選択します。（長方形やテキストを選択すると個別に選択されてしまうので注意しましょう。）
今回は背景を白にするので、右サイドバーの「塗り」を選択し、カラーを白（#FFFFFF）に設定します。
step
3整列や間隔・余白を調整する
オートレイアウトを適用すると、右サイドバーに次のような「オートレイアウト」の項目が表示されます。
今回は、長方形とテキストを
- 「縦」に並べて「中央揃え」
- 要素間の余白を「10」
- 上下と左右の余白(パディング)を「10」
に設定するので、次のようにパネルを操作および入力をします。
ちなみに、要素間をドラッグしたり、パネルのアイコンをドラッグすることでも調整が可能です。
（要素間をクリックして表示されるウィンドウに数値を入力することも可能）
これで、オートレイアウト機能を使用したカード形式のレイアウトが完成しました。
オートレイアウトの使い方（応用）
応用として、オートレイアウトを適用した要素を複製して、さらにオートレイアウトを適用してみましょう。
3列のカードレイアウトの作成
今度は、前項で作成したカード形式のレイアウトを、さらにオートレイアウトを適用して数を増やします。
step
1要素をコンポーネント化する
まずは、オートレイアウトを適用した要素をコンポーネント化します。
要素を選択した状態で、上部ツールバー中央の 
マークをクリックしましょう。
ショートカットキー
- の場合は、option + ⌘ + K
- の場合は、Alt + Ctrl + K
step
2要素を選択する
次に要素を複製し、全てを選択します。
複製する時は、shift + option(Alt) を押しながらスライドさせるとスムーズです。
step
3オートレイアウトを適用する
要素を選択した状態で、右クリック > 「オートレイアウトの追加」を選択します。
ショートカットキー
どちらも、shift + A
step
4整列や間隔・余白を調整する
今回は、カード形式のレイアウトを
- 「横」に並べる
- 要素間の余白を「20」
に設定するので、次のようにパネルを操作および入力をします。
これで、複数のカード形式のレイアウトにオートレイアウトを適用することができました。
もし、修正を加える場合でも、step1で作成したメインコンポーネントを修正することで、修正内容を全体に反映することができます。
このように、Step1 ~ 3の手順を繰り返すことで、3 × 3 のカード形式のレイアウトの作成や、タイトルを追加したレイアウトの作成も可能です。
▼3 × 3 のカード形式のレイアウトの作成▼
▼タイトルを追加したレイアウト▼
オートレイアウトでボタンを作成する
オートレイアウト機能を使って、テキスト内容が変わっても余白が維持されるボタンを作成してみましょう。
step
1テキストを入力する
適当な場所に、ボタン内のテキストを入力し、選択した状態にします。
参考
テキスト： Inter Bold / サイズ 26
step
2要素にオートレイアウトを適用する
要素を選択した状態で、右クリック > 「オートレイアウトの追加」を選択します。
ショートカットキー
どちらも、shift + A
次に、付与されたフレーム名（画面例「Frame 1」）をクリックしてオートレイアウト化した要素全体を選択します。（テキストを選択すると個別に選択されてしまうので注意しましょう。）
今回は背景を緑にするので、右サイドバーの「塗り」を選択し、カラーを緑（#35CB9E）に設定します。
step
3整列や間隔・余白を調整する
右サイドバーに表示される「オートレイアウト」で、今回はテキストの周りに上下左右の余白(パディング)を「10」に設定するので、次のように入力します。
さらに今回は、角丸と黒線を設定するので、右サイドバーの「フレーム」で角丸を 7、「線」で 内側 、線幅：2、、色：#000000 に指定します。
▼角丸の指定▼
▼線の指定▼
以上で、オートレイアウト機能を使ったボタンの作成が完了しました。
試しに、中のテキストを打ち替えてみると、余白を維持したまま幅が変わるのがわかると思います。
オートレイアウトで要素を折り返す（レスポンシブ対応）
▼要素の折り返しを指定▼
▼最小幅と最大幅を指定▼
オートレイアウトは、コンテナ幅を指定することで、中の要素を折り返すことができます。
カード形式のレイアウトを例に、実際に試してみましょう。
flex-wrap: wrap; と同じような機能だね！要素の折り返し(Wrap)を指定
オートレイアウトを適用し、カードを３列で折り返すレイアウトを作成します。
step
1要素にオートレイアウトを適用する
まずは、要素を折り返すために外側のコンテナ（要素を内包する枠）を作成します。
折り返したい全ての要素を選択し、右クリック > 「オートレイアウトを追加」を選択しましょう。
ショートカットキー
どちらも、shift + A
step
2コンテナの幅を設定する
追加したオートレイアウトを選択（画面例「Frame2」）し、コンテナの幅を設定します。
今回は、幅「300」の要素を３列、要素間の幅を「20」に指定（次のstepで指定）するので、右サイドバーの「フレーム」で次の通り設定します。
- W ：940
- 水平方向のサイズ調整「固定」
- 垂直方向のサイズ調整「内包」
垂直方向のサイズ調整を「内包」にしておくことで、中の要素の数に応じてコンテナの高さも大きくなります。
step
3オートレイアウトに「折り返す」を指定
要素の折り返しを指定するために、右サイドバーのオートレイアウトで 
「折り返す」を選択します。
今回は、さらに次の通り設定します。
- 要素間のスペースを「20」
- 上下左右の余白（パディング）を「0」
以上で、オートレイアウトの「折り返す」ための操作は完了です。
試しに、中の要素を選択してコピー&ペーストすると、３列で折り返されているのがわかります。
コンテナの最大幅(max)と最小幅(min)を設定する
オートレイアウトを追加して作成したコンテナの最大幅と最小幅を指定することで、擬似的なレスポンシブを実現することができます。
例として、３列１行のカードを内包するコンテナ（オートレイアウトを適用）を作成し、最大幅と最小幅を指定してみましょう。
step
1オートレイアウトに「折り返す」を指定
まずは、３列１行のカード形式のレイアウトを用意し、オートレイアウトを適用します。
（３列１行のレイアウトの詳しい作り方はコチラ）
step
2オートレイアウトに「折り返す」を指定
コンテナ（画面例「Frame4」）を選択し、中身の要素を折り返すために、右サイドバーの「オートレイアウト」で 「折り返す」を選択します。
今回は、さらに次の通り設定します。
- 要素間のスペースを「20」
- 上下左右の余白（パディング）を「0」
step
3コンテナに最大幅と最小幅を設定する
最後に、右サイドバーの「フレーム」で、W(幅)右横の「
」をクリックすると表示されるプルダウンメニューから、「最小幅を追加」と「最大幅を追加」を選択し、それぞれ入力します。
今回は例として、次のように入力しました。
- 最小幅：300（要素１つ分の幅）
- 最大幅：940
以上で、３列１行のカードを内包するコンテナに、最大幅と最小幅を指定することができました。
試しに、コンテナ幅を広げたり縮めたりしてみると、要素が３列で折り返し、指定した幅の範囲内だけしか操作できないのがわかります。
コンテナ幅に合わせてレイアウトを変える（レスポンシブ対応）
▼中身を広げる・縮める▼
▼中身を広げる・縮める ＋ 折り返す▼
オートレイアウトを適用して作成したコンテナ（要素を内包する枠）の大きさに合わせ、中身の要素の大きさやレイアウトを変化させるレスポンシブデザインを作成してみましょう。
コンテナ幅に合わせて要素の中身を広げる&縮める
例として、最小幅「300」最大幅「600」の、中身の要素サイズが可変するカード式レイアウトの作り方を紹介します。
step
1長方形とテキスト&ボタンを用意する
まずは、次のような長方形とテキスト&ボタンを用意します。
❶ W280 × H200 の長方形を作成
❷ 適当なテキストを入力し、枠をW 280 に設定、用意したボタン（作り方はコチラ）をオートレイアウト化 & 選択した状態で、右サイドバーの「オートレイアウト」で次のように設定
- 要素を「縦に並べる」&「中央揃え」
- 要素間の余白「15」
- 上下左右の余白「0」
step
2長方形とテキスト&ボタンにオートレイアウトを適用する
次に、長方形とオートレイアウトを適用したテキスト&ボタンを選択し、さらにオートレイアウトを適用します。
適用したオートレイアウトには、次のような設定をします。
- 要素を「縦に並べる」
- 要素間のスペースを「20」
- 上下左右の余白（パディング）を「10」
- 最小幅「300」
- 最大幅「600」
- 塗り：「FFFFFF（白）」
step
3中の要素を「コンテナ幅に合わせて拡大」
最後に、右サイドバーの「フレーム」で、長方形とテキスト&ボタン、テキストに、「コンテナに合わせて拡大」を設定します。
以上で、中身の要素サイズが可変するカード式レイアウトの作成が完了しました。
試しに、コンテナ幅を広げたり縮めたりしてみると、中の長方形とテキストを囲む枠もサイズが変わっていますね。
コンテナ幅に合わせて要素の中身を広げる&縮める ＋ 折り返す（2列レイアウト）
例として、最小幅「300」最大幅「600」の、中身の要素サイズが可変する ＋ 折り返す カード式レイアウトの作り方を紹介します。
step
1長方形とテキスト&ボタンを用意する
まずは、次のような長方形とテキスト&ボタンを用意します。
❶ W280 × H200 の長方形を作成
❷ 適当なテキストを入力し、枠をW 280 に設定、用意したボタン（作り方はコチラ）をオートレイアウト化 & 選択した状態で、右サイドバーの「オートレイアウト」で次のように設定
- 要素を「縦に並べる」&「中央揃え」
- 要素間の余白「15」
- 上下左右の余白「0」
step
2長方形とテキスト&ボタンにオートレイアウトを適用する
次に、長方形とオートレイアウトを適用したテキスト&ボタンを選択し、さらにオートレイアウトを適用します。
適用したオートレイアウトには、次のような設定をします。
- 要素を「折り返す」
- 要素間のスペースを「20」
- 上下左右の余白（パディング）を「10」
- 最小幅「300」
- 最大幅「600」
- 塗り：「FFFFFF（白）」
step
3中の要素を「コンテナ幅に合わせて拡大」
最後に、右サイドバーの「フレーム」で、長方形とテキスト&ボタンに、
- 「コンテナに合わせて拡大」
- 最小値：280
テキストにも、「コンテナに合わせて拡大」を設定します。
以上で、中身の要素サイズが可変する + 折り返す カード式レイアウトの作成が完了しました。
試しに、コンテナ幅を広げたり縮めたりしてみると、中の長方形とテキストを囲む枠もサイズとレイアウトが変わっていますね。
オートレイアウトのQ & A
ここまで、Figmaのオートレイアウト機能の基本から応用まで解説してきましたが、ここではその他の細かな疑問についてお答えします。
オートレイアウトで要素が「ずれる」場合は？
複数の要素にオートレイアウトを適用する際、思った通りに整列せずに「ずれる」場合があります。
その場合、オートレイアウトを適用する前の、要素の一部が親要素（一番外側の枠）からはみ出している可能性があります。
一度オートレイアウトを解除して、再度試してみましょう。
また、複数のテキストやアイコンなどにオートレイアウトを適用すると、横に並べた際に中心線から「ずれる」場合があります。
その場合は、オートレイアウトを適用した要素を選択した状態で、右サイドバーの「オートレイアウト」の「左揃え」「中央揃え」「右揃え」のいずれかを選択することで中心線に並べることができます。
（実現したいレイアウトによって、適宜変更してください。）
また、テキストのベースラインに合わせてアイコンなどを揃えたい場合は、右サイドバーの「オートレイアウト」の ❶詳細設定 → ❷文字のベースラインに揃えるの 
をクリックしましょう。
オートレイアウトの要素を「重ねる」には？「重ねる順番」は？
オートレイアウトで要素を重ねる方法と要素の重なり順の変更方法について、横に並んだ３つの円形を例に説明します。
オートレイアウトを適用した要素を「重ねる」には、要素間の長さをマイナス（ネガティブマージン）に設定する必要があります。
次のように、要素間にカーソルを合わせてドラッグするか、右サイドバーの「オートレイアウト」で項目の上下の間隔にマイナス値（例：-40）を入力しましょう。
要素の「重なり順を変更」したい場合は、
右サイドバーの「オートレイアウト」の ❶詳細設定 → ❷キャンバススタッキングの をクリックし、表示されるプルダウンメニューから以下のいずれかの項目を選択します。
- 最前面に最初のアイテム
- 最前面に最後のアイテム
基本的に、要素を横並びにコピーした場合は左側の要素が「最初のアイテム」となり、重ねると上に表示されます。
これをキャンバススタッキングの項目で「最前面に最後のアイテム」を選択することで、右側の要素が上に表示されるようになります。
オートレイアウトを「解除」するには？
オートレイアウトを解除する場合は、オートレイアウトを適用した要素全体を選択した状態で、
右サイドバー内の「オートレイアウト」の「 
」をクリックするか、右クリック > 「オートレイアウトの削除」を選択します。
オートレイアウトの「絶対位置」を設定するには？
オートレイアウトを適用した要素は、「横」や「縦」「折り返し」など、ルールに沿って並べられます。
しかし、オートレイアウト内の任意の要素に「絶対位置」を指定することで、CSSの position: absolute; のように、任意の要素を任意の場所に設定することができます。
絶対位置の指定方法は、任意の要素を指定した状態で、右サイドバーの「フレーム」で 
絶対位置をクリックします。
すると、それまで規則正しく並んでいたレイアウトから外れて、親要素内を自由に移動することができます。
最後に
今回は、オートレイアウトの基本から応用的な使い方について解説しました。
オートレイアウトは奥が深く、使い方を工夫することで、他にも様々なレイアウトを表現することが可能です。ぜひ、この色々な使い方を試して見てくださいね！
Figmaについて、他にも詳しく知りたい方は他の記事もチェックしてみて下さい！
-
Figma
Figmaの使い方について、基礎から応用まで初心者向けに解説しています。
続きを見る
