AI最新トレンド

・

2026-07-21

ChatGPTとFigmaを連携する方法！使い方と実務での検証レポート

Kanade Nohara

✍️ChatGPTとFigmaの連携機能と料金・制限アップデートをチェック
🌟ChatGPTとFigmaの連携：悩み・メリット
📣YoomはChatGPTとFigmaの連携を自動化できます
📋【手順】ChatGPT内でFigmaアプリを連携・設定する方法
🧪 実践検証：手書きラフスケッチはどこまで正確に清書されるか？
📊 検証結果
⭐デザイナー向け：実務でのさらなる活用術
✅ まとめ
💡Yoomでできること

手書きのスケッチをデジタルに起こす作業は意外と時間がかかるものです。ChatGPTの連携機能は、こうしたクリエイティブの「下準備」を劇的に変えました。これまでブラウザのタブを何度も行き来して行っていた「指示」と「制作」が、ChatGPTのチャット画面上でシームレスに完結します。
本記事では、ChatGPTとFigmaを連携する手順を詳しく解説するだけでなく、チャット形式の指示からフローチャートを生成して、どのように視覚化をスムーズに進められるかを徹底検証します。
料金体系やクレジット制限についても触れていますので、これからのデザインワークフローを最適化したい方はぜひ参考にしてください。

✍️ChatGPTとFigmaの連携機能と料金・制限アップデートをチェック

デザイナーが直面する「アナログからデジタルへの移行コスト」を最小化するためのヒントをまとめました。
本章では、記事を読み進める前に押さえておきたい読者層や具体的な機能、そして運用コストについて解説します。

本記事の想定読者

複雑なサービス仕様を素早くフローチャートとして可視化したい方
ChatGPTを活用してデザインのアイデア出しから可視化までをシームレスに行いたい方
Figma AIのクレジット体系を理解し、チームでの最適な運用方法を模索している担当者

連携するとできること（主な機能）

ChatGPT上でFigma連携を使用すると、会話内容（プロンプト）をベースに以下のようなデザインアセットを生成・編集できます。

FigJam diagrams の作成:会話の内容から、複雑な図やフローチャートを素早く自動生成します。
Figma Slides presentations の作成:プレゼンテーション資料のベースとなるスライド構成を自動構築します。
ChatGPT上でのプレビュー:生成されたファイルは、Figmaを開く前にChatGPTの画面上でプレビュー確認が可能です。
Figmaでのシームレスな継続編集:プレビュー確認後、ワンクリックでFigma（またはFigJam）へ移動し、詳細なデザイン調整をそのまま続けられます。

料金・制限アップデート

運用時は、Figma AIのクレジット制限を確認しておく必要があります。
現在はプランとシート種別に応じて月間クレジットが割り当てられる方式で、一部機能は無料、必要に応じて追加クレジットの購入も可能です。
なお、ChatGPT経由のFigJam生成はクレジット消費なし、Figma Slides生成は消費ありと案内されています。
【料金】
以下のように、ChatGPTのプランによって月に使用できるクレジット量に違いがあります。

※為替レートによって変動する場合があります。
【利用制限】
ChatGPT側のプランについて

無料プラン（Free）でも連携可能です。
有料プラン（Plus、Team、Enterprise等）をご利用の場合は、より高度なGPTモデルの優先利用や、1日あたりのメッセージ制限の緩和といったメリットを受けられますが、基本的なFigma連携の機能自体は無料プランでも問題なく動作します。

Figma側のプランについて

無料プラン（Starter）でも連携機能を利用できます。
ただし、Figma上でAI機能（Figma AI）を使用するにあたっては、各プラン（無料のStarterプラン、および有料のProfessional / Business等）ごとに月々使用できる「AIクレジット」の付与量が異なります。
スライドや図の自動生成を頻繁に行う場合は、ご自身のプランのクレジット残量にご注意ください。（※一部の簡易なダイアグラム生成など、クレジットを消費しない機能もあります）

機能・安全面の制限（※注意点）:

Figmaのその他の製品や、すでに社内で作成・運用している既存デザインファイルの高度な読み取り・書き換えについては、個別に動作確認できた安全な範囲でのみ使用することをおすすめします。

🌟ChatGPTとFigmaの連携：悩み・メリット

「頭の中にあるサービスフローを、図形ツールで一つひとつ手作業で描くのが面倒」「作図そのものに時間がかかりすぎる」といった悩みは、多くのデザイナーが抱える共通の課題です。
こうした課題に対し、ChatGPTとFigmaを連携させ、Mermaid形式のコードを活用する方法が非常に有効です。
この連携を取り入れることで、デザイナーは以下のようなメリットを得られます。

