これは便利すぎる! Webページを1クリックで編集可能なFigma用に変換できるプラグイン「html.to.design」が神アップデートされました
Post on:2023年6月19日
WebページのURLを入力し、1クリックするだけで、そのページの編集可能なFigmaファイルに変換できる無料プラグインを紹介します。
去年紹介しましたが、先日ver.2にアップデートされました!
一括インポート、マルチビューポート、マルチテーマ、テキストとカラーのスタイル生成ができるようになり、さらに便利になりました。
AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。

html.to.design -Figma
デスクトップとスマホも同時に!
1クリックでWebページをFigmaに変換
html.to.designは、URLを入力して1クリックするだけでFigmaファイルに変換できる無料のプラグインです。さまざまなWebページを編集可能なFigmaデザインに変換します。
※無料版は、30日ごとに最大12個のインポートができます。
- すべてをゼロから作成することなく、別のWebサイトを使用して独自のデザインのインスピレーションを得られます。
- 既存のWebサイトをリデザインする。
- 面倒なスクリーンキャプチャを行わずに、作成したサイトを元のデザインと比較できます。
- Figmaでサイトの視覚的なアクセシビリティを確認する。
- デザインが欠落している既存のプロジェクトに参加し、簡単にインポート。
ver.2.0でさらに便利になりました。
- 一括インポート(複数のWebページを一括でインポートできます)
- マルチビューポート(複数のビューポートで生成できます)
- マルチテーマ(ライトモード・ダークモードで生成できます)
- テキストとカラーのスタイル生成
詳しくは、公式ドキュメントをご覧ください。
というわけで、いくつか試してみました。まずは、。AppleをFigmaに変換。

https://www.apple.com/をFigmaに変換
1,2分で完了しました。もちろん、ページ全体がFigmaに変換され、すべてが編集可能になっています。

https://www.apple.com/をFigmaに変換
当ブログもFigmaに変換してみました。
日本語の文字化けもなく、問題無く変換されています。

https://coliss.com/をFigmaに変換
複数のビューポートサイズでFigmaファイルを生成することもできます。たとえば、デスクトップとスマホにすると、下記のようになります。
※無料版は個別に生成、有料版だと同時に生成できます。

https://coliss.com/をFigmaに変換
html.to.designの利用方法
html.to.designを利用するには、下記ページから。

右上「使ってみる」ボタンをクリックすると、利用できます(要ログイン)。
ブラウザから起動できる機能拡張もリリースされています。

機能拡張を使用すると、ページ全体とセクションからFigmaファイルを生成できます。

Chromeでhtml.to.designの機能拡張を起動
html.to.designの使い方
html.to.designの使い方は、簡単です。
Figmaにアクセスし、上部の「リソース」アイコンから「プラグイン」を選択し、「html.to.design」を実行します。

「html.to.design」を実行
「html.to.design」を実行すると、パネルが表示されるので、URLを入力して「Import」ボタンをクリックするだけです。
デバイス(デスクトップ・ラップトップ・タブレット・スマホ)やテーマ(ライト・ダーク)も選択できます。

「Import」ボタンをクリック
Figmaファイルが生成されるまで、しばし(数秒)待ちます。

Figmaに変換中
デフォルトは「https://www.apple.com」になっているので、そのままでも、好きなURLを入力してもOKです。

https://www.apple.comをFigmaに変換
sponsors