この記事ではFigmaで頻繁に使用されるオートレイアウトの基礎を解説します。

オートレイアウトとは？どこで、どのように使うのかなども解説するので、かなりボリュームのある記事になります。

WebデザインでFigmaを使用する上で必ず覚えておかなければならないものの一つがオートレイアウトです。
オートレイアウトの概念を覚えておくだけで、Webサイトを実際に実装する時の目線に近い形でデザインを制作することができるようになります。

ぜひ何度も読み返して理解していただけたら嬉しいです！

オートレイアウトとは？

オートレイアウト（Auto layout）について解説する前に、どこでオートレイアウトを設定できるのかについてお話しします。

オートレイアウトを作ると、Figmaの右側のパネルに以下の画像のような表示が出ます。

基本的に、オートレイアウトはフレーム（Frame）に適用できるプロパティです。
レスポンシブデザイン（Responsive design）を作る時には必須の概念になってきます！

オートレイアウトを使用していないデザイン

オートレイアウトを使用していない場合、以下のようなカードの横幅を広げても、ただ親のフレームの横幅が広がるだけです。

オートレイアウトを使用しているデザイン

オートレイアウトを使用していると、以下のようなカードの横幅を広げるとそれに合わせて親フレームの中に入っている小要素となるコンテンツは反応して拡大するようになります。

どのような動きをするかはオートレイアウトの設定によって変わってきますが、親フレームの動きに合わせて小要素が反応する、覚えていただけると理解しやすいかと思います。

オートレイアウトの作り方

例えば、以下の画像のような要素にオートレイアウトをかける場合、どのように操作するかというと

1. オートレイアウトをかけたい要素を全て選択

2. 「Shift + A」もしくは右側パネルにあるオートレイアウトの「+」アイコンをクリック

3. レイアウトの方向を決める

4. ホリゾンタルパディング（Horizontal Padding）とバーティカルパディング（Vertical Padding）を設定する

このような手順でオートレイアウトを追加することができます。

親要素と小要素

オートレイアウトを使用する時には「親要素」と「小要素」について理解しておく必要があります。

2つの関係について

親要素とは様々な要素が入っているフレームの、一番外側にあるもののことを言います。
オートレイアウトを使用した際は、この親要素の変化によって、中の小要素が変化します。

小要素とは、親要素の中に入っている個別の要素のことです。

3つのレイアウトの方向

オートレイアウトを使用した際、以下のような3つの方向を選ぶことができます。

これに合わせて小要素が並ぶので、非常に重要な要素です。

• ホリゾンタル（Horizontal）

• バーティカル（Vertical）

• ラップ（Wrap）

ホリゾンタル

ホリゾンタルレイアウト（Horizontal Layout）は小要素を横向きに並べるレイアウトです。右から左に向かって、端から端まで要素が整列されるのが、このレイアウトの特徴です。

オートレイアウトがかかっている親フレームに要素を追加した時は、新しい要素は右へ右へと追加されていきます。

ホリゾンタルレイアウトがよく使われる例としては、アプリやウェブサイトのナビゲーションバー（Navigation Bars）などが良い例かと思います。
他にも、カルーセルなども横方向のレイアウトでは非常に良い例です。

バーティカル

バーティカルレイアウト（Vertical Layout）はホリゾンタルと反対の動きをするレイアウトです。

ホリゾンタルレイアウトは右から左に向かって横方向に要素が並ぶものでしたが、
バーティカルレイアウトは上から下に、縦方向に要素が並びます。

もちろん、オートレイアウトがかかっている親フレームに要素を追加した時は、新しい要素は下へ下へと追加されていきます。

ホリゾンタルレイアウトがよく使われる例としては、サイドバー（Sidebar）などが良い例かと思います。
他にも、フォームの入力フィールドなども横方向のレイアウトでは非常に良い例です。

ラップ

ラップレイアウト（Wrap Layout）はホリゾンタルとバーティカルを合わせたようなレイアウトです。

基本的には横方向に要素が並んでいきますが、横方向に要素を追加する十分なスペースがない場合は、縦方向、下へ向かって要素が並んでいきます。
Zのような要素の並び方をするのが特徴的です。

ホリゾンタルレイアウトがよく使われる例としては、ブログなどのコンテンツが並んでいるグリッドレイアウトなどが良い例かと思います。

パディングとギャップ

オートレイアウトを追加した時、パディング（Padding）とギャップ（Gap）を選ぶことができるようになります。
パディングとギャップとは何か、その違いは何か、どのようにデザイン上で使用するかなどを解説してきます。

パディング

パディングとは、小要素と親要素の端にスペースを作ることです。パディングを大きくすることで、そのスペースが広くなります。

誤タップや読みづらさなどのストレスとユーザーに与えないためにも、デザインをするときは、余白をできるだけ確保することが望ましいとされています。

ホリゾンタルパディング

ホリゾンタルパディング（Horizontal Padding）は親要素と小要素の左右のスペースを作る値です。

バーティカルパディング

バーティカルパディング（Vertical Padding）は親要素と小要素の上下のスペースを作る値です。

パディングを個別で設定する

上下左右4方向のパディングをそれぞれ個別で設定するインディビジュアルパディング（Individual Padding）も存在します。

ギャップ

ギャップとは、小要素間のスペースを決める値のことです。

ホリゾンタルやバーティカルなど、レイアウトの方向に応じて、その方向のスペースを決められるのもギャップの特徴です。

ラップを適用しているときは横方向と縦方向どちらのギャップも個別に設定することができます。

オートギャップ

ギャップの値にはオート（Auto）を選ぶこともできます。