単純作業の削減
- 図形を一つひとつ手作業で配置・調整するような「作業時間」を大幅にカットできます。
瞬時の図解化
- 頭の中にあるアイデアや複雑な論理構造を、テキスト（コード）を介して一瞬でクオリティの高い図解へと変換できます。
意思決定の高速化
- 作図の手間を浮かすことで、本来集中すべき「設計」や「UIデザインの検討」にリソースを割くことができ、プロジェクト全体の意思決定スピードを劇的に向上させます。

📣YoomはChatGPTとFigmaの連携を自動化できます

ChatGPTとFigmaの連携（AIの活用）は便利な反面、AI単体で使うだけでは「デザインの更新を都度チームへ手動で共有する」「大量のフィードバックを自分の手で整理する」といった、別のアナログな手間がどうしても残ってしまいます。

[Yoomとは]

そんな問題も、アプリ間の「架け橋」となるYoomなら解決できます！
例えば、「Figmaでコメントがついた際に、ChatGPTで内容を自動要約し、そのままSlackへ通知する」といった一連の流れをすべて自動化。AIを使う前後に発生していた面倒な連絡や転記作業から解放され、デザイナーが本来注力すべきクリエイティブな制作業務に100%集中できるようになります。
まずは試してみたいという方は、以下のテンプレートから自動化を体験してみましょう。

Figmaでファイルが更新されたら、Slackに通知する

試してみる

■概要
Figmaでデザインファイルを更新した際、関係者への共有を手動で行うことに手間を感じていませんか？都度の連絡は手間がかかるだけでなく、共有漏れやタイムラグの原因にもなり得ます。このワークフローを活用すれば、Figmaのファイル更新をトリガーとして、指定のSlackチャンネルへ自動で通知を送ることが可能です。デザインの変更点を迅速にチームへ共有し、スムーズな連携を実現します。
■このテンプレートをおすすめする方
Figmaのデザイン更新を、Slackを使い手動でチームに共有しているデザイナーの方
デザインの進捗確認やレビュー依頼の連絡を、より効率的に行いたいと考えているディレクターの方
チーム内の情報共有プロセスを自動化し、コミュニケーションロスをなくしたいマネージャーの方
■このテンプレートを使うメリット
Figmaのファイルが更新されると自動でSlackに通知が送信されるため、これまで手作業で行っていた連絡業務の時間を削減できます。
手動での連絡による通知の遅延や共有漏れといったヒューマンエラーを防ぎ、デザインの変更を関係者へ確実に周知できます。
■フローボットの流れ
はじめに、FigmaとSlackをYoomと連携します。
次に、トリガーでFigmaを選択し、「ファイルが更新されたら」というアクションを設定し、対象のファイルを指定します。
最後に、オペレーションでSlackの「チャンネルにメッセージを送る」アクションを設定し、通知内容を編集します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
Slackへの通知オペレーションでは、通知先のチャンネルを任意に設定することが可能です。
通知メッセージの本文は、固定のテキストを設定するだけでなく、トリガーで取得したファイル名や更新日時といった情報を変数として埋め込むなど、自由にカスタマイズできます。
■注意事項
Figma、SlackのそれぞれとYoomを連携してください。

詳細を見る  試してみる

Google Driveに画像が追加されたら、AIワーカーが白抜き加工・投稿文作成を行いSlackに通知する

試してみる

