Figma MCPサーバーのガイド

Figma MCPサーバーは、Figma Design、FigJamおよびMakeファイルからコードを生成するAI エージェントに重要なコンテキストを提供することで、開発者がデザインを迅速かつ正確に実装できるよう支援します。FigmaのMCP サーバーに含まれるツールは、Figmaから追加のコンテキストをワークフローに取り込み、コードが既存のシステムだけでなく、デザインとも一致するようにします。

MCPサーバーは、モデルコンテキストプロトコルを使用してAIエージェントがデータソースとやり取りするための標準化されたインターフェースの一部です。

MCPサーバーについて知識を深め、Figmaをワークフローに取り入れるためには、当社のFigma MCPコレクションをご覧ください →

サーバーが有効になると、以下が可能になります。

• 選択したフレームからコードを生成する

  Figmaのフレームを選択してコードに変換します。新しいフローを作成したり、アプリの機能を改良したりするプロダクトチームに最適です。

• デザインの背景を抽出する

  変数、コンポーネント、レイアウトデータをIDEに直接取り込みます。デザインシステムやコンポーネントベースのワークフローで特に役立ちます。

• FigJamリソースを取得

  FigJamダイアグラムからコンテンツにアクセスし、コード生成ワークフローで使用します。初期段階のアイデア、フロー、アーキテクチャマップを直接開発に組み込みます。

• Makeリソースを取得する

  Makeファイルからコードリソースを収集し、それらをコンテキストとしてLLMに提供します。これは、プロトタイプから本番環境のアプリケーションに移行する際に役立ちます。

• Code Connectでデザインシステムコンポーネントを一貫性のあるものに保つ

  実際のコンポーネントを再利用して出力品質を向上させます。Code Connectは、生成されたコードとコードベースの整合性を維持します。

  Code Connectに関する詳細はこちら→

MCPサーバーを設定

Figma MCPサーバーを接続する方法は2つあります:

• デスクトップMCPサーバー: Figmaデスクトップアプリを通じてローカルで実行します。
• リモートMCPサーバー: Figmaのホストエンドポイントhttps://mcp.figma.com/mcpに直接接続します。

デスクトップMCPサーバーを有効にする

1.  Figmaデスクトップアプリを開き、最新バージョンに更新されていることを確認します。

2. Figma Designファイルを作成するか開きます。

3. 下部ツールバーの Dev Mode に切り替えるか、キーボードショートカット Shift⁠Dを使用します。

4. インスペクトパネルのMCPサーバーセクションで、デスクトップMCPサーバーを有効化をクリックします。

サーバーが稼働すると、ウィンドウの下部に確認メッセージが表示されます。

MCPサーバーをエディタに接続

ローカルまたはリモートでFigma MCPサーバーに接続するために、利用中のエディタに応じた手順に従ってください:

MCPクライアントをプロンプト

Figma MCPサーバーには、LLMがFigmaのデザインを解釈するのに役立つ一連のツールが導入されています。接続すると、特定のデザインノードにアクセスするよう、MCPクライアントに指示できます。

Figma designのコンテキストをAIクライアントに提供する方法は2つあります。

セレクションベース(デスクトップサーバーのみ)

1. Figmaのデスクトップアプリを使用して、Figma内のフレームまたはレイヤーを選択します。
2. クライアントに現在の選択内容の実装をサポートするよう指示します。

リンクベース

1. Figmaのフレームまたはレイヤーへのリンクをコピーします。
2. 選択したURLでデザインを実装するよう、クライアントに指示します。

ツールと使用法の提案

Figma MCPサーバーには、AIアシスタントがコードをデザインに合わせて生成、適用、整合させるのに役立ついくつかのツールが含まれています。各ツールは、コードの生成からコンポーネントのマッピング、デザイントークンの取得など、異なるワークフローをサポートしています。使用可能なツールや使用法の提案について詳しくは、Figma MCPサーバー開発者ドキュメンテーションをご覧ください。