ChatGPTを使えばモックを簡単に作れるというネット情報を見て、ChatGPTでBootstrapを使ったHTMLのモックを作ってみる - QiitaやChatGPTを使ってDockerコンテナでNext.jsのモックを動かす - Qiitaをこれまでやってみました。
顧客から伺った要望を基にChatGPTでHTMLのモックを作った後、「チーム内で意見をもらって更新」したり「顧客に確認してもらって意見をもらってブラッシュアップしたい」こともあります。
そんな時は、作ったHTMLファイルをFigmaに取り込んで共有し、みんなで更新できるようすると便利そうです。
そこで、「HTMLファイル」を「html.to.design」で「Figma」に取り込んでみました。
HTMLで作った画面をFigmaにインポートする方法
Figmaは、ブラウザ上のみで使用しています。初めてFigmaを使うときは以下の記事が参考になります。
①HTMLファイルを作成する
今回は、ChatGPTでBootstrapを使ったHTMLのモックを作ってみる で作った「ファイルアップロード画面のHTML」を使用します。
ChatGPTが出力したHTMLをローカルの任意の場所にHTMLファイルとして保存します(ファイル名は任意)。
②Chrome拡張機能「html.to.design」を設定する
- 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
③Chrome拡張機能「html.to.design」でFigmaに取り込むファイルを作成する
- ①で作成したHTMLファイルをChromeで表示する
- Chromeのメニューに追加された「html.to.design」アイコンをクリック
- [Full page]ボタンを押下してFigmaに取り込むファイル(.h2d)を任意の場所にダウンロードする
④Figmaに「html.to.design」でファイルをインポートする
Figmaのプラグインであるhtml.to.design - Convert websites to Figma designs | Figmaを使用します。
- 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?