Figma“オートレイアウト機能”の使い方・活用方法を知る

• Figmaオートレイアウト機能の概要
• オートレイアウトとは
• オートフレームで、文字数に応じて幅が変わるボタンを作る
• オートレイアウトで要素を整列する
• 下準備：フレームの作成
• フレームにオートレイアウトを追加・設定する

Figmaオートレイアウト機能の概要

オートレイアウトとは

Figmaのオートレイアウト（Auto Layout）機能とは、フレーム内の要素を規則的に並べることが出来る機能です。
フレーム内要素に合わせてフレームの大きさを変える、フレームの大きさに合わせてフレーム内要素の大きさを変えることもできます。

フレーム内要素に合わせてフレームの大きさを変える、というのは、中身の大きさに合わせて自動的にサイズを変えられるイメージです。
例えば、テキストを打ち替えると、文字数に合わせてサイズが自動で調整されるボタンが作れます。

反対に、下記のように、横幅を変えてもレイアウトが崩れないように設定することも可能。

オートレイアウトを使うと、柔軟なデザイン・レイアウトを作ることが出来るのです。
すべての人が同じサイズの画面で閲覧・利用するわけではない、Webデザイン/UIデザインには嬉しい機能ですね。

Figmaのオートレイアウト機能は、フレームでのみサポートされています。
グループなどにも適用できますが、オートレイアウトを適用した時点でフレームに変換される、もしくは自動的にフレームが作成されるという点だけは覚えておきましょう。

オートフレームで、文字数に応じて幅が変わるボタンを作る

では、早速Figmaのオートレイアウト機能を使ってみましょう。

オートレイアウトはフレームを選択した状態で、キーボードショートカットShift + A。
もしくは、デザインタブ[オートレイアウト]の横にあるプラスアイコン（）から追加できます。

長方形シェイプ+文字のボタンデザインに追加してみます。

W（width）とH（Height）の下に、山括弧が向き合ったような項目が増えます。
これがオートレイアウトで追加される設定項目“サイズ調整”方法です。

内包とは、コンテンツを内包＝中身の大きさによってフレームのサイズを変えるという設定です。
今まで通りの決まった幅にしたい場合は、固定幅を選択することも可能です。

オートレイアウトで“コンテンツを内包”に設定すると、中身に応じて自動的にサイズが変更されます。
ボタンのテキストを変えても、いちいち長方形シェイプやフレームの大きさを調整しなくて良いので楽ですね。

余白（パディング）のサイズは、デザインタブの“オートレイアウト”グループで設定できます。
アイコンにカーソルを乗せると説明が出ますので、何かわからないところは確認して下さい。

フォントサイズが標準のボタンの方にも、オートレイアウトを追加しましょう。
パディングの量も、Largeよりちょっと少なめに設定すると良いですね。

オートレイアウトで要素を整列する

オートレイアウトは、フレーム内で要素を規則的に、等間隔で並べたい場合にも役立ちます。

下準備：フレームの作成

フレームツールを使って、XDなどAdobe製品でいう“アートボード”を作ります。
PC向けのデザインを作りたいので、横幅は大きめ、1600にしておきます。
縦幅は作りながら伸ばしていくので、短めでOKです。

次に、コンテンツ幅（最大）を示すためのフレームを作ります。
以下ではフレームの横幅を1200としました。

この幅はデザインや、導入するフレームワークの設定によって変わります。
例えば、Bootstrap5をそのまま使う予定であれば、デフォルトの最大幅1320pxに合わせておくとよいでしょう。

コンテンツ幅のフレームを水平方向の中央揃えを使い、真ん中に置いておきます。
レイヤーパネル上でもわかりやすいように、名前をつけておきましょう。

フレームにオートレイアウトを追加・設定する

オートレイアウトの追加（適用）

前回作ったカードを、card-containerフレームの内側に配置します。

キャンバス上でドラッグして移動させる場合、アイテムの幅がフレームよりも広いと入りません。
レイヤーパネルの方から、強制的にフレーム下に動かします。

card-containerフレームにオートレイアウトを追加。

大きさが“内包”になり、フレームの横幅がカード4枚のサイズに合わせて広くなります。
（カードの横幅が狭い方は、オートレイアウト適用前より狭くなることもあります）

今回の場合、最初のボタンとは違って「決まった幅の中で」アイテムを並べるのが目的です。
フレームのサイズは可変ではなく“固定”になるよう、設定してきましょう。

フレームの設定

オートレイアウトにしたことで、下図赤線で囲った部分が“内包”に変更されています。

横幅は固定したいので、固定幅に切り替えて、Wの数字を打ち替えます。
最初に設定した1200px幅に戻してみましょう。

4つめのカードが、途中で切れたような表示になりました。

オートレイアウトの設定

オートレイアウトのグループでは、パディングの設定以外にフレーム内のアイテムをどう並べるかも設定できます。
FlexBoxレイアウトで、親要素にCSSプロパティを指定するのに近いイメージです。

アイテムを折り返す設定に変更してみましょう。
途中で切れてしまった4つめのカードが、折り返されて下の段に表示されました。

ただ、このままだと、どう頑張っても4つのカードは横並びになりません。
余白（paddingとgap）をゼロにしても、元々のカードの幅が決まっているので、フレームで定義した幅の内側に4つは入らないわけです。

カードの幅を自動設定

カードが4つ並ぶように、カード自体の幅を調整しましょう。
オートレイアウトフレーム内にある要素にも、“サイズ調整”の選択が出来るようになっています。

フレームの中にあるカードを、4つ全て選択。

水平方向のサイズ調整欄で、コンテナに合わせて拡大を選択してください。
カードの幅が、コンテナにピッタリ4つ並ぶサイズに変わります。

最小幅・最大幅の設定も可能

コンテナに合わせて拡大の難点。
カードを追加すればするほど、カード一つ一つが細長くなってしまいます。

カードを2段表示したい、なんて場合は最小の幅（min-width）を設定して対応できます。
Wのプルダウンをクリックすると、最小幅と最大幅を登録できるようになっています。

最小幅を追加...を選択して「これ以上は細くしたくない！」というサイズを入力すればOK。

設定した最小幅に到達すると、折り返し（Wrap）が効くようになります。

同じサイズのカードを4つ、一定の間隔で横並びに配置は出来ました。
しかし、上図では写真や日付など、カードの右側が途中で切れてしまっています。

これは、カードを囲うフレーム（card）自体の幅は可変になっていても、中身が固定幅のためです。
次のレッスンで、カードの中身を調整していきましょう。