メインコンテンツまでスキップ

ChatGPTのブレインストーミングをFigJamの図に変換

紫色の背景に跳ねる矢印のイラストがあり、その周りには数字の1、2、3が配置されています紫色の背景に跳ねる矢印のイラストがあり、その周りには数字の1、2、3が配置されています

新しいFigmaアプリをChatGPTで使用すると、会話をフローチャート、ガントチャートなどのFigJam図表に変換できます。

ChatGPTのブレインストーミングをFigJamの図に変換を共有

本日より、ChatGPT内のFigmaアプリでは、会話の内容に基づいて生成AIによるFigJam図表を提案・作成できるようになります。また、ユーザーは写真、手書きの図、PDFなどのファイルをアップロードして、出力の指針とすることができます。現在対応しているのは、テキストベースのフローチャート、シーケンス図、状態遷移図、ガントチャートなどですが、今後さらに追加される予定です。

FigJamの図表は、日常生活でも役立ちます。ChatGPTでFigmaを活用して、結婚式の計画を立てるためのガントチャートや、購入すべきか賃貸にするべきかを決めるための決定木など、難しい局面や大きな決断に役立ててみてください。

すでに多くのチームが、新しいアイデアを模索したり複雑な問題を分解したりするためにChatGPTを活用しています。これからは、さらに一歩進んで、理解しやすく、繰り返し修正しやすいFigJamの図表でコンセプトを視覚化できるようになります。Figmaアプリを使用するには、ChatGPTのプロンプト内で「Figma、このスケッチから図を作成して」などと指定するだけです。また、会話の内容に関連する場合、ChatGPTがFigmaアプリを提案することもあります。

以下に、これをチームのワークフローに組み込むための方法をいくつか紹介します。

デザイン作業をスピードアップ

アイデアはホワイトボードやノート、あるいはカクテルナプキンから生まれることもありますが、FigJamのような共同作業スペースに移して初めて、チームメイトがそのアイデアをさらに発展させる手助けをすることができるのです。ChatGPT内のFigmaアプリは、スケッチを図表に変換することで、その移行を支援します。「FigJamは、私たちがアイデアを共有し、磨き上げるための場として常に機能してきました」と、FigmaのプロダクトデザイナーであるAlex Savardは言います。「今では、アイデアから成果物に移行することがこれまで以上に簡単になりました」

ChatGPTが手描きのサインアップフロースケッチを、Figma上で整ったデジタルフローチャート図に変換している様子を示すスクリーンショット。ChatGPTが手描きのサインアップフロースケッチを、Figma上で整ったデジタルフローチャート図に変換している様子を示すスクリーンショット。
ChatGPTでFigmaを使用して、ナプキンのスケッチからFigJamの図へと仕上げてみましょう。

デザイナーがこの機能を活用するための方法をいくつか紹介します。

  • スケッチを図に変える。一時的なスケッチを、改良したり共有したりできる長期保存可能なFigJamファイルに変換できます。
  • 最新情報を確認する。ChatGPTを使って、図の修正案を提案したり、トピックを追加して図を拡張したり、視覚化する別の方法を模索したりできます。
  • 最初のドラフトの作成をアウトソースする。ChatGPTは複雑な内容を素早く解析できるため、必要な文書や背景情報をアップロードすれば、複雑な図の下書きを素早く作成できます。

技術的な質問に取り組む

図表は、開発者がシステム設計について批判的に考え、技術的な決定を伝えるのに役立ちます。情報がコードや文書に分散され、文脈が異なるチームメイトによって所有されている場合、これは簡単な作業ではありません。「今ではシステムを簡単に視覚化でき、FigJam上で数分以内に他のエンジニアとリアルタイムで共同作業が行えます。おかげで、すべてがスムーズに進むようになりました」と、FigmaのソフトウェアエンジニアであるNile Phillipsは述べています。

E2Eペイメントアプリケーションのサービス指向アーキテクチャを可視化するFigmaの図表を生成するChatGPTのスクリーンショットE2Eペイメントアプリケーションのサービス指向アーキテクチャを可視化するFigmaの図表を生成するChatGPTのスクリーンショット
ChatGPTに、技術面接の準備を手伝ってもらうように頼んでみてください。

ChatGPTのFigmaアプリは、開発者が抱える問題点を解消してくれます。

  • ソフトウェアアーキテクチャを明確に示す図を作成・更新する。ドキュメントやスクリーンショットをChatGPTにアップロードして、作業をスムーズに進めることができます。
  • 技術的アプローチを調査する。ChatGPTを活用してブログや事例研究を参照し、技術リーダーが一般的な課題をどのように解決しているかを視覚化したアーキテクチャ図を作成できます。
  • コンポーネント構造を調べる。例えば、料金ページのスクリーンショットをアップロードして、ChatGPTに対応するReact JSコンポーネントの図を作成するよう依頼できます。

アイデアとプランを視覚化する

製品ロードマップを作成することは、行く手にある多数の可能性のある道筋を進み、ユーザーのニーズについて深く考える迷路をナビゲートすることを意味します。「図表は、チームがフローを視覚化し、ユーザージャーニーを明確にする上で極めて重要です」と、FigmaのプロダクトマネージャーであるPratik Nadagoudaは述べています。「ChatGPTでアイデアを反復的に練ることで、自分一人で探求することができ、その結果をFigJamに取り込むことで、チームとのさらなるコラボレーションが可能になります」

添付されたPRDからの二要素認証プロセスのフローチャートを生成するChatGPTのスクリーンショット。添付されたPRDからの二要素認証プロセスのフローチャートを生成するChatGPTのスクリーンショット。
ChatGPTにPRDをアップロードして、FigJamフローチャートを作成します。

PMがChatGPT内のFigmaアプリを活用し、今後の進め方について合意形成を図る方法は次のとおりです。

  • トレードオフを評価して可視化する。例えば、権限付与フローにおいて、機能の充実度と簡潔さのどちらを重視すべきか検討しているとします。そのブレインストーミングの結果を、いくつかの図表案にまとめ、議論や意思決定の材料として活用します。
  • ユーザージャーニーをマップアウトする。既存のPRDをアップロードまたは貼り付けて、ユーザージャーニーのフローチャートの出発点とします。
  • リリーススケジュールを策定する。ChatGPTに製品、エンジニアリング、デザインの要件を提示し、チームの進捗管理に役立つガントチャートを作成してもらいます。

ChatGPT内のFigmaアプリは、Figma MCPサーバーによって動作しており、このサーバーはリモートアクセスをサポートするようになったほか、作成中のコンテンツにコンテキストを反映させることができます。

ChatGPTの機能とFigJamのマルチプレイヤー共同編集機能を連携させることができ、大変嬉しく思います。当アプリは、現在、EU以外のすべてのログイン済みChatGPTユーザーに向けてChatGPTで利用可能です。ぜひお試しください。今後もさらなる機能や図表に対応していく予定ですので、ご期待ください。

Figmaを使った制作とコラボレーション

無料で始める