オートを選ぶと、レイアウトを決めた方向へ親フレームが拡大縮小した時に、その端と端にコンテンツがくっつくようなイメージで自動的にギャップが生成されます。
複数の小要素が親フレームに入っている場合は、均等間隔で小要素が並びます。

オートレイアウトの整列

ここまででオートレイアウトを並べる方向や、余白の作り方について学んできました。

オートレイアウト内のパネルには「整列（Alignment）」を制御する部分のみ解説が残っているので、このパートで解説してきます。

横方向の整列

横方向の整列について、例えば、以下の3パターンのように整列を切り替えることでオートレイアウトの親フレームに入っている小要素の位置を制御することができます。

縦方向の整列

縦方向の整列は、例えば以下の画像のように切り替えることができます。

整列の組み合わせ

横方向と縦方向の整列を理解した上で、この二つを組み合わせると、かなり自由にオートレイアウト内の要素を整列させることができます。

オートギャップを設定した場合

オートギャップを設定した場合の整列パネルは以下の画像のようになります。

要素の重なり

デザインをしていると、以下の画像のようにオートレイアウト内の要素が重なってくるようなデザインを制作することもあります。

このような要素の重なり（Canvas Stacking）をどのように制御していくか、このパートで解説していきます。

重なるようなレイアウトの作り方

このような要素の重なりの作り方は非常に簡単で、先ほどまでに説明したギャップを活用します。

このギャップにマイナスの値を入力するだけです。マイナスを入力すると要素が重なります。

重なる順番の変え方

オートレイアウトの詳細設定（3点リーダー）をクリックして2番目にあるCanvas stackingという設定項目から変更ができます。

最初の要素から下に重なっていくか、その逆を選ぶことができます。

小要素のサイズを制御する

オートレイアウトには小要素のサイズを制御する（Resize）機能が存在します。

その機能が以下の3つです。

1. 固定値（Fixed）

2. ハグ（Hug）

3. フィル（Fill）

固定値

まずは固定値（Fixed）について解説してきます。

親要素には2種類のサイズ制御ができる

親フレームには固定値とハグの2種類のサイズ制御が設定できます。
この設定はFigmaの右側のパネルから操作することができます。

固定値とは

固定値とは、該当小要素の横幅や縦幅を手動で設定することです。

通常のフレームの横幅などを決めるのと同様に、数値を打ち込んだり、フレームの端をドラッグすることで自由に変更することができます。

小要素に設定した場合

小要素に固定値を設定した場合、親フレームの拡大縮小に左右されることなく、手動で設定した値がそのまま保持されます。

小要素には3種類のサイズ制御ができる

サイズ制御について、親要素が2種類だったのに対して、小要素は3種類設定することができます。
固定値とハグに加えてフィルが設定できるようになります。
このフィルについては後ほど解説します。

ハグ

先ほど説明した通り、親要素には固定値とハグの2種類が設定でき、小要素にはそれに加えてフィルの3種類が設定できます。

ハグとは

ハグ（Hug）は、日本語で表すと「内包」となり、その名前の通り要素を包み込むようなイメージです。

小要素とパディングの大きさに合わせて親要素の横幅や縦幅が変化します。
テキストが追加されるなど、小要素の横幅や縦幅に変化があった場合は、その分だけ親要素も変化するのがハグの特徴です。

フィル

ここまでで固定値とハグについて解説してきたので、最後のフィルについてここで解説してきます。

フィルは親要素には設定できず、小要素にのみ設定することができます。

フィルとは

フィルは端的に言うとハグの反対です。つまり、親要素に対して目一杯小要素が広がるという特徴があります。

ハグとフィルの違い

ハグとフィルの大きな違いとしては、優先されるものにあります。

ハグは小要素の大きさが優先されて親要素の大きさが決まるのに対して、
フィルはその逆で、親要素の大きさが優先され、小要素の大きさが決まります。

最小値と最大値

Figmaではオートレイアウトを使用しているときに、その要素の最小値と最大値を設定することができます。

このパートでは、最小値と最大値をどのように設定するかなどを解説していきます。

最小値

最小値（Minimum width）は名前の通りですが、フレームの横幅の最小値を決めることです。

最小値を決めていると、そのサイズ以下にフレームの大きさを変えようとしても、制限がかかります。

例えば、横幅の最小値は320pxにしている場合、320px以下にそのフレームを変えようとすると、それ以上小さくなりません。これが最小値です。

最小値の設定の仕方

Figmaの右側のパネルにある横幅を変える部分をホバーすると、ドロップダウンのメニューが出てきます。

そこから最小値を追加・設定することができます。

最大値

最大値（Maximum width）は最小値と反対で、フレームの横幅の最大値を決めることです。

最大値を決めていると、そのサイズ以上にフレームの大きさを変えようとしても、制限がかかります。

例えば、横幅の最小値は640pxにしている場合、640px以上にそのフレームを変えようとすると、それ以上大きくなりません。これが最大値です。

最大値の設定の仕方

設定の仕方は最小値と同じように右側のパネルのメニューから追加できます。

最小値と最大値の削除方法

一度最小値や最大値を設定した後は追加した時と同じようにドロップダウンのメニューから、削除したり再設定をすることができます。

まとめ

ここまででFigmaのオートレイアウトについて細かく解説してきました。

ここまでを理解していれば、後は慣れるだけです。
オートレイアウトに一度慣れてしまえば、Figmaでの操作がものすごく早くなりますし、エンジニアにも実装してもらいやすい、協調性のあるデザインを制作することができます。

一つ一つをFigmaで手を動かしながら少しずつ慣れていってください！