MarkupGen と Figma Dev Mode の違いとは

Figmaのデザインを実際のコードに落とし込んだことがあるなら、この2つの名前を目にしたことがあるかもしれません。Figma Dev ModeとMarkupGenは、どちらもデザインとコードの橋渡しを楽にするために存在していますが、実は解決している課題の場所が異なります。それぞれが本当に得意なことを整理してみます。

結論: Figma Dev Modeはデザインをレイヤーごとに検査し、自分で組み立てるための数値やコードスニペットを提供します。MarkupGenのFigma to セマンティックHTML変換ツールはフレーム全体を受け取り、完成した、そのまま使えるHTML/CSS/Reactファイルを出力します。両者は競合するものではなく補完し合う関係です——検査にはDev Mode、完成した出発点を得るにはMarkupGenを。

Figma Dev Modeが得意なこと

Figma Dev ModeはFigma本体に組み込まれたモードで、デザインを実装する開発者向けに作られています。大まかに言えば、これは検査ツールです。レイヤーやコンポーネントを選択すると、余白・色・タイポグラフィといった背後の数値が表示され、そのレイヤー用に自動生成されたコードスニペット（一般的にはCSS、あるいはiOS・Android向けの出力など）も確認できます。

これは実際にとても便利で、他のどのツールにもない強みがあります。それは、デザイナーと開発者がすでに一緒に作業しているFigmaの中で完結するという点です。開発者はDev Modeを開いてデザインをクリックしていくだけで、誰にも聞かずにコンポーネントの構造を正確に把握できます。

とはいえ、大枠で見るとDev Modeは検査とレイヤー単位のスニペット出力にとどまり、完成した、そのまま出荷できるページやコンポーネントファイルを生成するものではありません。表示された内容を実際のファイル――レイアウト構造やレスポンシブ対応まで組み立てられたもの――にするのは、依然としてレイヤーごとに手作業で行う開発者の仕事です。

MarkupGenが違うアプローチをしている点

MarkupGenは異なる出発点を取っています。レイヤーごとに数値を検査するのではなく、フレーム全体を受け取り、構造化された完成ファイルを出力します。これはFigma用のプラグインを備えたSaaSプラットフォームで、ワークフローは次の4ステップです。

1. フレームをエクスポート — MarkupGenのプラグインを使ってFigmaからエクスポートすると、構造・スタイル・画像が一度にワークスペースに取り込まれます。
2. AIがHTML/CSSを構築 — デザインの実際の構造とスタイルに基づいて生成されます。大まかな推測ではありません。
3. コンテンツ・フォント・レイアウトを視覚的に調整 — エクスポート前に、アプリ内のエディターで行えます。
4. 最終的なコード一式をエクスポート — 通常のHTML/CSS、Tailwind CSS、Reactコンポーネントの中から、プロジェクトに合った形式を選べます。

レイヤー単位ではなくフレーム単位で処理するため、次のような特徴が生まれます。

• Auto Layoutがフレーム全体としてFlexboxにマッピングされる。 フレーム全体の方向・gap・パディング・整列が、自分でつなぎ合わせる必要のある断片的なスニペットではなく、一貫したひとつのFlexbox構造になります。
• レスポンシブ対応が自動生成される。 デザイン自体のFigmaリサイズ制約に基づいて生成されるため、ブレークポイントを推測する必要がありません。
• 出力は標準でセマンティックかつSEOに適している。 不要にネストされた<div>はなく、見出しレベルが適切に構成されます。見た目だけ見出しっぽくスタイリングされた要素にはなりません。
• エクスポートごとに自動で品質スコアが付与される。 採用を決める前に、出力がどれだけ本番運用に近いかを把握できます。

では、どちらを使うべきか

実際のところ、この2つは互いに排他的なものではありません。Dev ModeはFigma上でデザインを検査・理解するのに適した方法であり、そのように使うこと自体は何も問題ありません。MarkupGenは、検査した数値から手作業で組み立てるのではなく、最初から構造化された完成ファイルを出発点にしたいチームのために、その先を引き継ぎます。あくまで補完的な次のステップであり、検査ツールが不要になるという主張ではありません。

無料のFigma Dev Mode代替を探していますか？

ここで別枠として触れておきたい点があります。ここ数年、Dev Modeへのアクセスは、すべてのFigmaプランのすべてのシートで無料のままとは限らなくなってきており、チームによっては、デザインを検査するためだけに開発者一人ひとりにDev Modeシートを割り当てることが、当たり前のコストではなく追加コストになりつつあります。「figma dev mode alternative」や「free alternative to figma dev mode」といった検索が増えているのも、おそらくこうした背景があるからでしょう。検査のためだけにシート課金を払わずに、デザインからコードへ進みたいチームが増えているのです。

もし自分たちがそうした状況にあるなら、MarkupGenは検討する価値があります。MarkupGen自体に無料プランがあり、利用量がそれを超えた場合にのみ有料プランへ移行します。また、開発者に渡されるのはレイヤーごとに再検査が必要な数値ではなく、完成したファイルやコンポーネントそのものなので、チームによってはDev Modeのシート数を全体的に減らせる場合があります。開発者はDev Modeを開く代わりに、エクスポートされたコードをそのまま受け取ればよいからです。検査ツールを完全に置き換えるものではありませんが、実際に使えるファイルを手に入れるという部分に関しては、正真正銘無料で始められる選択肢です。

プロジェクトはワークスペース内で非公開に保たれ、MarkupGenは他の顧客向けのモデル学習にあなたの非公開デザインを使用しません。無料プランで始められ、必要に応じて有料プランも用意されています。

フレーム全体がどのように動くコードになるのか知りたい場合は、FigmaデザインをHTMLに変換するステップバイステップガイドを読むか、自分のフレームでMarkupGenを無料で試すのがおすすめです。ご質問があればsupport@markupgen.comまで、またはトップページからどうぞ。