顧客から伺った要望を基にChatGPTでHTMLのモックを作った後、「チーム内で意見をもらって更新」したり「顧客に確認してもらって意見をもらってブラッシュアップしたい」こともあります。

そんな時は、作ったHTMLファイルをFigmaに取り込んで共有し、みんなで更新できるようすると便利そうです。
そこで、「HTMLファイル」を「html.to.design」で「Figma」に取り込んでみました。

HTMLで作った画面をFigmaにインポートする方法

Figmaは、ブラウザ上のみで使用しています。初めてFigmaを使うときは以下の記事が参考になります。

①HTMLファイルを作成する

今回は、ChatGPTでBootstrapを使ったHTMLのモックを作ってみるで作った「ファイルアップロード画面のHTML」を使用します。
ChatGPTが出力したHTMLをローカルの任意の場所にHTMLファイルとして保存します(ファイル名は任意)。

Chrome ウェブストアをChromeで表示する
検索ボックスに「html.to.design」を入力し「html.to.design」のChrome拡張機能を検索して表示 > [Chromeへ追加]ボタンを押下して拡張機能を追加する
Chromeのメニューに追加された「html.to.design」アイコンを右クリック > [拡張機能を管理]から管理画面を開く
「ファイルの URL へのアクセスを許可する」を「ON」にする
- この設定を忘れるとローカルファイルから「html.to.design」用のファイルを出力する際に以下のメッセージが表示されて出力できない
  - Allow access to file URLs authorization is necessary for local files, please enable it in extension settings

Figmaをブラウザで開く > [+ Design file]ボタンから新規作成画面を表示する
メニューの[Resources] > 検索ボックスに「html.to.design」を入力して検索 > [html.to.design - Convert websites to Figma]を選択してポップアップを開く
ポップアップのファイルアップロード欄に③でダウンロードしたファイル(.h2d)をアップロードする
[Go]ボタンで取り込むとHTMLファイルで作った画面がFigmaに取り込まれる
微妙に表示が崩れているところは、手動で整えて完了

取込時のオプションを変えるとどうなるかを試して、並べてみました。

「html.to.design」は無料版の場合、1か月に12回までしかインポートできないのでどんどん試しているとインポートできなくなるのでご注意ください。

Try html.to.design with 12 free imports a month to discover the difference it can make in your design workflow.
What is html.to.design?