CSS to Figma Auto Layout：FlexboxとGridの対応ガイド

フロントエンドのコードを書く人にとって、FigmaのAuto Layoutは馴染みのあるものに感じられるでしょう。方向、間隔、パディング、配置、そして内容に合わせる（Hug）か親いっぱいに広がる（Fill）子要素。CSS to Figma Auto Layoutは一対一の変換だと考えたくなります。しかし、そうではありません。FlexboxとGridのほうが表現力が豊かで、ブラウザはAuto Layoutがモデル化していないマージン、パーセンテージ、内在サイズを解決しますし、同じ見た目がまったく異なるCSSから生まれることもあります。

このガイドでは、HTML to FramesがCSSのレイアウトをAuto Layoutに対応させる方法、すべての結果をブラウザと照合して検証する理由、限界がどこにあるか、そしてきれいにインポートされるCSSの書き方を説明します。

アプローチ：まずジオメトリ、次に推定

単純な変換ツールは display: flex を読み取ってプロパティをそのまま写します。しかし、それではすぐに破綻します。gap: 0 で子要素にマージンを持つflexコンテナ、縦のスタックのように見えるだけのブロック要素、2行にきれいに並んでレンダリングされるgridなどです。

HTML to Framesは、ブラウザが実際にレンダリングした結果をもとに処理します：

1. ピクセル単位で正確に組み立てる。 まず、ブラウザで実測したジオメトリから得た絶対位置で、Figma上にページを組み立てます。
2. 内側から外側へたどる。 最も深いフレームから始めて、位置とサイズから縦のスタック、横のスタック、折り返し行、間隔、パディング、配置を推定します。
3. レスポンシブな意味づけを加える。 中央寄せのコンテンツはCenterに、最大幅のボックスは中央のまま、均等なカードや flex-grow はFillになり、「ロゴ … メニュー … アイコン」のバーでは間のアイテムがFillになります。
4. 検証する。 Auto Layoutを適用した後、すべての子要素の位置を元の位置と2 pxの許容誤差で照合します。
5. 安全にフォールバックする。 一致しなければ、よりシンプルなプランを試します。それも失敗した場合、そのフレームは適切な制約（Stretch、Scale、Center、Min、Max）付きで絶対位置を保ちます。

推定はレンダリングされたジオメトリから始まるため、ブロック要素の積み重ねも、flexのcolumnと同じように縦方向のAuto Layoutになります。CSSの仕組みよりも結果のほうが重要なのです。より全体的な概要は、Auto Layoutの解説をご覧ください。

対応表

よくあるCSSのパターンが通常どのように対応するかを以下に示します。これは約束ではなく期待される結果としてお考えください。最終的な判断は検証が下します。

Flexboxの詳細

方向と順序

flex-direction によって、コンテナが横と縦のどちらのスタックになるかが決まります。推定にはレンダリングされた位置を使うため、逆方向の指定や order は、単に見た目の順序でレイヤーを生成するだけです。ブラウザで見えるとおりのものが、レイヤーパネルに並びます。

間隔とパディング

gap は最もきれいな入力です。子要素間の一定の距離が1つの値として、Auto Layoutのアイテムの間隔に直接対応します。兄弟要素間のマージンも、一定であれば機能します。16、24、16のように一定でない場合、プラグインはそれを1つの間隔として表現できず、検証によって別のプランが選ばれるか、絶対位置が保たれます。

パディングは子要素がコンテナ内で実際に配置されている位置から測定されるため、padding、border の幅、内側のマージンのすべてが結果に影響します。

justifyとalign

justify-content は主軸の配置に、align-items は交差軸の配置に対応します。興味深いのは space-between の場合です。「ロゴ … メニュー … アイコン」のようなヘッダーでは、プラグインは間のアイテムをFillにするため、リサイズしてもロゴは左に、アイコンは右に留まり、中央が伸びます。1つの幅でしか機能しない固定の間隔値ではなく、期待どおりのレスポンシブな意味づけです。

flex-growとFill

flex-grow や flex: 1 を持つ子要素はFill containerになります。均等なカードの行は均等なFillアイテムになるため、ブラウザと同じように、親フレームをリサイズするとカードも一緒にリサイズされます。

折り返し

flex-wrap: wrap はAuto Layoutのwrapモードに対応し、折り返し行を生成します。flexboxで作られたタグリスト、ロゴの一覧、カードグリッドにぴったりです。

CSS Gridの詳細

FigmaのAuto Layoutはスタックのモデルであり、2次元のグリッドではありません。そのため、gridレイアウトは検証を通る最も近い構造に対応させます：

• 均一なグリッド（均等な列、均等な間隔）は、通常折り返し行になります。
• 非対称なグリッド（サイドバーとメインカラム、2:1の分割）は、通常ネストされたスタックになります。縦のスタックを並べた横のスタック、またはその逆です。
• スタックに分解できないspanや重なりのあるセルは、制約付きで絶対位置を保ちます。

いずれの場合も、見た目の結果は許容誤差の範囲でブラウザと一致します。変わるのは、Figmaでフレームのどれだけの部分を柔軟にリサイズできるかです。

絶対配置、中央寄せ、autoマージン

position: absolute

絶対配置されたバッジ、装飾的な図形、オーバーレイは、兄弟要素と重なるため、スタックには属しません。そうした要素は絶対位置を保ち、プラグインは親をリサイズしても妥当に振る舞うよう制約を割り当てます。右上に固定されたバッジは右上に留まり、全面を覆うオーバーレイは伸縮します。

