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

ChatGPTを使えばモックを簡単に作れるというネット情報を見て、[ChatGPTでBootstrapを使ったHTMLのモックを作ってみる - Qiita](https://qiita.com/chovin/items/9842c7e1b7cc30c097fd)や[ChatGPTを使ってDockerコンテナでNext.jsのモックを動かす - Qiita](https://qiita.com/chovin/items/562fa93c2620dc2623d1)をこれまでやってみました。

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

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


# HTMLで作った画面をFigmaにインポートする方法
Figmaは、ブラウザ上のみで使用しています。初めてFigmaを使うときは以下の記事が参考になります。

https://qiita.com/itou_ot/items/41d593859e871566b05e

## ①HTMLファイルを作成する
今回は、[ChatGPTでBootstrapを使ったHTMLのモックを作ってみる](https://qiita.com/chovin/items/9842c7e1b7cc30c097fd) で作った「ファイルアップロード画面のHTML」を使用します。
ChatGPTが出力したHTMLをローカルの任意の場所にHTMLファイルとして保存します(ファイル名は任意)。

## ②Chrome拡張機能「html.to.design」を設定する
1. [Chrome ウェブストア](https://chromewebstore.google.com/?hl=ja) をChromeで表示する
1. 検索ボックスに「html.to.design」を入力し[「html.to.design」のChrome拡張機能](https://chromewebstore.google.com/detail/htmltodesign/ldnheaepmnmbjjjahokphckbpgciiaed?hl=ja)を検索して表示 > [Chromeへ追加]ボタンを押下して拡張機能を追加する
    - ![a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1743295/b91ed180-521c-d424-e22b-b8e304d4eb52.gif)
1. Chromeのメニューに追加された「html.to.design」アイコンを右クリック > [拡張機能を管理]から管理画面を開く
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1743295/9e3ceaf8-261b-f660-aae2-93e201cd7964.png)
1. 「ファイルの URL へのアクセスを許可する」を「ON」にする
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1743295/ef00c5f4-836e-7e5a-56cc-c7d45cc92aae.png)
    - この設定を忘れるとローカルファイルから「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に取り込むファイルを作成する

1. ①で作成したHTMLファイルをChromeで表示する
1. Chromeのメニューに追加された「html.to.design」アイコンをクリック
1. [Full page]ボタンを押下してFigmaに取り込むファイル(.h2d)を任意の場所にダウンロードする

![a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1743295/22849cc3-2b9b-59a6-b0f6-9d016bf111e8.gif)

## ④Figmaに「html.to.design」でファイルをインポートする
Figmaのプラグインである[html.to.design - Convert websites to Figma designs | Figma](https://www.figma.com/community/plugin/1159123024924461424/html-to-design-convert-websites-to-figma-designs)を使用します。

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

![a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1743295/ef42cbfe-765d-7955-275f-a559414b1d37.gif)

## おまけ
取込時のオプションを変えるとどうなるかを試して、並べてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1743295/00b3c819-a94e-7d33-9966-d35e37b6c51b.png)

:::note warn
「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?](https://html.to.design/docs/what-is-html-to-design#ready-to-try-it-out)
:::