■概要
SNS運用やECサイト管理において、大量の商品画像の背景削除や投稿文の作成に追われていませんか？これらの手作業は積み重なると大きな負担となり、本来注力すべきクリエイティブな業務を圧迫してしまいます。このワークフローを活用すれば、Google Driveに画像を保存するだけで、AIによる背景の白抜き加工・保存からSNS投稿文の作成、Slackへの通知までを一貫して自動化できます。画像の白抜き加工や投稿文の作成を自動で行うことで、日々のルーティンワークをスムーズに完結させることが可能です。
■このテンプレートをおすすめする方
ECサイトの商品登録作業において、画像の白抜き加工を効率化したいと考えている運営担当者の方
SNS投稿の頻度が高く、魅力的な投稿文の作成と画像加工のプロセスを自動化したいSNSマーケターの方
Google DriveやSlackを業務で活用しており、ツール間のデータ連携を自動化して転記ミスを防ぎたい方
■このテンプレートを使うメリット
Google Driveに画像をアップロードするだけで加工が完了するため、画像編集ソフトを立ち上げて作業する手間を省けます。
AIが自動で投稿文を作成し、加工済み画像と一緒にSlackへ通知するため、チーム内での確認や投稿予約までのリードタイムを短縮できます。
■フローボットの流れ
はじめに、Google Drive、Remove.bg、SlackをYoomと連携します。
次に、トリガーでGoogle Driveを選択し、「特定のフォルダ内に新しくファイル・フォルダが作成されたら」というアクションを設定します。
次に、オペレーションでGoogle Driveを選択し、「ファイルをダウンロードする」というアクションを設定します。
最後に、AIワーカーのオペレーションで、Remove.bgでの背景削除と加工ファイルの保存、SNS投稿文作成、Slack通知までを行うスキル（指示）を作成ます。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント
Google Driveのトリガー設定では、画像がアップロードされる特定のフォルダIDを指定してください。
Remove.bgの背景除去の画像処理は、 AIワーカーの指示内容（スキル）やアクション設定によって自由にカスタマイズできます。
AIワーカーの指示内容（スキル）を調整することで、投稿先のプラットフォームやブランドイメージに合わせた最適なトーンの文章を生成できます。
Google Driveの保存先フォルダやSlackの通知先チャンネルは、任意のプロジェクトやチームなどを実際の運用に沿って設定してください。
■注意事項
Google Drive、Remove.bg、SlackのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
プランによって最短の起動間隔が異なりますので、ご注意ください。
ダウンロード可能なファイル容量は最大300MBまでです。アプリの仕様によっては300MB未満になる可能性があるので、ご注意ください。
トリガー、各オペレーションでの取り扱い可能なファイル容量の詳細は「ファイルの容量制限について」をご参照ください。
AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
AIワーカーはスキルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。

詳細を見る  試してみる

📋【手順】ChatGPT内でFigmaアプリを連携・設定する方法

連携の開始は非常にシンプルですが、正しい手順で行わないと機能を十分に活用できません。
ここでは、初めて設定を行う方向けにステップバイステップで解説します。

初回接続：設定メニューからのコネクター追加

まずはChatGPTの「プラグイン」からFigmaアプリを見つけるところから始まります。

1. ChatGPTの左メニューにある「プラグイン」をクリックし、「Figma」と検索します。

2. Figmaアプリを選択し、「プラグインをインストール」をクリックし、Figmaアカウントへのアクセス許可を行い、認証を完了させます。

3. 「チャットで試す」を選択します。

呼び出し方：プロンプトでの「@Figma」活用術

連携設定が完了すると、通常のチャット画面からいつでもFigma機能を呼び出せるようになります。
メッセージ入力欄で「@」を入力してFigmaを選択するだけで、特定のコンテキストにFigmaの機能を組み込めます。

これにより、リサーチ結果をそのままデザインファイルへ書き出すといった高度なワークフローが実現します。

🧪 実践検証：手書きラフスケッチはどこまで正確に清書されるか？

デザイナーが実務で最も手間を感じる「フロー図の作成」をどこまで効率化できるかを検証します。
今回は、手元にある複雑な業務要件をテキストのままAIに指示し、プラグインですぐに使えるフローチャートを自動生成させるというアプローチを試しました。
AIが要件の裏にある論理構造をどこまで正確に汲み取り、プロのデザイナーの実務に耐えうる実用的なコードを出力してくれるのかを厳しい目線でチェックしていきます。

検証項目

以下の項目で、検証していきます！

使用モデル

GPT-5.5 Instant

※今回は、無料プランの範囲内で検証しました。

想定シーン

ECサイトの新規立ち上げやリニューアル時に、ディレクターから共有された複雑な業務仕様書（返品・返金ルール）を、デザインツール上で迅速にビジュアル化し、チーム間で設計の合意形成を図る場面。

検証方法

本検証では、GPT-5.5 Instantを使用して、フローチャートの自動生成を行います。

プロンプト：

@Figma ECサイトでユーザーが商品を返品し、返金が完了するまでのフローチャートをMermaid形式で生成して。例外処理として『商品の汚損がある場合』の分岐も加えてください。

検証手順

ログイン後、こちらの画面が表示されるので、プロンプトを入力したら送信します。

今回は、初めての連携だったため、以下のような返答が返ってきました。
指示通り、チーム(または、組織)を選択しました。
選択すると、すぐに生成が開始されました。

10秒ほどで完了しました！結果は以下のものとなりました。

📊 検証結果

検証を通じて得られた結果を、画像と共にまとめています。
※本評価は、多数のAIツールを実務に導入してきた著者の知見に基づき、実用性の観点から相対的に算出したものです。

1. 論理的整合性の確保

指示した「ECサイトの返品・返金フロー」における複雑な条件分岐が、漏れなく正確に可視化されているかを評価しました。

