はじめに
自社の業務で、画面の改修をする際にFigmaを使って画面仕様書を作成したいと思い、Figmaを触り始めたのですが、すでに実装済みの画面を１からFigmaで作るのは骨が折れるなと思い、効率の良い方法を探していたときに、このプラグインを見つけました。
簡単に画面をFigmaに取り込むことができる「html.to.design」を紹介していきたいと思います！
html.to.designとは
「html.to.design」は、インターフェースデザインツールの「Figma」で使用できるサードパーティ製のプラグインです。
任意のWebサイトをとても簡単な操作でFigmaデザインに変換することができます。FigmaのプラグインからサイトのURLを入力するか、Chromeの拡張機能で変換用のファイルをダウンロードしてFigmaに取り込むことで、Figmaデザインに変換することができます。
html.to.designの使い方
今回はChromeのプラグインを使って、Webページの変換をやってみたいと思います。
※Figmaのアカウント作成済み、Chromeのインストール済み
Chromeの拡張機能を導入する
「html.to.design」プラグインをchromeウェブストアで検索し、Chromeに追加します。
Webサイトを取り込み用ファイルに変換する
Figmaに取り込みたいWebサイト（今回はクラウドスミスのブログサイトを使います）を開き、「html.to.design」の拡張機能をクリックすると以下の画面が表示されます。
画面サイズとテーマを選択して、「Capture Full Page」をクリックするだけで、Figma用ファイルをダウンロードすることができます。
Figmaのプラグインから「html.to.design」を起動
Figmaでプラグインを検索し、起動します。
ダウンロードしたファイルを取り込む
Import via the Chrome extesionの欄に、ダウンロードした変換用ファイルをドラッグアンドドロップすると、以下の画面が表示されます。
ここでは、Autolayout、HyperLinkなどを追加するか等の設定を行います。
取り込み完了！
「GO」をクリックして少し待つと取り込みが完了します。
これだけの操作でWebページをFigmaに取り込むことができます！
注意点
- 未公開の画面は、Figma側のプラグインのURL入力では変換することができない。
- すべて完璧に変換することができるわけでは無いので、修正が必要。
- 複雑な画面や動的な画面はうまく変換できないことがある。
- 無料版では、月に10回までしか変換することができない。
おすすめポイント！
Figma初心者でフロントエンドの技術も未熟な私にとって、「html.to.design」は神のようなプラグインでした。特に画面の改修をしたいけど、元の画面設計書が見つからない際は、非常に役に立つプラグインだと思います。
以下の2点については特に素晴らしい機能だと思います！
- 画面のスクロールを再現可能
- 複数の画面をインポートすると、画面遷移のプロトタイプを自動で設定してくれる
まとめ
Figma初心者におすすめのプラグインです！皆さんもぜひ使ってみてください！
