Figma Auto Layout を CSS Grid に変換：実践ガイド

この記事は評価方法のガイドであり、ランキングや実測比較ではありません。自分の画面で確認し、提供元の現在の設定とプランを参照してください。

TL;DR

• Auto Layout は、一次元の流れには flex、二次元のレイアウトには grid としてマッピングします。
• エクスポート前に Figma 側で行／列を定義しましょう。レイヤーが乱雑だとグリッドも乱雑になります。
• 出力結果を Tailwind のスペーシングスケールとブレークポイントで検証しましょう。

一部の Auto Layout に Grid が適している理由

Auto Layout はデフォルトで線形ですが、カードが折り返す場合、幅が混在する場合、行と列の両方で整列が必要な場合は、CSS Grid のほうが適しています。

Grid を選ぶべきケース

• 二次的な配置（行と列）。
• コンテンツの高さが異なっても一貫した整列が必要。
• 両軸のギャップを明示的に制御したい。

Flex を選ぶべきケース

• シンプルな水平／垂直のフロー。
• 厳密な行を持たず、コンテンツ主導のサイズ調整。
• 最小限のレイアウトルールと軽量な CSS。

Auto Layout から CSS Grid へのマッピング

目的はピクセル単位ではなく意図を翻訳することです。以下のマッピングを出発点に使ってください。

ステップ別ワークフロー

1. Figma 上でレイヤーを行／列ごとにグループ化します。
2. Frame やコンポーネントに名前をつけ、エクスポート後のクラス名が意味のわかるものになるようにします。
3. Grid の列数（例：2、3、4）とブレークポイントのルールを決定します。
4. エクスポート後、ギャップをスペーシングトークンにマッピングします。
5. minmax() やブレークポイントクラスを使ってレスポンシブ性を調整します。

Tailwind マッピングのコツ

• まずは grid + gap-* から始めましょう。
• 固定列には grid-cols-*、流体レイアウトには grid-cols-[repeat(auto-fit,minmax(240px,1fr))] を使います。
• スペーシングは設定（gap-4、gap-6 など）に厳密に合わせましょう。

レスポンシブ戦略

• モバイルファースト：まず 1 列で始め、md/lg で列数を増やします。
• コンテンツ対応の列：auto-fit と minmax を組み合わせて不自然な隙間を防ぎます。
• オーバーフローの確認：長いタイトルや可変するコンテンツ高さを検証します。

よくある落とし穴

• Frame を過剰にネストし、不要な Grid ラッパーができてしまう。
• 本来のサイズを無視する。テキスト量の多いカードは高い行が必要です。
• トークンの不一致。Tailwind のスケールにないスペーシングがエクスポートされてしまう。

リリース前のチェックリスト

• Grid がデザインシステムのスペーシングに整合している。
• ブレークポイントがプロダクトのレイアウトルールに合致している。
• コンポーネントが Grid の文脈外でも再利用できる。

FAQ

すべての Auto Layout を Grid に変換すべきですか？
二次元的な制御が必要な場合のみ Grid を使いましょう。それ以外は Flex のほうがシンプルで軽量です。

プラグインは必要ですか？
必須ではありませんが、優れたエクスポートツールは時間を節約します。選択肢は Figma to Code Converter をご覧ください。

レイアウトシフトを防ぐには？
予測可能な列幅を設定し、実際のコンテンツでテストしましょう。

おすすめのツール

比較ページ でエクスポーターと Grid サポートを比較しましょう。

次のステップ

• Figma to Code ハブを探索する。
• 比較ガイド でレスポンシブエクスポートのコツを確認する。

公式資料

• MDN: CSS Grid
• Locofy ドキュメント
• Anima ドキュメント
• Locofy 料金
• Anima 料金