MarkupGen と Figma Dev Mode の違いとは
Figmaのデザインを実際のコードに落とし込んだことがあるなら、この2つの名前を目にしたことがあるかもしれません。Figma Dev ModeとMarkupGenは、どちらもデザインとコードの橋渡しを楽にするために存在していますが、実は解決している課題の場所が異なります。それぞれが本当に得意なことを整理してみます。
Figma Dev Modeが得意なこと
Figma Dev ModeはFigma本体に組み込まれたモードで、デザインを実装する開発者向けに作られています。大まかに言えば、これは検査ツールです。レイヤーやコンポーネントを選択すると、余白・色・タイポグラフィといった背後の数値が表示され、そのレイヤー用に自動生成されたコードスニペット（一般的にはCSS、あるいはiOS・Android向けの出力など）も確認できます。
これは実際にとても便利で、他のどのツールにもない強みがあります。それは、デザイナーと開発者がすでに一緒に作業しているFigmaの中で完結するという点です。開発者はDev Modeを開いてデザインをクリックしていくだけで、誰にも聞かずにコンポーネントの構造を正確に把握できます。
とはいえ、大枠で見るとDev Modeは検査とレイヤー単位のスニペット出力にとどまり、完成した、そのまま出荷できるページやコンポーネントファイルを生成するものではありません。表示された内容を実際のファイル――レイアウト構造やレスポンシブ対応まで組み立てられたもの――にするのは、依然としてレイヤーごとに手作業で行う開発者の仕事です。
MarkupGenが違うアプローチをしている点
MarkupGenは異なる出発点を取っています。レイヤーごとに数値を検査するのではなく、フレーム全体を受け取り、構造化された完成ファイルを出力します。これはFigma用のプラグインを備えたSaaSプラットフォームで、ワークフローは次の4ステップです。
- フレームをエクスポート — MarkupGenのプラグインを使ってFigmaからエクスポートすると、構造・スタイル・画像が一度にワークスペースに取り込まれます。
- AIがHTML/CSSを構築 — デザインの実際の構造とスタイルに基づいて生成されます。大まかな推測ではありません。
- コンテンツ・フォント・レイアウトを視覚的に調整 — エクスポート前に、アプリ内のエディターで行えます。
- 最終的なコード一式をエクスポート — 通常のHTML/CSS、Tailwind CSS、Reactコンポーネントの中から、プロジェクトに合った形式を選べます。
レイヤー単位ではなくフレーム単位で処理するため、次のような特徴が生まれます。
- Auto Layoutがフレーム全体としてFlexboxにマッピングされる。 フレーム全体の方向・gap・パディング・整列が、自分でつなぎ合わせる必要のある断片的なスニペットではなく、一貫したひとつのFlexbox構造になります。
- レスポンシブ対応が自動生成される。 デザイン自体のFigmaリサイズ制約に基づいて生成されるため、ブレークポイントを推測する必要がありません。
- 出力は標準でセマンティックかつSEOに適している。 不要にネストされた
<div>はなく、見出しレベルが適切に構成されます。見た目だけ見出しっぽくスタイリングされた要素にはなりません。 - エクスポートごとに自動で品質スコアが付与される。 採用を決める前に、出力がどれだけ本番運用に近いかを把握できます。
では、どちらを使うべきか
| Figma Dev Mode | MarkupGen | |
|---|---|---|
| 対象範囲 | 個々のレイヤー・コンポーネント | フレーム全体 |
| 出力内容 | ハンドオフ用の数値とコードスニペット | 完成したHTML/CSSまたはReactファイル |
| 動作場所 | Figma内 | 独立したワークスペース + Figmaプラグイン |
| 向いている用途 | 既存デザインの検査 | すぐ使えるファイルやコンポーネントの取得 |
実際のところ、この2つは互いに排他的なものではありません。Dev ModeはFigma上でデザインを検査・理解するのに適した方法であり、そのように使うこと自体は何も問題ありません。MarkupGenは、検査した数値から手作業で組み立てるのではなく、最初から構造化された完成ファイルを出発点にしたいチームのために、その先を引き継ぎます。あくまで補完的な次のステップであり、検査ツールが不要になるという主張ではありません。
プロジェクトはワークスペース内で非公開に保たれ、MarkupGenは他の顧客向けのモデル学習にあなたの非公開デザインを使用しません。無料プランで始められ、必要に応じて有料プランも用意されています。
フレーム全体がどのように動くコードになるのか知りたい場合は、FigmaデザインをHTMLに変換するステップバイステップガイドを読むか、自分のフレームでMarkupGenを無料で試すのがおすすめです。ご質問があればsupport@markupgen.comまで、またはトップページからどうぞ。