html.to.design入門：WebサイトやHTMLを編集可能なFigmaデザインに変換する

2026年6月18日

既存のWebサイトを、1からではなく“取り込んで”デザインを始められたら――。html.to.design は、任意のWebサイトを編集可能なFigmaデザインに変換するツールです。Figmaプラグインとブラウザ拡張の2本立てで、再デザインやベンチマーク、素材抽出の時間を大きく短縮します。

html.to.design とは

html.to.design は、Figmaプラグインとブラウザ拡張から成り、WebページのHTML・CSS・コンポーネントを Figma の編集可能なレイヤーに変換します。スクリーンショットではなく“いじれるデザイン”として取り込めるのが肝。要素を1つずつ作り直す手間が消え、既存サイトをベースに改修・比較・素材の抜き出しができます。

主な使い方は3通り

① プラグインにURLを貼って変換

Figmaでファイルを開き、Actions > Plugins から html.to.design を起動。
変換したいページのURLを貼り付け（TABキーで複数URLを入れて一括変換も可）。
取り込み設定（ビューポート＝画面幅、ダーク/ライトテーマなど）を選んで「Import」。
数秒〜で、編集可能なFigmaデザインが生成される。

取り込み時に複数のビューポート・テーマをまとめて指定しておくと、PC版・モバイル版などを一度に変換でき、やり直しを減らせます。

② ブラウザ拡張で「見たまま」をキャプチャ

ログインの先にあるページや社内ネットワーク上のページ、特定の表示状態など、URLだけでは取れないものはブラウザ拡張の出番。対象ページを開いて拡張アイコンから「Capture」すると、画面で見えているとおりに取り込めます。Chrome・Edge・Arc・Brave・Opera・Vivaldi など Chromium系ブラウザに対応します。

キャプチャ後の取り込み方法は複数あります。

.h2d ファイルとして保存し、Figmaプラグインにドロップ
プラグインへ直接送信
Figma Make 用の .make ファイルとしてダウンロード
クリップボードにコピーして Figma に貼り付け（この方法ならプラグイン不要）

さらに ChatGPT・Bolt・Lovable などのAIツールの生成結果を、追加手順なしで直接キャプチャできる点も特徴です（AI生成LPの取り込みについては Bolt.new入門も参照）。

③ HTMLコードを貼り付けて変換

プラグインの「HTML」タブに、自分のHTML/CSSコードを貼り付け（または直接記述）すると、その場で編集可能なFigmaレイヤーになります。既存のコード、開発者から渡されたスニペット、AIが生成したランディングページなどを、手作業で作り直さずにデザインへ取り込めます。

取り込んだ後にうれしいこと

スタイルが自動でローカル化：テキストスタイル・カラースタイルが Figma のローカルスタイルとして自動生成され、以後のデザインにすぐ使える。
コラボが進む：旧サイトを編集可能な形で共有し、チームで要素を動かしながらリデザインを検討できる。
素材の抽出（Capture）：進行中プロジェクトに不足しているデザインアセットを、サイトから取り込める。
AI連携（MCP）：MCP経由でAIにデザイン作業の下地づくりやインスピレーション出しをさせられる。

料金プラン

無料から使え、用途に応じて有料プランがあります（料金は変動するため、最新は公式を確認してください）。

プラン	主な内容
Free	30日あたり最大10回の取り込み。URL取り込み／Chrome拡張／複数ビューポート／ダーク・ライト／不足フォントのダウンロード／Discordサポート
Pro	Freeの全機能＋取り込み無制限／高解像度画像／一括取り込み／再取り込みショートカット／優先サポート
Pro for teams	Proの全機能＋チーム管理ダッシュボード／法人向け請求