Figma-Context MCP サーバー

「Figma-Context」MCP サーバーは何をするのか？

Figma-Context MCP サーバーは、AI コーディングエージェントと Figma デザインレイアウトの間を橋渡しするために設計されたツールです。Figma のレイアウトデータを Model Context Protocol (MCP) を通じて公開し、Cursor などのプラットフォームで利用される AI アシスタントが、開発ワークフロー中に Figma ファイルを直接取得・分析・推論できるようにします。これにより、AI が UI 実装やコード生成、コンポーネント抽出、デザインからコードへの変換などを、Figma プロジェクトから最新のレイアウト情報を取得しながら支援できるようになります。本サーバーは仲介役として、Figma との安全かつ構造化された API 連携を実現し、LLM や開発者がコンテキストとしてデータを利用できるようにします。

プロンプト一覧

リポジトリやドキュメントに明示的なプロンプトテンプレートは記載されていません。

リソース一覧

リポジトリやドキュメントに明示的な MCP リソースは記載されていません。

ツール一覧

明示的なツール一覧（例：server.py やコードリスト）はありません。利用可能なツールエンドポイントや関数の詳細も、現時点のドキュメントには記載されていません。

この MCP サーバーのユースケース

• UI 実装支援: AI エージェントが Figma レイアウトにアクセスし、デザインをコードに変換する際に開発者をサポート。ピクセルパーフェクトな実装を実現します。
• コンポーネント抽出: Figma ファイルから再利用可能なコンポーネントを自動的に特定・抽出し、フロントエンド開発を加速します。
• デザインレビュー自動化: Figma デザインを参照しながら AI によるコードレビューを行い、不整合を早期に発見します。
• ドキュメント生成: Figma レイアウトから直接 UI 要素のドキュメントを AI が生成し、チーム内のコミュニケーションを向上させます。
• 迅速なプロトタイピング: ライブな Figma ファイルをもとにコードプロトタイプを素早く作成でき、イテレーションを高速化します。

セットアップ方法

Windsurf

1. Node.js がインストールされていることを確認します。
2. Windsurf の設定ファイルを探します。
3. mcpServers セクションに下記の JSON を追加します:

   {
     "figma-context": {
       "command": "npx",
       "args": ["@GLips/figma-context-mcp-server@latest"]
     }
   }
   

4. 設定を保存し、Windsurf を再起動します。
5. Windsurf のログや UI でサーバーが起動していることを確認します。

API キーの安全な管理

Figma API キーは環境変数として保存し、設定で参照してください:

{
  "figma-context": {
    "env": {
      "FIGMA_API_KEY": "${FIGMA_API_KEY}"
    },
    "inputs": {
      "figmaApiKey": "${FIGMA_API_KEY}"
    }
  }
}

Claude

1. Node.js をインストールします。
2. Claude の設定パネルまたは設定ファイルを開きます。
3. mcpServers 配列に Figma-Context MCP サーバーを下記のように追加します:

   {
     "figma-context": {
       "command": "npx",
       "args": ["@GLips/figma-context-mcp-server@latest"]
     }
   }
   

4. 保存して Claude を再起動します。
5. Claude でサーバーステータスを確認して接続を確認します。

Cursor

1. Node.js がインストールされていることを確認します。
2. Cursor の設定や設定ファイルを編集します。
3. mcpServers プロパティに下記を追加します:

   {
     "figma-context": {
       "command": "npx",
       "args": ["@GLips/figma-context-mcp-server@latest"]
     }
   }
   

4. 変更を保存し、Cursor を再起動します。
5. ログや UI からサーバー起動を確認してください。

Cline

1. Node.js が未導入の場合はインストールします。
2. Cline の設定にアクセスします。
3. 下記のように Figma-Context MCP サーバーを追加します:

   {
     "figma-context": {
       "command": "npx",
       "args": ["@GLips/figma-context-mcp-server@latest"]
     }
   }
   

4. 保存して Cline を再起動します。
5. Cline の診断機能で連携ができているか確認します。

注意: Figma API キーは Windsurf セクションの例のように必ず環境変数で安全に管理してください。

この MCP をフローで使う方法

FlowHunt で MCP を利用

FlowHunt ワークフローに MCP サーバーを組み込むには、まず MCP コンポーネントをフローに追加し、AI エージェントと接続します。

MCP コンポーネントをクリックして設定パネルを開きます。システム MCP 設定セクションにて、下記の JSON 形式で MCP サーバー情報を入力してください:

{
  "figma-context": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

設定が完了すると、AI エージェントはこの MCP をツールとして利用できるようになり、すべての機能にアクセスできます。"figma-context" の部分はご自身の MCP サーバー名に、URL もご自身の MCP サーバーの URL に変更してください。

概要

この MCP 実装は、全体像やセットアップ手順は明確ですが、プロンプト・リソース・ツールエンドポイントの詳細なドキュメントが不足しており、カスタムワークフローの発見性に課題があります。

MCP スコア

評価まとめ:
上記情報に基づき、この MCP サーバーの評価は 4/10 です。全体像がわかりやすく、利用者も多く（スター・フォーク多数）、明確なオープンソースライセンスもありますが、MCP ツールやリソース、プロンプトに関する詳細なドキュメントが不足しており、高度な MCP 連携や開発者の採用促進には物足りなさがあります。