Canvaから簡単にFigmaで図とか作れる？
Apps In ChatGPTが導入されたから簡単にできるよ
ChatGPTとデザインツールFigmaの連携が、資料作成の効率を劇的に向上させることをご存知でしょうか？
プロンプトを入力するだけで、フローチャートやガントチャートなどの図解が自動生成され、Figmaで簡単に編集・エクスポートできるようになりました。
記事の内容
- @Figmaでフローチャートを自動生成
- ChatGPT+Figmaで作成できる図の種類
- 資料からマインドマップも作成可能
- 今後の期待と活用シーン
本記事では、この革新的な連携機能の活用方法と、作成できる図の種類について詳しく解説します。
@Figmaでフローチャートを自動生成
ChatGPTの入力欄に「@」を入力すると、連携可能なアプリの一覧が表示されます。ここでFigmaを選択し、必要な図のプロンプトを入力するだけで、瞬時に図が生成されます。
例えば、「ユーザー登録のフローチャートを作って」と入力すると、ユーザーが登録ページを開き、情報を入力し、内容に不備がないかチェックするといった一連の流れを視覚化したフローチャートが生成されます。
生成された図をFigmaで編集・エクスポート
生成された図は、Figma上で編集可能です。色を変更したり、要素を移動させたりと、自分のイメージに合わせてカスタマイズできます。
一度ファイルを保存しないといけないので保存してからです。
保存したら編集できますね。
編集が完了したら、図の範囲を選択して右クリックし、「選択内容をエクスポート」からJPG、PNG、PDFなどの形式でエクスポートできます。これにより、資料やプレゼンテーションに簡単に組み込むことが可能です。
エクスポートしたものは画像やPDFだから使いやすいですね。
ChatGPT+Figmaで作成できる図の種類
現在、ChatGPTとFigma連携で作成できる図形は、特定のフォーマットに基づいています。試みに棒グラフを生成しようとすると、グラフではなく長方形で表示されてしまうことが分かります。
この機能はMermaidというJavaScriptベースのダイアグラム・チャートツールを基盤としているようで、現状ではMermaidがサポートする特定の種類の図形に限定されている様子。
サポートう範囲広がってたらもっといろいろ作れるかもね
そうそう今後に期待
1. flowChart：処理の流れを視覚化
フローチャートは、プロセスやシステムにおける処理の流れを図示するもので、意思決定や手順を明確にする際に役立ちます。先ほど紹介したユーザー登録のフローチャートもこれにあたります。
2. sequenceDiagram：システム間の連携を可視化
シーケンス図は、システム内のオブジェクトやコンポーネント間でどのようなメッセージがどのような順序でやり取りされるかを時系列で表現する図です。プログラムの処理の流れを可視化する際に重宝します。
Xのシーケンス図を作ってくださいっていうプロンプトだとこんなものができました。
3. stateDiagram：状態遷移をわかりやすく図解
状態遷移図は、システムやオブジェクトがどのような状態を持ち、どのようなイベントによって状態がどのように変化するかを示す図です。
電子レンジの状態遷移図を作ってみた例ですが、スタートボタンやキャンセルボタンを押した際の動作が明確に示されています。
4. gantt：プロジェクトのスケジュール管理を効率化
ガントチャートは、プロジェクトのタスクとその進捗状況を視覚的に管理するためのツールです。スケジュールを入力するだけで、タスクの開始日、終了日、担当者などを盛り込んだガントチャートがFigma上に生成されます。
編集機能を使えば、担当者ごとに色分けするなど、より見やすいチャートにカスタマイズできます。
資料からマインドマップも作成可能！
PDF資料を元にマインドマップを自動生成
さらに、PDF資料をChatGPTに読み込ませてマインドマップを生成する機能も提供されています。これにより、複雑な資料の内容を視覚的に整理し、理解を深めることが可能。
生成されたマインドマップは、初期設定では縦に枝が伸びる形式ですが、プロンプトで「横に伸ばす」と指示することで、より見やすい横長の形式に調整できます。
不明な資料がある場合でも、この機能を使えば、短時間で全体像を把握し、内容の理解を助ける強力なツールとなります。
今後の期待と活用シーン
現状の制限と今後の展望
ChatGPTとFigmaの連携は非常に便利ですが、現時点では棒グラフのような一般的なグラフの作成には対応しておらず、Mermaidがサポートする特定の図形に限られています。
- フローチャート
- シーケンス図
- 状態遷移図
- ガントチャート
しかし、この機能はまだ進化の途上にあり、今後のアップデートでさらに多様な図形やグラフの生成が可能になることが期待されます。
より良いチャット図作りを！
この連携機能は、エンジニアがプログラムの処理フローを共有する際や、ビジネスパーソンがプロジェクトの進捗を管理する際など、多岐にわたるシーンで活用できます。
資料作成の手間を大幅に削減し、より本質的な業務に集中するための強力なサポートツールとなるでしょう。今後の進化に注目しつつ、ぜひあなたの業務にChatGPTとFigmaの連携を取り入れて、より良いチャット図作りを目指しましょう！