初期判定の正確性:「返品申請」から「返品条件を確認」を経て、最初の分岐「返品対象？」へ至る一連の初期ステップが不足なく描かれています。
例外処理のカバー:「商品受領・検品」の後に、指示通り「商品に汚損あり？」という分岐が正確に挿入されており、「はい（返金不可または減額）」「いいえ（返金承認・処理）」の処理フローが論理破綻なく繋がっています。

申請から完了（または不可による終了）までの全ルートに論理的な矛盾やステップの抜け漏れがなく、実務プロセスとして十分に通用する精度の高い図面が担保されていると評価できます。

2. 作図時間の短縮

手動で各種オブジェクト（四角形、ひし形、角丸四角形、矢印など）を配置・調整する場合と比較した時間的効率を評価しました。

瞬時のビジュアル化:プロンプトを投げてからコードが生成され、プラグインを介して図解として展開されるまで、実質数十秒〜数分程度で完了しました。
レイアウト調整の不要化:手動では最も手間の掛かる「オブジェクト間の等間隔配置」や「コネクタ（接続線）の折れ曲がり調整」が、自動で美しく整列された状態で出力されます。

手動で作図した場合に発生する位置微調整やテキスト入力の手間を省くことができ、ゼロから描く場合と比較して作業時間の大幅な削減が期待できるという、極めて高い業務効率化効果が実証されました。

3. 汎用性の高さ

出力されたMermaidコードが、特定の環境に依存せず他のツールやプロセスでシームレスに再利用可能かを評価しました。

標準的な記法の遵守:生成されたコードは一般的かつ標準的なMermaid構文に準拠しており、Figmaのプラグイン上でエラーを起こすことなく、一発で綺麗なフロー図としてインポートできました。
他ツールへの展開力:Figma内に留まらず、NotionやGitHub、各種ドキュメントツールにそのままコードを貼り付けるだけで、同様の図解を瞬時に再現できるポテンシャルを持っています。

修正が必要になった場合も、テキスト（コード）を数行書き換えるだけで図解全体が自動再配置されるため、運用の柔軟性・再利用性の観点からも非常に優れた再現性を有しています。

⭐デザイナー向け：実務でのさらなる活用術

基本的な連携に慣れてきたら、さらに踏み込んだ活用を検討してみましょう。
デザインの品質向上とスピードアップを両立させるためのアイデアを紹介します。

デザインレビューの自動要約と修正ポイントのリスト化

Figma上に散らばった大量のコメントをChatGPTに読み込ませることで、優先順位の高い修正タスクを抽出できます。

1. Figmaのコメント一覧をテキスト化（またはYoom等で取得）します。

2. ChatGPTに「デザイナー、ディレクター、クライアントの各視点から、修正すべき重要ポイントを3つずつ挙げて」と指示します。

3. 出力されたリストをそのままFigJamの付箋として反映させ、チームでの振り返りに活用します。

バリエーション生成：1つのラフから複数のパターンを展開する

一つのアイデアをベースに、異なるアプローチのデザイン案を迅速に作成することも可能です。
ChatGPTに対して「現在のワイヤーフレームを元に、以下の2パターンを作成して」と依頼します。

ミニマリズムを強調した構成
情報量を増やしたポータルサイト風の構成

これにより、初期段階での検討の幅を最小限の工数で広げることができます。

✅ まとめ

ChatGPTとFigmaの連携、特にMermaid形式を活用した図解生成は、デザイナーの「考える作業」と「描く作業」を繋ぐ強力な架け橋となります。
複雑なロジックを瞬時に構造化できることで、デザイナーは図形の調整という単純作業から解放され、より本質的なUX設計のブラッシュアップに時間を割けるようになります。
公式アプリの特性を理解し、ワークフローに組み込むことで、クリエイティブの質はさらに高まっていくでしょう。

💡Yoomでできること

👉 Yoomの登録はこちら。30秒で簡単に登録できます！
FigmaとChatGPTを連携させたデザイン生成や情報要約は非常に効率的ですが、AI単体で使う場合、「出力されたデータをコピーして別ツールに貼り付ける」「手動でメンバーに共有する」といった、どうしても発生する“前後の手作業”が残るデメリットがあります。
そんな課題も、Yoomなら解決できます！
Yoomを活用すれば、ChatGPTとFigmaの連携をさらに広範囲な業務プロセスへ組み込むことが可能です。デザイン情報を自動で収集・解析し、チャットツールへの通知までの一連の手作業をすべて自動化する仕組みを作ることで、確認漏れをなくし、チーム全体の連携を強固なものにします。
以下のテンプレートを活用して、手作業をゼロにする一歩進んだ自動化を実現してみましょう。