Figma Auto LayoutからReactへ:フレームからコンポーネントへ

簡単な答え： FigmaのAuto Layoutプロパティ（direction、gap、padding、整列）は、Reactでも他の出力形式と同じFlexboxのCSSにマッピングされます。異なるのは、Reactがその上に追加するすべての要素です。どのAuto Layoutフレームをそれぞれ独立したコンポーネントにするか、Figmaのコンポーネントバリアントをpropsにどうマッピングするか、繰り返しや条件によって変化する子要素をどう扱うか——こうした判断が必要になります。

CSSのマッピングは変わらない——変わるのはコンポーネントの境界

すでにAuto LayoutがFlexboxにどうマッピングされるかを知っている場合、スタイリングの部分はおなじみのはずです。directionはflex-directionに、gapはgapに、paddingはpaddingに、整列はjustify-content/align-itemsになります。Reactになっても、この対応関係は何も変わりません。

Reactが追加するのは、CSSレイヤーの上にある構造です——フラットなHTML/CSSエクスポートでは考える必要のなかった判断です。

手作業での変換でよくある失敗

• コンポーネント化しすぎること。 入れ子になったAuto Layoutフレームをすべて別々のコンポーネントファイルにすると、再利用性を高めることなく間接参照だけが増えた、一行だけのラッパーコンポーネントが延々と連なるツリーができあがります。フレームが独立したコンポーネントになる価値があるのは、他の場所でも再利用されるか、切り出すことでコードが本当に読みやすくなる場合だけです。
• バリアントのマッピングを失うこと。 Figmaのコンポーネントバリアント（例えばボタンのdefault/hover/disabledといった状態）は、ハードコードされた4つの別々のコンポーネントではなく、propsになるべきものです。これを省略すると、本来ひとつの再利用可能なボタンだったものが、状態ごとにコピー＆ペーストされたマークアップになってしまいます。
• 本来動的であるべきものをハードコードすること。 デザイン内にサンプル項目が3つあったからという理由でフレームが3回繰り返されている場合、それは同じJSXの3つのコピーになるべきではなく、配列からレンダリングされるひとつのコンポーネントになるべきです。
• デザインが流動的なリサイズを意図しているのに、固定ピクセル幅を使うこと。 Auto Layoutの「コンテナいっぱいに広がる」挙動は、コンポーネントのCSSではflex-growやパーセンテージベースのサイズ指定に変換されるべきであり、元のフレームのレスポンシブな意図を壊してしまう固定widthにすべきではありません。

MarkupGenがこれをどう扱うか

MarkupGenのReact出力は、他の出力形式と同じ4ステップのワークフローに従います。プラグインでフレームをエクスポートすると、構造・スタイル・画像・コンポーネントの関係性がまとめて取り込まれます。次にAIがその実際の構造からコードを構築します。必要であればアプリ内エディタでコンテンツ・フォント・レイアウトを調整し、最後に最終パッケージをエクスポートします。Auto Layoutのdirection・gap・padding・整列は、プレーンCSSエクスポートの場合と同じように、各コンポーネント内のFlexboxルールにマッピングされ、リサイズ制約は固定サイズではなくレスポンシブな挙動として引き継がれます。各エクスポートには自動でAI品質スコアが付与され、ライブプレビューを元のデザインと比較するため、そのエクスポートを出荷前にもう一度見直すべきかどうかがひと目でわかります。

FigmaファイルからReactコンポーネントまでのステップバイステップの全体像——出力形式の選択も含めて——は、Figma to React: A Practical Workflowを参照してください。

自分のデザインで試してみる

実際のデザインのAuto Layout構造がReactコンポーネントにどう変換されるかを見ることは、そのコンポーネント化が自分で手作業で組んだ場合と一致しているかを判断する最も早い方法です。自分のFigmaファイルでMarkupGenを無料で試してみるか、含まれる内容を知りたい場合はFigma to Reactコンバーターのページをご覧ください。