FigmaエージェントとFigma Makeは、 モデルコンテキストプロトコル(MCP)を介して外部ツールに接続できます。これにより、他のアプリからのドキュメント、タスク、およびデータを、デザイン、アプリ、プロトタイプのコンテキストとして活用できます。
例えば、Figma MakeをNotionに接続して、製品要件文書(PRD)を直接Figmaのチャットにインポートし、それを元にプロトタイプを作成するようにMakeに依頼することができます。PRDが変更された場合は、コネクターを再実行するだけで、コンテキストを更新してプロトタイプに反映できます。また、コネクターの設定で[書き込みツールを有効化する]を選択し、受け入れ基準のリストを作成するなどして、Notionにコンテンツを書き戻すことも可能です。
FigmaのMCPコネクターとFigma MCPサーバーの違いは何ですか?
エージェントやFigma Makeで外部ツールを接続すると、MCPクライアントとして機能します。クライアントは、 MCPサーバーにホストされているツール(例えば、NotionやAsanaコネクター)を呼び出して、そのソースからデータを読み書きします。エージェントは、プロンプトに基づいて、どのコネクターとツールを使用するかを決定します。
一方、 Figma MCPサーバーには、ファイルデータを他のMCPクライアントから利用できるようにするツールのリストが含まれています。
コネクターを追加
各ユーザーは、使用するコネクターを追加して認証する必要があります。
コネクターを追加するには、まず認証が必要です。例えば、Notionを追加する場合、ワークスペースを選択してアクセス許可を承認します。
- チャットボックスから[コンテキストを追加]をクリックします。
- [コネクター]を選択します。
- 利用可能なコネクターのリストを参照します。
- 使用したいコネクターの横にある [接続]をクリックしてください。
- プロンプトに従って、外部ツールのOAuthフローを通じて認証します。
- 接続したら、[コンテキストを追加]をクリックして、コネクターがリストに表示されていることを確認します。
ヒント: 認証を要求するプロンプトが表示されない場合、ブラウザがポップアップをブロックしている可能性があります。ブラウザーのアドレスバーにポップアップブロックのアイコンが表示されていないかどうかを確認し、Figmaのポップアップを許可してください。
注意: メニューに コネクターが表示されない場合は、管理者が組織でこの機能を無効にしている可能性があります。
チャットでコネクターを使用する
コネクターとそのツールが現在のチャットで有効になっていれば、それらを会話の流れの中で呼び出すことができます。
- プロンプトでコネクターを明示的に参照するには、チャットで@を入力して、接続しているコネクターのリストを表示します。使用したいコネクターを選択すると、メッセージの上にピルとして表示されます。これにより、エージェントは現在のタスクに指定されたコネクターのみを使用するようになります。
- コネクターを参照するプロンプトを入力します。例えば、Asanaのリンクを貼り付けて、「このプロジェクトの仕様を使って、First Draftプロトタイプを作成する」と入力します。
- プロンプトにコネクターが必要な場合、エージェントは使用予定のコネクターとツールを表示し、実行してよいかを確認します。[実行]をクリックして続行します。個々のツールとその権限は、コネクター設定から管理できます。
ソースコンテンツが変更された場合、コネクターを再度実行するだけで最新のコンテキストが取り込まれます。
コネクターツールが常に実行されるように設定されている場合、応答が16MBを超えるとファイルのダウンロードが失敗することがあります。テキストファイルの場合、このファイルサイズは、通常最大16MBに相当します。画像の場合、エンコードによってレスポンスサイズが増加するため、約5～6 MBを超えるファイルは上限を超える可能性があります。この制限は、FigmaエージェントおよびFigma Makeのすべてのコネクターに適用されます。大きな画像のダウンロードに失敗した場合は、ツールの設定を[実行を依頼]に変更して、もう一度試してください。
どのようなコネクターを利用できますか?
現在、Figmaでサポートされているのは、一部の検証済みコネクターに限られています。これらのMCPサーバーは、当社チームによって審査され、Figmaのセキュリティおよびプライバシー基準を満たしていることが確認されています。
注: 関連コネクターを使用するには、外部サービスにアカウントを持っている必要があります。利用できるかどうかは、契約プラン、シート、ロール、または各サービス内でのアクセス権によって異なる場合があります。
Figmaは、以下のおすすめコネクターを提供しています。
ヒント: このリストにないMCPサーバーに接続する必要がありますか?独自のカスタムMCPコネクターを作成することができます。カスタムMCPコネクターを利用するには、有料プランが必要です。
Amplitude
- Figma内でAmplitudeのユーザートレンド、ファネル、実験にアクセスし、プロダクトコンテキストを使ってデザインやプロトタイプを生成します。
- ユーザー行動への影響を追跡するために、デザインのバリアントを作成してテストします。
Asana
- FigmaからAsanaのタスクとプロジェクトにアクセスし、リアルタイムで進捗状況とチームの優先順位を追跡します。
- Asanaのタスクを作成および管理し、コンセプトから完了までプロジェクトの一貫性を保ちながら進めることができます。
Askable
- Figma内でAskableから取得したリサーチ結果にアクセスします。
- 証拠をクエリし、検証済みの参加者が実際に発言した内容や行動に基づいてプロトタイプを作成します。
Atlassian
- Figmaから直接Confluenceのページやドキュメントにアクセスして編集し、仕様、決定事項、デザイン作業を連携させます。
- 画面を切り替えることなく、Jiraの課題やエピックにアクセスして作成やステータスの変更ができるため、チームはデザインから開発へとスムーズに移行できます。
- Compassのコンポーネント、サービス、スコアカードにアクセスして作成および更新し、デザインやプロトタイプをエンジニアリングエコシステムと連携した状態に保つことができます。
Box
- デザインプロセス中にBoxのハブやコンテンツにアクセスし、既存のBoxセキュリティとアクセスポリシーを適用します。
- 重要なインサイトを抽出し、あらゆるコンテンツに対してクエリを実行することで、エンタープライズのコンテキストに基づいたプロトタイプを作成できます。
Contentsquare
- Figmaから、ユーザージャーニー、ファネル、ページメトリクスなどのContentsquareのアナリティクスデータにアクセスできます。
- 実際のユーザー行動に基づいてデザイン上の意思決定を行えるよう、ユーザーが公開中の製品をどのように利用しているかについてクエリを実行します。このコネクターは読み取り専用です。
Dovetail
- FigmaでDovetailの顧客データにアクセスし、デザイン上の意思決定に役立てることができます。
- Dovetailのワークスペース全体を検索して、関連するプロジェクト、データ、ドキュメントを見つけることができます。
Google Drive
- FigmaからGoogle Drive内のファイルに直接アクセスして、チームがすでに保有しているリサーチ結果、データ、画像、その他の関連情報に基づいてデザインやプロトタイプを作成できます。
- FigmaからGoogle Driveに新しいファイルを作成し、決定事項を要約したり、アセットをアップロードしたりすることで、チームが普段使っている環境で簡単に共有できるようにします。
注意: Governance + アドオンを使用している場合、Google Driveのコネクターは利用できません。
Granola
- FigmaをGranolaの会議履歴に接続します。
- 会議のメモを検索し、過去の会議で議論された特定のトピックを見つけ、メモからアクション項目や決定事項を抽出し、会議の履歴に基づいて質問に回答するなど、さまざまなことができます。
GitHub
- パブリックまたはプライベートのGitHubリポジトリ、問題、プルリクエストにアクセスして、デザイン作業とコードベースを連携させることができます。
- Figma内からGitHubの問題とプルリクエストを作成および要約することで、デザインの変更が直接開発アクションに反映されます。
Hex
- Hexのダッシュボードやデータアプリを取り込み、Hexのスレッドを通じてデータに関する質問をすることができます。
- データをプレゼンテーション、デザイン、およびボードに組み込みます。
Linear
- FigmaからLinearの問題、プロジェクト、ドキュメントにアクセスし、関連するコンテキストに基づいてデザインやプロトタイプを生成します。
- Linearの問題やプロジェクトを作成および管理して、デザインやプロトタイプを具体的な作業計画に落とし込むことができます。
Mapbox
- Figma Makeのプロトタイプに、リアルタイムのインタラクティブなMapboxの地図を追加できます。
- Figmaエージェントを使用して、Mapbox Streets v8タイルセットから実在する場所のデータを生成できます。
- ブランドに即したスタイルマップを作成し、アクセシビリティを確認します。
Marvin
- Figma内からMarvinに直接アクセスして、実際のユーザーフィードバックやデータに基づいてデザインを作成できます。
- 顧客に関するインサイトを要約して、確信を持ってデザインに取り組み、プロトタイプをより迅速に検証できるようにします。
- Marvinエンタープライズプラン、およびMarvinでのコントリビューターロールまたは管理者ロールが必要です。
Mobbin
- Mobbinから画面やデザインパターンを取り込み、リサーチ結果や参考資料としてワークフローに活用できます。
- Mobbinの参考資料をデザインシステムと組み合わせて、デザインのアイデアを自由に出し合うことができます。
- FigmaでのデザインをMobbinのベンチマークと比較できます。
monday.com
- Figmaからmonday.comのボードやアイテムにアクセスして、チームの計画や優先順位に沿って作業を進めることができます。
- 更新を作成および管理し、すべてのチーム間で作業内容を常に可視化し、連携できるようにします。
Notion
- FigmaからNotionのページやデータベースに直接アクセスして、コンテキスト、仕様、ノートをデザインフローに組み込みます。
- Notionのドキュメントを作成および更新して、デザインドキュメントを整理し、常に同期された状態に保ちます。
Slack
- Slackのメッセージ、スレッド、チャンネル、ユーザー、ファイルを検索して閲覧できます。
- メッセージの送信や、キャンバスおよびチャンネルの作成などの操作を実行できます。
Sprig
- Figma内から顧客アンケートにアクセスして、証拠に基づいてデザインやプロトタイプを作成します。
- Sprigの調査を作成および実施して、Figmaで作成したデザイン、コンセプト、プロトタイプをテストし、それらに対するユーザーの反応を測定します。
Twilio
- FigmaからTwilioのAPIドキュメントにアクセスして、メッセージング、音声、確認などの通信機能をプロトタイプに組み込みます。
- デザインフローを中断することなく、Twilio APIに対応した正確で最新のコードを生成できます。このコネクターはAPIに関する情報を提供するものであり、メッセージを送信したり、アカウントデータにアクセスしたりすることはありません。
Zapier
- Google Drive、Microsoft Office、Zoom、Jira、HubSpot、Slackなど、9,000以上のアプリに、1つの接続を通じてアクセスできます。
- ツールからコンテキストをデザインやプロトタイプ作成のワークフローに直接取り込んで、要件に関するドキュメントや、実データを含むスプレッドシート、会議の要約などをプルできます。さらに、1つのプロンプトから、ツールスタック全体にわたるタスクを作成したり、メッセージを送信したり、ワークフローをトリガーしたりできます。
Zeroheight
- ZeroheightのスタイルガイドからデザインシステムのコンテキストをFigmaに取り込み、システムに準拠したプロトタイプを数秒で生成します。
- Figmaを使って、zeroheightのドキュメントのストレステストを行います。AIによる誤った解釈から、ガイダンスの曖昧な部分を明らかにし、優先的に改善すべき点を特定します。
- zeroheight エンタープライズプランへの加入と、EditorまたはAdminのシートが割り当てられたDSチームへのアクセス権が必要です。ドキュメント閲覧者はカスタムコネクターを作成して、zeroheight MCPサーバーにアクセスできます。
注: 自社製品をFigmaと連携させてみませんか?現在、新たなパートナーシップに関心をお持ちのお客様からのお申し込みを受け付けています。関心をお持ちの場合は、製品や利用目的について、簡単にお聞かせください 。
コネクター設定を管理
一部のコネクターには複数のMCPツールが含まれています。これらのツールは、データの取得、アップデートの送信、コンテンツの管理など、コネクター内で異なる機能を実行します。
Figmaで利用可能なツールを制御できます。例えば、コンテンツを取得するツールのみを許可し、外部ソースにコンテンツを送信するツールを無効にすることができます。
注: 外部ソースに書き込み可能なツールは、デフォルトで無効になっています。接続されたサービスにコンテンツを送信する前に、これらを手動で有効にする必要があります。
また、コネクター内で各ツールの権限を制御することもできます。利用可能なオプションは以下の通りです。
| 設定 | 仕組み | 使用するタイミング |
|---|---|---|
| 実行を依頼 | Figmaは、ツールを実行する前に必ずユーザーの許可を求めます | 会話中にエージェントがツールを実行するときは、常に自分で許可するかどうかを決めたい場合 |
| 常に実行 | Figmaは、許可を求めることなく、必要に応じてツールを実行します | 外部ソースと利用可能なデータを信頼している場合 |
| 実行しない | Figmaはそのツールの実行を試みません | 不要なツールにはこの設定を使用します。Figma AIが選択できるツールの数を減らすことで、処理速度の向上につながります。 |
注意: 外部のソースからコンテキストを取り込む際にはプロンプトインジェクションに注意してください。
一時的にコネクターを無効にして、現在の会話で使用されないようにすることもできます。
- チャットボックスから、 [コンテキストを追加]をクリックします。 コネクター にカーソルを合わせ、その後 を選択して [管理]を選択します。
- コネクターで[管理]をクリックします。
- 読み取りツールや書き込みツールを有効または無効にしたり、そのコネクター内の個々のツールに権限を設定したりできます。
ヒント: エージェントの処理速度を向上させるため、関連するコネクターとそのツールのみを有効にしてください。
コネクターの接続解除
コネクターを切断すると、FigmaエージェントとFigma Makeは、そのコネクターを介してデータの読み取りや書き込みができなくなります。外部ツール内のデータが削除されることはありません。再度追加して認証すれば、いつでも再接続できます。
- チャットボックスから、 [コンテキストを追加]をクリックします。 コネクター にカーソルを合わせ、その後 を選択して [管理]を選択します。
- コネクターで[管理]をクリックします。
- モーダルの下部で[切断]をクリックします。