WebページをFimgaのデザインに変換する - html.to.design を利用

アルフォンヌ

質問: 既存ページのデザイン修正

既存のページに対してデザイン修正の依頼がありました。 Figmaでデザイン修正作業をしようと思うのですが、スクリーンキャプチャを取得して、上から新デザインで上書きしようかと考えているのですが、キャプチャ部分の画像の解像度が下がったりして微妙な気がしています。 既存のページをFigmaデザインにする良い方法はありますでしょうか?

html.to.design を利用して、既存のWebページをFigmaのデザインに変換する手順を紹介します。

手順

Webページの確認

変換したいWebページを確認します。今回は下図のページをFigmaのデザインに変換します。

html.to.design の起動

Figmaでhtml.to.design を起動します。
以下のURLにアクセスします。下図のページが表示されます。

• https://www.figma.com/community/plugin/1159123024924461424/html-to-design-by-divriots-import-websites-to-figma-designs-web-html-css

[次で試す...]ボタンをクリックします。ドロップダウンリストにFigmaのデザインファイル一覧が表示されます。 HTMLページを変換したデザインを配置したいデザインファイルを選択します。

別のアクセス方法

2回目以降やデザインファイルからアクセスする場合は、デザインファイルを開きます。


下部のツールバーの[アクション]ボタンをクリックします。



アクションのダイアログが表示されますので、html.to.designを選択します。


履歴にない場合は、上部の検索ボックスに "html.to.design"で検索します。一覧に表示されますので、クリックします。

プラグインのダイアログが表示されます。[実行]ボタンをクリックしま鵜s。

html.to.design のダイアログが表示されます。


[import via URL]のテキストボックスにFigmaのデザインに変換したいページのURLを入力します。 必要に応じて、下部の[Viewports] [Themes] [Languages]を変更します。
[Viewports] [Themes] [Languages]を変更する場合は、枠の右側にあるペンのアイコンボタンをクリックします。


[Multi import options]の画面gな表示されます。複数の横幅や、ライトモードダークモードそれぞれのデザインをFigma化することもできます。

[Import options]の画面が表示されます。今回は、[Use Autolayouts] [Create styles & valiabled]のスイッチをオンにして 実行することにします。設定ができたら[Proceed]ボタンをクリックします。

ページを読み込みFigmaのデザインに変換する処理が始まります。

変換ができると[Import completed]のダイアログが表示されます。

Webページの内容がデザインファイルに反映されています。レイアウトも元のページとほぼ同じです。


テキストも画像ではなく編集可能なテキストとして表現できています。

html.to.design を利用して、WebページをFigmaのデザインに変換できました。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。