max-widthとmargin: auto

定番のコンテンツコンテナ max-width: 1200px; margin: 0 auto は、全幅フレーム内の中央寄せボックスになります。ここでSite widthも関わってきます。プラグインはインポート時にページの実際のデザイン幅を測定します。全幅のデザインはコンテンツボックスを中央に置いた1920で、本当にボックス型のサイトはそのボックス幅で、フルードなサイトは1440で取り込まれます。実測値によって、コンテナのロジックがそのまま保たれます。

flex内のautoマージン

flexの子要素に margin-left: auto を指定すると末尾に押し出されます。ナビゲーションバーでよく使われるパターンです。space-between と同様に、これもジオメトリから推定され、通常は押し出された要素を端に保つFillの間のアイテムになります。

検証が重要な理由

検証がなければ、変換ツールには2つの悪い選択肢しかありません。あらゆる場所にAuto Layoutを適用して一部のフレームがずれたり、重なったり、崩れたりするのを受け入れるか、Auto Layoutを避けて固まった絶対配置のレイヤーを渡すかです。

HTML to FramesはAuto Layoutを適用した後、すべての子要素の位置を2 px以内で確認します。フレームが検証を通らなければ、よりシンプルなプランを試し、それも通らなければ、そのフレームは絶対配置のまま残ります。デザインは決して崩れません。 Figmaで見えるものがブラウザと一致していると信頼でき、得られるAuto Layoutは実際に成り立つAuto Layoutです。

結果画面にはAuto Layout全体の割合が表示され、絶対配置のまま残ったフレームについてはその理由（診断）が一覧表示されます。これにより、「なぜここはAuto Layoutにならないのか？」という疑問が、CSSで対処できる具体的な情報に変わります。

実在のサイトでの自社テストでは、およそ**86〜97%**のフレームでAuto Layoutが推定されました。たとえば、ある製品サイトでは93%、LinearとStripeでは88%でした。実際の数値はCSSの書き方によって変わります。

知っておくべき制限

• Auto Layoutには2次元グリッドの概念がありません。gridは折り返し行かネストされたスタックになり、複雑なspanは絶対配置のまま残る場合があります。
• 兄弟要素間の一定でない間隔は、1つの間隔として表現できません。
• 重なり（負のマージン、絶対配置の子要素）がある要素は絶対配置のまま残ります。
• スキューや3D変形、path() を使ったclip-path、複数レイヤーのマスク、Display-P3カラーはまだ変換されません。
• iframe、WebGLのcanvas、ポスター画像のない動画などの埋め込みコンテンツは、そのボックスのスクリーンショット画像として取り込まれます。
• 一度に1つの幅。 各画面はそれぞれの幅でレイアウトされます。各ブレークポイントを別々のフレームとしてキャプチャするには、Responsive set（Desktop、Tablet、Mobile）を使ってください。

ヒント：きれいにインポートされるCSSを書く

次の習慣を身につけると、レイアウトがAuto Layoutに対応する頻度が高まります。いずれにしても良いCSSの書き方です。

1. 兄弟要素のマージンではなく gap を使う。 1つの一定の値がアイテムの間隔に直接対応します。
2. コンテナ内の間隔を一定に保つ。 間隔が混在するとフォールバックが発生します。
3. 1次元のレイアウトにはflexboxを優先する。 ナビゲーション、ツールバー、ボタングループ、カードの行は直接対応します。
4. カードグリッドには均等なトラックのgridを使う。 均一な列はきれいな折り返し行になります。
5. 非対称なレイアウトは明示的なコンテナで囲む。 サイドバーとコンテンツ領域を専用のflex行に入れると、明確なネストされたスタックになります。
6. 伸ばすべき要素には flex: 1 を使う。 Fillのシグナルになります。
7. コンテンツは max-width と margin: 0 auto で中央寄せにする。 中央に保たれる中央寄せボックスになります。
8. position: absolute は本当のオーバーレイだけに使う。 通常のレイアウトには使わないでください。
9. レイアウトに負のマージンを使わない。 スタックにできない重なりが生まれます。
10. 色にはカスタムプロパティで名前を付ける。 Styles & variables（Pro）を使うと、--brand-primary が brand/primary 変数になります。
11. 実際のテキストを使う。 画像内のテキストは編集可能なテキストレイヤーになりません。

自分のCSSの対応を確かめる

自分のCSSがどう対応するかを知る一番の近道は、インポートしてみることです。HTML to Figmaの流れでコードを貼り付けるかフォルダをアップロードする、Chrome拡張機能でローカルビルドをキャプチャする、あるいはAIツールからMCP経由で送ってもらいましょう。そして結果画面を開き、Auto Layoutの割合を確認して、絶対配置のまま残ったフレームの診断を読んでください。

Reference screenshot（Pro）をオンにすると、元のページの非表示でロックされたレイヤーが追加され、インポート結果とブラウザでのレンダリングを切り替えて比較できます。より詳細なレイヤー構造が必要な場合は、Detailed layers（Pro）をオンにしてください。

ページがフレームになる仕組みについてはHTML to frame変換をご覧ください。インポーターが対応するすべての機能は機能で確認できます。各インポートオプションの詳細はドキュメントで解説しています。