【Figma入門④】Figma“オートレイアウト機能”の使い方・活用方法をやさしく解説

Webデザイン/UIデザインでは“可変”という言葉がよく使われます。ユーザーが使う端末のサイズ、表示したい内容に合わせて、要素の大きさ・中身の並べ方を変えることって、結構ありますよね。

そんな時に、柔軟に対応できるよう設定するのがFigmaの“オートレイアウト機能”。名前にあるレイアウト作りだけではなく、様々なデザイン調整が楽に出来るようになます。作業効率をかなり上げてくれる機能ですので、基本操作に慣れたら早い段階から活用していきましょう！

• Figmaオートレイアウト機能の概要
• オートレイアウトとは
• コンテンツに応じて可変するフレームを作る
• オートレイアウトで要素を整列する
• 下準備：フレームの作成
• フレームにオートレイアウトを追加・設定する
• カードデザインにもオートレイアウトを設定する
• 最終調整

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

オートレイアウトとは

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

例えば、テキストを打ち替えるとサイズが自動で調整されるボタンを作る。

横幅を変えてもレイアウトが崩れない、カードなどのパーツを作ったり、と柔軟なデザイン・レイアウトを作ることが出来ます。

すべての人が同じサイズの画面で閲覧・利用するわけではない、Webデザイン/UIデザインには嬉しい機能ですね。

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

コンテンツに応じて可変するフレームを作る

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

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

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

　　↓

W（width）とH（Height）の下に、山括弧が向き合ったような項目が増えました。
表示されている内包とは、コンテンツを内包＝中身の大きさによってフレームのサイズを変えるという設定。今まで通りの決まった幅にしたい場合は、固定幅を選択することも可能です。

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

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

フォントサイズが標準のボタンの方も、オートレイアウトを追加。
余白を調整しておくと、文字を打ち替えても自動で調整されるようになります。

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

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

下準備：フレームの作成

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

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

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

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

空のまま設定してもわかりにくいので、前回作ったカードをフレームの中に入れます。
（適当な大きさの長方形シェイプ×4などを使ってもお試しいただけます）

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

フレームにオートレイアウトを追加します。

大きさが“内包”になり、フレームの横幅が大きくなっていますね。

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

フレームの設定

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

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

4つめのカードが切れている状態になります。

オートレイアウトの設定

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

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

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

カードの幅を自動設定

カードが4つ並ぶように、カード自体の幅を調整しましょう。
オートレイアウトが適用されたフレーム内の要素は、サイズの設定で特別な選択が出来ます。

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

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

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

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

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

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

設定した最小幅に到達すると、折り返し（Wrap）が効いて下段に移動してくれます。

カードデザインにもオートレイアウトを設定する

同じサイズのカードを4つ、一定の間隔で横並びに配置は出来ました。
しかし、カード内の表示が途中で切れてしまっていますよね。サイズがピッタリあったのではなく、overflow: hidden;でごまかして無理やり押し込んでいる感じです。

表示が途中で切れてしまう原因は、カードの中にある画像やテキストのサイズが固定されているためです。カードの方にもオートレイアウトを適用して設定すると、より柔軟なレイアウトを作れるのでやってみましょう。

デモではコンポーネント化したものを使っているので、メインコンポーネントを変更していきます。

1.フレームにオートレイアウトを適用

オートレイアウトを追加してみましょう。
要素の並び順によって変わりますが、見た目に何らかの変化が起こるはずです。

下図、赤い線で囲った三箇所で縦並び・間隔16・上揃え（左）にしておきます。

2.必要箇所をフレーム・グループ化する

オートレイアウトを適用したフレームの直下にあるレイヤーは、オートレイアウトで指定した並び順に従って配置されます。
カード最下部のように「ここは横に並んで欲しい」という部分があれば、グループ化・フレーム化しましょう。フレーム直下ではなくすることで、並び順を変えることが出来ます。
コーディングがわかる方は、CSS FlexBoxの親子関係をイメージしてください。

カード最下部でやってみましょう。
まず、カード下の画像・名前・日時の3つを選択状態にします。
そのまま、オートレイアウトを追加。

オートレイアウトが追加されたフレーム（Frame1）に変わります。

Frame1の横幅（水平方向のサイズ調整）を、コンテナに合わせて拡大に設定します。

オブジェクトの並び順を、横並びに変更。

左側に寄せたい写真・名前をグループ化します。

名前のテキストレイヤーを選択して、水平方向の中央揃えを実行。

写真との距離が気になる場合は、調整して下さい。

もう一度、カード下部をまとめているフレーム（Frame1）を選択します。
アイテムの左右の間隔を[自動]にし、右にある揃え位置で[中央揃え]に設定します。

これでカード下部の配置が出来ました。
しかも、オートレイアウトを使ったことで、カードの幅を変えても投稿者情報・日時情報が左右端に配置されたままの状態が維持できています。

3.フレーム内要素を可変にする

カード下部と同じように、他のオブジェクトもフレームに合わせて幅が変わるようにします。

カード上部の画像、見出し、概要（抜粋）の３レイヤーを選択状態にします。
飛び飛びのレイヤーの選択はCtrlもしくは⌘キーを押しながらクリック。

水平方向のサイズ調整で、コンテナに合わせて拡大を設定します。

フレームの大きさに合わせて、自動的にサイズが変わるようになりました。

本題の、幅1200のフレーム内に配置した4つのカードを見てみましょう。
はみ出しが無くなり、きちんと見えるようになっています。

最終調整

最後に、カード４枚並びの調整をします。
フレームの位置がデザイン幅（top_pc）の中央からズレているのを直したり、カード同士の間隔を調整したり、気になるところを整えて下さい。

4枚めのカードだけ、ドロップシャドウが見えなくなっているのは、ドロップシャドウが外側に付いているため。
以下２つの方法、どちらかで見えるように出来ます。

【方法1】
カードを囲うフレームの[コンテンツを隠す]のチェックを外す

【方法2】
カードを囲うフレームに左右パディングを設定する

オートレイアウトの設定は面倒に感じるかもしれませんが、一度設定してしまえば、コンテンツ幅やカード幅に変更があっても調整がほとんど要らなくなります。タブレット幅やスマホ幅のデザインを作る時にも、調整しやすくて楽。コーディングの手がかりにも、なるかもしれません。

例えばオートレイアウト内で個別に余白をつけるとか、幅を％で指定するとか、100％やりたいことが出来るわけではありません。ただアップデートでどんどん使いやすくはなっていますし、メリットも多い機能ですので、是非活用していきたいですね。