はじめに
この機能を使用できるユーザー
リモートサーバーはすべてのシートとプランで利用可能です。
デスクトップサーバーは全ての有料プランのDevまたはフルシートで利用可能です。
MCPサーバーをサポートするコードエディターまたはアプリケーションを使用する必要があります(例:VS Code、Cursor、Windsurf、Claude Codeなど）。当社のMCPカタログでサポートされているクライアントの完全なリストをご覧ください。
Figma MCPサーバーは、開発者が迅速かつ正確にデザインを調査および実装するのを支援します。
- Figma Design、FigJam、およびMakeファイルからデザインコンテキストとコードを取得します
- ライブUIをデザインレイヤーとしてキャプチャし、コードによってレンダリングされたインターフェースをFigma Designファイルに取り込みます
- デザインコンポーネントとCode Connectの活用方法を強化します
注: このガイドはFigma MCPサーバーが提供する内容を大まかに紹介するものです。サーバーの使用方法や例のプロンプトに関する具体的な指示については、以下を参照してください。
追加の詳細な記事は、Figma開発者ドキュメンテーションで利用できます。
FigmaのMCP サーバーに含まれるツールは、Figmaから追加のコンテキストをワークフローに取り込み、コードが既存のシステムだけでなく、デザインとも一致するようにします。
MCPサーバーは、モデルコンテキストプロトコルを使用してAIエージェントがデータソースとやり取りするための標準化されたインターフェースの一部です。
MCPサーバーについて知識を深め、Figmaをワークフローに取り入れるためには、当社のFigma MCPコレクションをご覧ください →
注意: このページはFigma MCPサーバーの一般的な概要です。詳細な手順やコードサンプルについては、Figma MCPサーバー開発者ドキュメンテーションをご覧ください。
サーバーが有効になると、以下が可能になります。
-
ウェブアプリとサイトのライブUIからデザインを生成
ブラウザからのライブUIを、Figmaで編集可能なデザインレイヤーに変換(プロダクション、ステージング、またはローカルホスト)。ページ、要素、またはフロー全体をFigma Designに送信し、検討・認識合わせ・改善に活用します。
注: この機能にはリモートFigma MCPサーバーが必要で、現在サポートされているのはClaude Code、OpenAIのCodex、およびVS Codeのみです。
この機能は継続的に改善されています。問題が発生した場合は、サポートチャットボットFigから報告するか、サポートへメールでお問い合わせ(有料プラン)ください。
-
選択したフレームからコードを生成する
Figmaのフレームを選択してコードに変換します。新しいフローを作成したり、アプリの機能を改良したりするプロダクトチームに最適です。
-
デザインの背景を抽出する
変数、コンポーネント、レイアウトデータをIDEに直接取り込みます。デザインシステムやコンポーネントベースのワークフローで特に役立ちます。
-
FigJamリソースを取得
FigJamダイアグラムからコンテンツにアクセスし、コード生成ワークフローで使用します。初期段階のアイデア、フロー、アーキテクチャマップを直接開発に組み込みます。
-
Makeリソースを取得する
Makeファイルからコードリソースを収集し、それらをコンテキストとしてLLMに提供します。これは、プロトタイプから本番環境のアプリケーションに移行する際に役立ちます。
-
Code Connectでデザインシステムコンポーネントを一貫性のあるものに保つ
実際のコンポーネントを再利用して出力品質を向上させます。Code Connectは、生成されたコードとコードベースの整合性を維持します。
MCPサーバーを設定
Figma MCPサーバーを接続する方法は2つあります:
-
リモートMCPサーバー: Figmaのホストエンドポイント
https://mcp.figma.com/mcpに直接接続します。リモートMCPサーバーのインストール方法を学ぶ。 - デスクトップMCPサーバー: Figmaデスクトップアプリを通じてローカルで実行します。デスクトップMCPサーバーのインストール方法を学ぶ。
MCPサーバーをエディタに接続
ご利用のエディターに応じた手順に従い、Figma MCPサーバーにローカルまたはリモートで接続してください。一部のクライアントでは、Skillsにも対応しており、AIツールがFigmaのデザインをより効果的に扱えるようにするエージェントレベルの指示を追加できます。
| クライアント | デスクトップサーバーサポート | リモートサーバーのサポート | Skillsサポート |
| Amazon Q | ✓ | ||
| Android Studio | ✓ | ✓ | |
| Claude Code | ✓ | ✓ | |
| Codex by OpenAI | ✓ | ✓ | |
| Cursor | ✓ | ✓ | |
| Gemini CLI | ✓ | ✓ |
|
| Kiro | ✓ | ✓ | |
| OpenHands | ✓ |
|
|
| Replit | ✓ |
|
|
| VS Code | ✓ | ✓ |
|
| Warp | ✓ | ✓ |
|
Skillsについて
Skillsは、MCPツールの呼び出しと詳細な指示を組み合わせて、エージェントが特定のタスクをどのように実行すべきかのガイダンスを提供します。
Figma MCPサーバーは個々のツールを提供しますが、Skillsは、Figmaデザインを扱う際にどのツールを使用するか、どの順序で実行するか、そしてその結果をどのように活用するかをエージェントが理解するのに役立ちます。
Skillsは、以下のようなワークフローでエージェントをガイドできます:
- Code Connectを使用して、Figmaデザインコンポーネントをコードコンポーネントに接続する
- コードベースに整合したデザインシステムのルールを生成する
- デザインを本番環境で利用可能なコードへ変換する
Skillsは、MCPコネクションを置き換えるものでも、新たなMCPの機能を追加するものでもありません。推奨されるワークフローを再利用可能な指示としてまとめることで、設定の手間や試行錯誤を減らします。
ヒント: 対応しているエディタとクライアントの最新リストについては、MCPカタログを確認してください。
MCPクライアントをプロンプト
Figma MCPサーバーには、LLMがFigmaのデザインを解釈するのに役立つ一連のツールが導入されています。接続すると、特定のデザインノードにアクセスするよう、MCPクライアントに指示できます。
ツールと例の完全なリストは、ツールとプロンプトをご覧ください。
まず、お好みのMCPクライアント用にFigma MCPサーバーをインストールする手順に従ってください。以下の内容に関する手順を提供しています:
他のMCPクライアントの場合、MCPサーバーを追加するためのクライアントのドキュメンテーションの指示に従ってください。リンクについては、エディターにMCPサーバーを接続のセクションにある表をご参照ください。
例: デザインコンテキストを取得する
ファイルからデザインコンテキストとコードを取得するには、リンクを使用します。デザインコンテキストを取得するには:
- Figma Designで、デザインのコンテキストを取得したいレイヤーを選択します。
- ブラウザのアドレスバーに、Figma内のフレームまたはレイヤーへのリンクをコピーします。
-
MCPクライアントでURLを貼り付け、デザインの実装を支援するようクライアントに指示します。
クライアントがそのURLに直接アクセスすることはできませんが、MCPサーバーがどのオブジェクトの情報を返すべきかを特定するために必要なノードIDを抽出します。
例: UIをFigmaに送信
注: 現在は、リモートFigma MCPサーバーを使用する場合に限り、Claude Code、Codex by OpenAI、およびVS Codeで利用できます。
WebアプリやサイトのライブUIをFigmaに送信する操作は、MCPクライアントとの対話を通じて行います。
- MCPクライアントに次のようにプロンプトを入力します。「アプリのローカルサーバーを起動し、UIを新しいFigmaファイルとしてキャプチャしてください。」
- クライアントが提供する手順に従ってください。クライアントは、ブラウザウィンドウを開くか、アクセスするためのリンクを提供します。
- キャプチャツールバーを使用して、ウェブアプリやサイトのページ、要素、状態をキャプチャします。
- 作業が完了したら、クライアントに完了したことを伝えます。クライアントから、作成されたFigmaファイルを開くためのリンクが提供されます。
MCPサーバーの出力を改善
最適な出力を得るために、エージェントをガイドするルールの設定をおすすめします。はじめに役立つものとして、いくつかのサンプルルールをご用意しています。