これは便利すぎる！ Webページを1クリックで編集可能なFigma用に変換できるプラグイン「html.to.design」が神アップデートされました

WebページのURLを入力し、1クリックするだけで、そのページの編集可能なFigmaファイルに変換できる無料プラグインを紹介します。

去年紹介しましたが、先日ver.2にアップデートされました！
一括インポート、マルチビューポート、マルチテーマ、テキストとカラーのスタイル生成ができるようになり、さらに便利になりました。

AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。

html.to.design -Figma
デスクトップとスマホも同時に！

• 1クリックでWebページをFigmaに変換
• html.to.designの利用方法
• html.to.designの使い方

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を利用するには、下記ページから。

html.to.design -Figma

右上「使ってみる」ボタンをクリックすると、利用できます（要ログイン）。

ブラウザから起動できる機能拡張もリリースされています。

html.to.design -Chromeウェブストア

機能拡張を使用すると、ページ全体とセクションから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に変換