本当に編集できるレイヤーを作る、Figma HTML プラグイン

HTML to Frames は 1 つの製品に 3 つの入り口があり、どこから入っても、最後はプラグインの中で同じ編集できる結果になります。

Figma プラグイン単体

公開アドレスがあるページなら、これが最適です。リンクを 1 件、または Multiple で最大 10 件貼ると、取得サービスが各ページを隔離されたブラウザで一般の訪問者と同じように描画します。希望すれば Cookie バナーやポップアップも非表示にできます。ローカルの HTML ファイル、サイトのフォルダ、30 MB までの .zip も同じ流れで処理され、インポートが終わるとすぐに削除されます。

プラグイン＋Chrome 拡張機能

取得サービスが届かないページに向いています。ログインが必要なダッシュボード、localhost、社内ネットワーク内のステージング環境、メニューを開いた状態や入力済みのフォームなど特定の状態のページです。無料の Chrome 拡張機能 は、あなたのブラウザに表示されているものを取得し、Send to Figma で開いているプラグインに直接送ります。

プラグイン＋AI ツール

まだ HTML が存在しないときに向いています。プラグインの AI タブから Claude Code、Claude Desktop、Cursor など MCP 対応クライアントを接続し、ページのデザインを頼みます。結果はプラグインに届き、あなた自身のプランでインポートされます。設定方法は AI から Figma へ をご覧ください。

チームで使うツールを決める前に、候補のプラグインそれぞれで同じ 3 ページを取り込んでみてください。マーケティング用のページ、情報量の多いプロダクト画面、ダークテーマのページです。そのうえで、次の 5 点を確認します。

1. テキストを編集できるか。 見出しをクリックして文字を打ってみてください。画像の一部になっているなら、それはデザインではなく参考資料です。
2. リサイズしてもオートレイアウトが保たれるか。 フレームの幅を広げてみてください。行は伸び、中央寄せの要素は中央のまま、何も重ならないのが正しい状態です。
3. 幅は正しいか。 1200 px で設計されたサイトが、1440 px に押し込まれて届くべきではありません。HTML to Frames は本来のデザイン幅を実測し、それを Site width と呼んでいます。
4. スタイルを再利用できるか。 何百もの生の HEX 値ではなく、カラーバリアブルやテキストスタイルになっているか、既存のデザインシステムが再利用されているかを確認します。
5. データはどこへ行くのか。 プライバシーポリシーを読んでください。私たちの取得サービスは結果を一度だけ届け、ディスクには何も残さず、アップロードされたファイルはインポート直後に削除します。詳しくは セキュリティとデータの取り扱い をご覧ください。

5 つすべてを満たすツールなら、デモの中だけでなく、実際の案件で時間を節約してくれます。

無料プランには、毎月 10 回のインポート、1 回につき 1 画面、最大 10 件のリンクの一括インポート、オートレイアウト、フォントの置き換えが含まれます。Pro はリリース記念価格で月額 $7（通常 $9）で、月 1,000 回のフェアユース上限のもとでインポートが無制限になるほか、1 回最大 4 画面、任意の幅、スタイルとバリアブル、手持ちのスタイルへの吸着（Snap）、コンポーネントとホバー状態、ライト＋ダーク、詳細なレイヤー、参照用スクリーンショット、待機時間の延長が加わります。Team はリリース記念価格で月額 $22 で、共有ライセンスキーにより 5 席まで使えます。

1 回のインポートは 1 ページとその全画面なので、同じページのデスクトップ・タブレット・モバイルは 1 回として数えます。Chrome 拡張機能での取得も 1 回です。カウンターは毎月 UTC でリセットされます。詳しくは 料金ページ をご覧ください。