クライアントに要件をヒアリングする際、WFや仮デザインをが合った方がイメージしてもらいやすく、こう変えたい、もっとこうしたいと具体的な会話ができますよね。
ただ、WFやデザインを1から作るにはそれなりに時間がかかるし、ChatGPTで生成したWFは画像形式になってしまい、編集ができない。細かい部分まで手が届かないなどの問題に直面した方も多いのではないでしょうか？
この問題に直面し、Figmaで編集可能なデータをAIで生成できればいいのでは？という答えに辿り着きました。

ChatGPTにご相談してみたが・・・

ChatGPTにWFやデザインデータを生成してもらうと、jpgやpngなど編集不可なデータがほとんどでちょっと手直しすれば使えるんだけどな。。。ってものが生成されることが多いと思います。
実際に試したところ、jsonやSVGに書き出そうか？とすごく寄り添ってくれるんですが、なかなか僕の期待に応えてくれる出力形式が出てこない。。。
jsonだと、要素だけの生成になってしまうし、SVGだとなぜかページ全体が生成されなかったり、アウトライン化されたものを解除しないといけなくてすごく手間。
多少時間が短縮されますが、できることなら、WFやデザインを丸ごと生成、かつテキストの変更やアイコン、画像を置き換えができたらめっちゃ便利ですよね。

figmaに取り込める編集可能な形式とは

答えから言うと、HTMLファイルでした。HTMLがあれば、挙動の確認もできるし、一石二鳥です
ざっくり流れを確認すると
ChatGPTでデザインやWFを生成させる。→HTML化→ブラウザでそのHTMLを表示→figmaに取り込めるようのデータに変換→figmaに取り込む
こんな感じでChatGPTに依頼↓

figmaにはプラグイン（拡張機能）がインストールができる

figmaには、さまざまな種類のプラグインがあります。
無料で使える画像を提示してくれるものや、遷移図やフロー図作成を補助してくれるツールなどめっちゃあります。
その中で、いくつか使ってみましたが、
その中でも、特におすすめなのがこちらです。
https://html.to.design/home/
https://chromewebstore.google.com/detail/htmltodesign/ldnheaepmnmbjjjahokphckbpgciiaed?hl=ja
※無料版は30日につき10件まで。

本来、ネット上のウェブサイトをデザインデータに変換するプラグインになんですが、ローカルにあるHTMLファイルをブラウザで表示させて使うことでデザインデータに変換もできます。
流れはこんな感じ
1 html to designをインストール
2 chatGPTに生成させたHTMLをchromeで表示
3 拡張機能のhtml to designを起動

4 生成された.h2dファイルをfigmaにインポート

5 ブラウザに表示したHTMLファイルが編集可能なデザインデータとしてfigmaに取り込まれる

取り込むとこんな感じ

各要素ごとにブロック化されているので、レイヤーの移動や画像の差し替え、もちろんテキストの変更もできます。
やりたかったことが完璧にできます。

クライアントとのMTGで、WFやデザインデータの中身をその場で確認・変更をしながらすり合わせ。
ご好評をいただきました。

いくらテンプレがあるといっても、表示する項目やレイアウトはやっぱりプロジェクトによって変わるもの。クライアントとのMTGの中で、Webサイトを見せられて、「こんな感じがいいんだよね」と言われることもよくありますよね。

そんな時も、わかりました！と元気よく返事をして、html to designで取り込むだけ。
WFやデザインを1から作れば時間もかかるし、何度か変更をかけないといけない。編集する前提のWFやデザインくらいならAI生成で時間短縮ができますね。

同じ悩みを持つシステム業界の皆様も良かったら使ってみてください！