これは便利すぎる！ Webページを1クリックで編集可能なFigma用に変換できるプラグイン「html.to.design」が神アップデートされました
Post on:2023年6月19日
sponsors
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
