MarkupGenのFigma→HTML/CSS変換機能は実際どう動くのか

Figmaファイルをデベロッパーに渡すと、たいてい同じような繰り返し作業が発生します。Auto Layoutを読み取ってFlexboxとして書き直す、デザインにすでに存在するpaddingやgapを測り直す、レスポンシブのブレークポイントをどこに置くか推測する、そして入れ子になった<div>を何十個も整理する——といった具合です。MarkupGenのFigma→HTML/CSS変換機能は、まさにこの手作業による「翻訳」工程を取り除くために作られています。

「Figmaからエクスポート」を押すと何が起きるか

フレームを選択してFigmaプラグイン経由で送信すると、MarkupGenはスクリーンショットを撮って構造を推測するのではなく、デザインの実際の構造・スタイル・画像を直接読み取ります。そのデータから：

• Auto Layoutが本物のFlexboxになる。 direction、gap、padding、alignmentはそれぞれ対応するFlexboxのプロパティにマッピングされます。おおよその近似ではありません。
• 制約がレスポンシブなブレークポイントになる。 リサイズの制約は、単一の固定幅ページではなく、柔軟なレスポンシブルールに変換されます。
• レイヤーがセマンティックなHTMLになる。 出力は、ラベルのない<div>の積み重ねではなく、意味のあるタグ（正しい見出し階層、セマンティック要素）を優先します。

出力フォーマットを選べる

すべてのプロジェクトが同じスタックを使うわけではありません。MarkupGenは、静的ページやビルド不要なプロジェクトに適した従来型のVanilla CSS、またはデザイン自体のスペーシング・カラー・タイポグラフィのトークンから直接生成されるユーティリティクラスを使ったTailwind CSSのどちらでも出力できます。

最初のエクスポートで終わらない

自動変換が作業の大部分を担いますが、デザインからコードへの変換が100%機械的に完結することは稀です。エディターでは、コンテンツ・フォント・レイアウトをライブプレビューを見ながら視覚的に調整できます。さらに、すべてのエクスポートにAIによる品質スコアが自動で付与されるため、出力がそのまま本番投入できる状態か、もう一手間必要かが一目でわかります。

どんな人向けか

デザイナーは、デベロッパーによる作り直しを待たずに自分でインターフェースを完成させるために使います。デベロッパーは、ページをゼロから書く代わりに、信頼できる叩き台として磨き上げるために使います。どちらの場合も、「デザイン完了」から「本番リリース」までの距離が縮まります。

自分のFigmaファイルでこの機能を試してみたい方は、無料で変換することができます。クレジットカードは不要です。

先にざっと概要を見たいですか？Figma to HTML & CSSコンバーターページで、最初から何が得られるかを確認できます。