Figma for Agents
Figma for Agentsは、use_figma MCPツールとカスタマイズ可能なマークダウンベースのスキルを使用して、コーディングエージェントが既存のデザインシステムを使用してFigmaキャンバス上で直接デザインを作成、編集、更新できるようにするAI統合です。
https://www.figma.com/blog/the-figma-canvas-is-now-open-to-agents?ref=producthunt&utm_source=aipure
製品情報
更新日:2026年04月16日
Figma for Agents の月間トラフィック傾向
Figma for Agentsは先月89.4mのアクセスを記録し、0.7%のわずかな成長を示しました。分析によると、このトレンドはAIツール分野の一般的な市場動向と一致しています。
過去のトラフィックを表示Figma for Agentsとは
2026年3月24日に発表されたFigma for Agentsは、AIエージェントが設計ツールと対話する方法の根本的な変化を表しています。FigmaのModel Context Protocol（MCP）サーバーを通じて、Claude Code、Codex、CursorなどのAIコーディングエージェントは、設計ファイルを読み取るだけでなく、Figmaキャンバスに直接書き込むことができるようになりました。つまり、コンポーネントの作成、変数の適用、バリアントの構築、チームの既存のデザインシステムを使用した画面全体の構築を実際に行うことができます。この双方向ワークフローは、コードと設計の間のギャップを埋め、エージェントがコンポーネント、自動レイアウト、変数、デザイントークンなどの実際のFigmaプリミティブにアクセスできるようにします。この機能は現在、FullおよびDevシートを備えた有料プランでベータ期間中は無料で利用でき、将来的には使用量ベースの価格設定が計画されています。
Figma for Agentsの主な機能
Figma for Agentsは、2026年3月24日に発表された画期的な機能で、use_figma MCPツールを使用してFigmaキャンバスをAIエージェントに開放します。これにより、Claude Code、Codex、CursorなどのAIコーディングエージェントがFigmaファイルに直接書き込み、既存のデザインシステムを使用して、フレーム、コンポーネント、バリアント、変数、自動レイアウトなどのネイティブデザイン要素を作成および変更できます。この機能は、チームの規約、設計上の決定、ワークフローをエンコードするSkills（マークダウン命令ファイル）によって補完され、エージェントがブランドに沿った、デザインシステムと一貫性のある出力を生成することを保証します。現在、ベータ期間中は無料で、将来的には使用量に応じた価格設定が予定されており、この双方向ワークフローはコードとキャンバスを橋渡しし、チームが開発と設計の間をスムーズに移動しながら、共有された信頼できる情報源を維持できるようにします。
use_figmaツールによる直接キャンバス書き込みアクセス: AIエージェントは、静的なスクリーンショットやエクスポートを生成するのではなく、Plugin APIを通じて、フレーム、コンポーネント、バリアント、変数、自動レイアウトなどの実際のFigmaデザイン構造を作成および更新できます。これにより、エージェントはネイティブのFigmaプリミティブを操作し、本番環境に対応できるデザインを構築できます。
エージェント命令のためのスキル: チームの作業方法をエージェントに教えるマークダウンファイル。使用するコンポーネント、シーケンスルール、規約、エッジケースの処理を定義します。スキルは、デザインシステムを機械可読で実行可能にし、キャンバス上のエージェントの動作をガイドする好み、決定、および標準をエンコードします。
デザインシステムの統合: エージェントは、既存のFigmaライブラリ、コンポーネント、命名規則、スペーシングスケール、およびトークンを読み取り、利用して、確立されたデザインシステムに沿ったデザインを生成します。これにより、出力は一般的な要素ではなく、実際のボタン、カード、および変数を使用することが保証されます。
双方向コード-キャンバスワークフロー: 既存のgenerate_figma_designツールと連携して、コードとキャンバス間のスムーズな移動を可能にします。エージェントは、ライブHTMLを編集可能なFigmaレイヤーに変換し、デザインシステムを使用して新しいデザインを変更または作成できるため、継続的なワークフローが作成されます。
自己修復反復ループ: エージェントは、生成されたデザインのスクリーンショットを撮り、仕様と一致しない出力を改良するために反復処理を行うことができます。静的なビジュアルではなく、実際の構造を操作するため、調整は実際のデザインシステムコンポーネントおよび変数と相互作用します。
マルチエージェントMCPクライアントのサポート: Claude Code、Codex、Cursor、Copilot CLI、Augment、Factory、Firebender、Warpなどの複数のAIコーディングエージェントと互換性があり、Figmaデザインコンテキストへの一貫したアクセスを維持しながら、ツール選択の柔軟性を提供します。
Figma for Agentsのユースケース
デザインシステムコンポーネントの生成: チームはエージェントを使用して、コードベースからコンポーネントライブラリ全体を生成し、既存のデザインシステムの規約に従うコンポーネントの最大72個のバリアントを作成できます。これにより、包括的なデザインシステムの構築と維持のプロセスが加速されます。
既存のコンポーネントを使用した迅速な画面設計: デザイナーはエージェントに、確立されたコンポーネントライブラリと変数を使用して、完全な画面またはフローを作成するように指示できます。これにより、レイアウトを手動で再構築する必要がなくなり、ブランドガイドラインと設計基準との一貫性が確保されます。
コードからデザインへの同期: 開発チームは、エージェントを使用してライブアプリケーションのHTMLを編集可能なFigmaレイヤーに変換し、デザインシステムを使用してそれらのデザインを改良することで、Figmaファイルを本番コードと同期させることができます。これにより、単一の信頼できる情報源を維持できます。
アクセシビリティ仕様の生成: チームは、/create-voiceなどの特殊なスキルを使用して、UI仕様からスクリーンリーダー仕様（VoiceOver、TalkBack、ARIA）を自動的に生成し、アクセシビリティに関する考慮事項を最初から設計プロセスに組み込むことができます。
デザイントークンの同期: 組織は、/sync-figma-tokenなどのスキルを使用して、コードベースとFigma変数間でデザイントークンを自動的に同期し、ドリフト検出を行うことで、コードとデザインの一貫性を維持できます。これにより、手動による調整のオーバーヘッドが削減されます。
製品の反復と改良: 製品チームは、エージェントを使用して既存の画面を選択し、エージェントに要素を追加または変更するように指示することで、デザインシステムの一貫性を維持しながら、デザインを迅速に反復できます。これにより、製品開発サイクルが加速されます。
メリット
静的なモックアップではなく、実際のコンポーネントと変数を使用してネイティブのFigma構造を作成し、デザインが本番環境に対応でき、編集可能であることを保証します
既存のデザインシステムを信頼できる情報源として活用し、確立された規約と標準に従ったブランドに沿った出力を生成します
ベータ期間中は無料で、チームは有料価格が始まる前に機能を実験し、ワークフローに統合できます
双方向のコード-キャンバスワークフローを可能にし、共有コンテキストで設計チームと開発チームの間のギャップを埋めます
デメリット
高いトークン消費量（単一のボタンで19kトークンのレポート）、複雑なデザイン生成が大規模な使用には高価で非現実的になる可能性
技術的なセットアップとコードツールに関する知識が必要であり、開発経験なしにFigmaのみで作業するデザイナーにとっては困難な場合があります
出力の品質と信頼性の問題が残っており、複数のデザインを生成することが手作業と比較して高価で信頼できないという懸念があります
最終的には、既存のシートごとの価格に加えて、使用量に応じた有料機能になるため、エージェントの使用量が多いチームにとってはコストの摩擦が生じる可能性があります
Figma for Agentsの使い方
1. Figmaプランの資格を確認する: 有料のFigmaプランでFullまたはDevシートを持っていることを確認してください。キャンバスへの書き込み機能は現在ベータ版では無料ですが、有料プランが必要です。無料のFigmaユーザーは、1か月あたり約6回のMCPツール呼び出しに制限されています。
2. MCPクライアントを選択して設定する: Claude Code、Codex、Cursor、Copilot CLI、Augment、Factory、Firebender、Warpなどの互換性のあるMCPクライアントを選択します。選択したクライアントをシステムにインストールして構成します。
3. Figma MCPサーバーを接続する: 2つの接続方法があります。（1）FigmaコミュニティからFigma MCPプラグインをインストールします。これにより、MCPサーバー設定が自動的に構成されます。（2）Figma MCPサーバーURLをMCPクライアント構成に手動で追加します。Claude Codeの場合は、/mcpコマンドを実行して接続を確認します。Figmaがアクティブなサーバーとしてリストされているはずです。
4. Figmaファイルとデザインシステムを準備する: コンポーネント、変数、トークン、命名規則を含むデザインシステムを含むFigmaファイルを開くか、作成します。デザインシステムが適切に構造化され、整理されていることを確認してください。エージェントはこれを真実のソースとして使用します。
5. ワークフローのスキルを選択または作成する: /figma-generate-design、/apply-design-system、/figma-generate-libraryなどの既存のコミュニティスキルから選択するか、カスタムスキルを作成します。スキルは、キャンバスでのエージェントの動作を教えるマークダウンファイルであり、使用するコンポーネント、シーケンス、従うべき規則を定義します。
6. use_figmaツールを使用してキャンバスに書き込む: MCPクライアントで、use_figmaツールを使用して設計指示を発行します。エージェントは、Plugin APIを介してFigmaファイルのコンテキストでJavaScriptを実行し、フレーム、コンポーネント、バリアント、変数、自動レイアウトなどの実際のFigma構造を作成します。
7. エージェントにコンテキストと指示を提供する: Figmaファイルを開き、操作するフレームまたはコンポーネントを選択します。作成または変更する内容について、エージェントに明確なプロンプトを与えます。エージェントはget_metadataツールとsearch_design_systemツールを使用して、利用可能なコンポーネントとトークンを理解し、既存のデザインシステムを使用してデザインを生成します。
8. コードからキャンバスへの変換にgenerate_figma_designを使用する（オプション）: ライブアプリまたはWebサイトから既存のUIをFigmaに取り込む必要がある場合は、generate_figma_designツールを使用します。これにより、HTMLがキャプチャされ、編集可能なFigmaレイヤーに変換されます。その後、use_figmaを使用してさらに変更できます。
9. エージェントの出力を確認して反復する: エージェントは、生成されたデザインのスクリーンショットを撮り、自己修復ループを繰り返して出力を洗練することができます。生成されたコンポーネント、フレーム、レイアウトを確認します。エージェントが微妙な領域で意図しない設計上の選択をする可能性があるため、必要に応じて手動で調整します。
10. コードとキャンバスの間の双方向ワークフローを維持する: Figma MCPサーバーを使用して、コードとキャンバスの間をスムーズに移動します。エージェントはFigmaファイルから読み取ってコードを生成し、Figmaに書き戻してデザインを更新し、デザインシステムを開発プロセス全体で単一の真実のソースとして維持します。
Figma for Agentsのよくある質問
use_figmaツールは、FigmaのMCPサーバーの一部であり、Claude Code、Codex、その他のMCPクライアントなどのAIエージェントがFigmaファイルに直接書き込むことを可能にします。これにより、エージェントはFigmaファイルとコンポーネントの作成と更新、変数の適用、および独自のデザインシステムを使用したデザインの構築が可能になります。このツールは、ライブアプリやウェブサイトからのHTMLを編集可能なFigmaレイヤーに変換する既存のgenerate_figma_designツールと連携して動作します。
Figma for Agentsウェブサイトの分析
Figma for Agentsのトラフィック＆ランキング
89.4M
月間訪問数
#201
グローバルランク
#15
カテゴリーランク
トラフィックトレンド: Jul 2024-Jun 2025
Figma for Agentsユーザーインサイト
00:13:32
平均訪問時間
20.5
訪問あたりのページ数
24.06%
ユーザーバウンス率
Figma for Agentsの主要地域
US: 15.36%
IN: 11.43%
RU: 8.18%
CN: 4.61%
JP: 3.39%
Others: 57.02%
Figma for Agentsに類似した最新のAIツール
Gait
Gaitは、AI支援コード生成とバージョン管理を統合するコラボレーションツールであり、チームがAI生成コードのコンテキストを効率的に追跡、理解、共有できるようにします
invoices.dev
invoices.devは、開発者のGitコミットから直接請求書を生成する自動請求プラットフォームで、GitHub、Slack、Linear、Googleサービスとの統合機能を備えています。
EasyRFP
EasyRFPは、RFP（提案依頼）の応答を効率化し、深層学習技術を通じてリアルタイムのフィールド表現型を可能にするAI駆動のエッジコンピューティングツールキットです
Cart.ai
Cart.aiは、コーディング、顧客関係管理、ビデオ編集、eコマースの設定、カスタムAI開発を含む包括的なビジネス自動化ソリューションを提供するAI駆動のサービスプラットフォームで、24時間365日のサポートがあります
Figma for Agentsに似た人気のAIツール
GitHub Copilot Chat
GitHub Copilot Chatは、自然言語の対話、リアルタイムのコード提案、そしてサポートされているIDEおよびGitHub.com内での文脈に応じた支援を提供するAI駆動のコーディングアシスタントです
CopilotForXcode
CopilotForXcodeは、Xcode内でAI駆動のコード提案、チャット支援、プロンプトからコードへの機能を提供するXcodeソースエディタ拡張機能です。
BrowserAI
BrowserAI is an open-source library that enables running local Large Language Models (LLMs) directly in web browsers with WebGPU acceleration, offering privacy-focused AI capabilities without requiring server infrastructure.
OpenAI Codex CLI
OpenAI Codex CLIは、ターミナルで実行される軽量なオープンソースのコーディングエージェントであり、開発者は自然言語をコード実行に変換し、コードを実行し、ファイルを操作し、バージョン管理下で反復処理できるChatGPTレベルの推論を提供します。