Auto Layout

オートレイアウトとは何か?

オートレイアウトは、方向、間隔、パディング、配置にもとづいてフレーム内のオブジェクトを自動で並べるFigmaのレイアウト機能だ。内容が追加、削除、サイズ変更されると、手作業で並べ直さなくてもレイアウトが調整される。

設定項目は、方向(縦、横、そしてオープンベータのグリッド)、オブジェクト間の間隔(固定またはAuto)、パディング、配置、横方向でのラップだ。フレームを入れ子にして、複数方向のレイアウトを組める。

なぜオートレイアウトを使うのか?

ボタンはラベルに合わせて伸び、リストは項目数に応じて増減し、ダッシュボードはさまざまな画面に合わせる必要がある。いずれも内容が変わる場面だ。手動で配置すると、変更のたびに並べ直しになる。オートレイアウトはそのルールをデザインファイルに書き込むので、デザインが内容に合わせて調整され、Figmaの説明でもレスポンシブデザインへの対応が主な利点に挙げられている。

AIにとっては別の価値もある。オートレイアウトは間隔と並びのルールを明示するので、AIが読むのは、ピクセル位置から推測すべきレイヤーではなく「縦並び、間隔16、パディング24」という情報になる。

オートレイアウトはどう動くのか?

子オブジェクトには三つのサイズ指定がある。固定(Fixed)は寸法を保つ。コンテンツに合わせる(Hug contents)は、フレームが子オブジェクトと間隔に合わせて伸縮する。コンテナを埋める(Fill container)は、子オブジェクトが親の残りの空間いっぱいに広がる。最小・最大サイズとも組み合わせられる。

コードへの対応について、サードパーティのFigma-to-codeドキュメント(figma-code-agent、Figma公式ではない)は、CSSのflexboxとおおよそ次のように対応づけている。方向はflex-direction、間隔はgap、コンテナを埋めるはflex-grow: 1とflex-basis: 0、固定はflex-shrink: 0と明示的な寸法、ラップはflex-wrapだ。「オートレイアウトを無視」にしたオブジェクトはフローから外れ、絶対配置に相当する。

私にとってどんな意味があるのか?

AIにデザインをコードに変換させたいなら、オートレイアウトの追加は最も効果の大きい整理のひとつだ。オートレイアウトのあるフレームでは間隔と並びのルールが明示される。なければ、AIは座標から推測するしかない。上記のドキュメントも、GROUPにはオートレイアウトがなく、子要素には絶対配置が必要になると指摘している。

限界も知っておきたい。Figma自身が挙げる制限には、グリッドがまだベータであること、オートレイアウトを各コンポーネントに個別に追加する必要があること、インスタンスではパディングと間隔は調整できるがレイヤーの追加や並べ替えはできないことがある。flexboxへの変換も一対一ではない。Figmaにはネイティブのブレークポイントがないので、複数のブレークポイントのフレームはメディアクエリに手作業で統合する必要がある。