FigmaをHTMLに変換するのにプラグインは必要?

「figma to html without plugin」と検索する人は、たいてい次のどちらかを考えています。何もインストールしたくない、または第三者のツールにFigmaアカウントへのアクセスを許可することに慎重になっている。どちらも自然な発想です。プラグインなしの代替手段が実際に何をしているのか、そしてどこで見劣りするのかを見ていきます。

「プラグインなし」が意味すること

プラグインの手順を省くツールは、次の2つの方法のどちらかでデザインデータを取得します。

• 共有されたFigmaリンク + Figma REST API。 公開(または共有)されたファイルリンクを貼り付けると、ツールはOAuthトークンを要求し、FigmaのAPI経由でファイルデータを取得します。これは機能はしますが、アカウントやチーム全体を読み取れるトークンを付与することになります — 1つのフレームを渡すよりもはるかに広いアクセス範囲です。
• スクリーンショットやエクスポートした画像。 PNGをアップロードするか画像を貼り付けると、AIビジョンモデルがピクセルからレイアウトを推測します。Auto Layoutのデータも、実際のスペーシングの値も、コンポーネント構造もありません — その画像が「おそらく」どんなコードだったかという推測があるだけです。

どちらの方式もすべてのユースケースで間違っているわけではありません。ですが、どちらもプラグインなら無料で得られる情報を手放しています。

プラグインが実際に手放すもの、その見返りに得るもの

Figmaプラグインは、Figma自身のサンドボックス化されたプラグインAPI内で動作します。開いているファイルしか見えず、あなたが明示的にフレームを選択してエクスポートしたときにしかデータを送信しません — アカウント全体でも、他のプロジェクトでもありません。これは永続的なOAuthトークンよりも狭いアクセス権限であり、広いものではありません。

その見返りに、本物のデータが手に入ります。Auto Layoutの方向・gap・paddingは実際の値として、リサイズ制約、コンポーネント構造、テキストスタイル、画像アセットまで — すべてスクリーンショットから再構築するのではなく、デザインから直接読み取られます。それがAuto LayoutがきれいにFlexboxへマッピングされるのと、AIモデルが画像からスペーシングを当てずっぽうで推測するのとの違いです。

プラグインをインストールする実際のコスト

Figmaプラグインのインストールにかかる手間は、リンクをクリックするのとほぼ同じです。ファイルを開き、Communityタブ(またはチームのプライベートプラグイン)からプラグインを追加すれば、以降は右クリックメニューに表示されます。そのためにFigmaを離れる必要は一切なく、OAuthベースのWebツールのようにアカウント全体への権限を求める別画面が出てくることもありません。

MarkupGenの立ち位置

MarkupGenは意図的にプラグイン方式を採用しています。Figma内でフレームを選択し、プラグインでワークスペースに送信すると、AIがそのスクリーンショットではなく、デザインの実際の構造からHTML、CSS、Tailwindを生成します。1回限りの、範囲が限定されたプラグインのインストールを避けることがワークフロー上どうしても譲れない条件であれば、リンクベースやスクリーンショットベースのツールが合っています。そのインストールと引き換えに、推測ではなく実際のデザインから導き出されたマークアップを得たいなら、それこそがプラグインの存在理由です。

無料で変換する — クレジットカード不要。